providr-react
基于Metronic主题的React模块自动化创建工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：providr-react。 它的用途是：基于Metronic主题的React模块自动化创建工具 完整的 Skill 内容见：https://321skill.com/skills/providr-react/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为供应商门户创建一个新的‘订单管理’模块，需要包含列表页、详情页和创建表单。”，它会自动调用此Skill，生成遵循Metronic主题规范的React组件文件、路由配置、API集成钩子以及对应的样式结构，并提示你将新模块添加到侧边栏菜单中。
介绍
这个Skill旨在解决在Providr React项目中，遵循Metronic Tailwind主题规范手动创建新模块或页面时，存在的重复劳动、风格不一致和效率低下问题。它通过提供一套完整的自动化模板和规范指南，让Claude能够快速生成符合项目约定的代码结构、UI组件和API集成代码。
使用时，开发者只需向Claude描述需要创建的新模块（如“任务管理”或“用户仪表盘”），Claude便会调用此Skill，自动生成包含页面组件、表单、数据表格、路由配置和API层在内的完整模块代码，所有文件均遵循预设的Metronic模式和项目结构。
它非常适合负责Providr项目前端开发、需要快速迭代新功能页面的开发人员，特别是那些希望保持代码风格统一、减少样板代码编写的前端或全栈工程师。
建议在使用前，先通过Skill内的参考文档（如patterns.md）了解项目的基本约定。对于高度定制化的特殊页面，生成的基础代码可能需要手动调整。同时，确保你的开发环境已配置好Skill所依赖的技术栈（如React Query、Formik等）。
核心特点
与通用的React代码生成器不同，它深度绑定并强制执行Providr项目特定的Metronic主题设计模式、文件组织结构和技术栈（如Shadcn UI、KeenIcons），确保生成的代码能无缝集成到现有项目中。
注意事项
仅适用于基于特定Metronic Tailwind主题和项目结构的Providr React项目，不适用于其他React项目或UI框架。
常见问题
如何创建一个新的仪表盘页面？
直接对Claude说“使用Metronic模式创建一个新的仪表盘模块”，它会自动生成所有必要文件。
生成的表单如何添加自定义验证？
生成的表单基于Formik和Yup，你可以在生成的模板文件中直接修改Yup验证模式来添加规则。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/providr-react/raw/index.md 读取 providr-react 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/providr-react/raw/index.md（查看排版版本）