- 遵循以下文件夹结构：
src/：项目源代码根目录。components/：存放可复用的 UI 组件。common/：通用组件，如按钮、输入框等。layout/：布局相关组件，如 Header, Footer, Sidebar 等。specific/：特定业务或页面使用的组件。
pages/：存放页面组件，每个文件代表一个路由页面。theme/：存放 Chakra UI 主题相关的配置。index.js：主题的入口文件，用于组合所有主题配置。foundations/：基础样式，如颜色、字体、间距、断点等。components/：组件样式覆盖和变体。
hooks/：存放自定义 React Hooks。utils/：存放工具函数、常量、辅助函数等。assets/：存放静态资源，如图片、字体、SVG 等。App.js：应用程序的根组件。index.js：应用程序的入口文件，通常用于渲染App组件并包裹ChakraProvider。
- 优点：
- 清晰的职责分离：每个目录都有明确的用途，便于团队协作和新成员快速上手。
- 可维护性：逻辑和 UI 分离，便于修改和扩展。
- 可扩展性：随着项目增长，可以轻松添加新的模块和功能。
- 一致性：统一的结构有助于保持整个代码库的一致性。
Chakra UI React Chakra UI Folder Structure
维护 React 和 Chakra UI 项目的定义文件夹结构以确保代码组织有序
liaosw97
Updated Chakra UI React Chakra UI Folder Structure by liaosw97 · 01c6912
npx skillmds@latest add liaosw97/chakra-ui-react-chakra-ui-folder-structure File contents
---name: chakra-ui-react-chakra-ui-folder-structuredescription: 维护 React 和 Chakra UI 项目的定义文件夹结构以确保代码组织有序---- **遵循以下文件夹结构**： - **`src/`**：项目源代码根目录。 - **`components/`**：存放可复用的 UI 组件。 - **`common/`**：通用组件，如按钮、输入框等。 - **`layout/`**：布局相关组件，如 Header, Footer, Sidebar 等。 - **`specific/`**：特定业务或页面使用的组件。 - **`pages/`**：存放页面组件，每个文件代表一个路由页面。 - **`theme/`**：存放 Chakra UI 主题相关的配置。 - **`index.js`**：主题的入口文件，用于组合所有主题配置。 - **`foundations/`**：基础样式，如颜色、字体、间距、断点等。 - **`components/`**：组件样式覆盖和变体。 - **`hooks/`**：存放自定义 React Hooks。 - **`utils/`**：存放工具函数、常量、辅助函数等。 - **`assets/`**：存放静态资源，如图片、字体、SVG 等。 - **`App.js`**：应用程序的根组件。 - **`index.js`**：应用程序的入口文件，通常用于渲染 `App` 组件并包裹 `ChakraProvider`。 - **优点**： - **清晰的职责分离**：每个目录都有明确的用途，便于团队协作和新成员快速上手。 - **可维护性**：逻辑和 UI 分离，便于修改和扩展。 - **可扩展性**：随着项目增长，可以轻松添加新的模块和功能。 - **一致性**：统一的结构有助于保持整个代码库的一致性。
liaosw97/awesome-rules-skills/tree/main/plugins/chakra-ui/skills/chakra-ui-react-chakra-ui---folder-structure commit 01c6912363
Frequently asked questions
Run npx skillmds@latest add liaosw97/chakra-ui-react-chakra-ui-folder-structure in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
维护 React 和 Chakra UI 项目的定义文件夹结构以确保代码组织有序 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.