component-organization

用途：解决前端项目目录混乱、相关文件难找、共享代码无明确归属的问题，提供一套按类型组织目录的参考模式。资料称其为参考模式，建议学习思路并结合自身情况调整，不要照搬。\n\n主要能力与结构：前端根目录下分 app/（框架路由，如 Next.js app dir、Nuxt pages）、components/（所有组件，基础原语放 components/ui/）、hooks/（自定义钩子，一文件一钩子）、lib/（工具、服务、业务逻辑，可按 api/、auth/、utils/ 等域分子目录）、queries/（数据获取，如 GraphQL 查询、API 调用）、types/（共享类型定义）、public/（静态资源）。\n\n关键规则：组件放 components/，相关时用子目录分组；钩子放 hooks/；业务逻辑放 lib/ 并按域组织；跨文件共享类型放 types/；基础 UI 原语放 components/ui/。\n\n适用场景与拆分时机：当 UI 被复用或父组件超过约 200 行时，在 components/ 中新建文件；当有状态逻辑被复用或使组件臃肿时，在 hooks/ 中新建文件；当某个域有 2 个以上相关文件（服务+工具、上下文+辅助）时，在 lib/ 下新建子目录；当组件是纯展示、无业务逻辑时，移入 components/ui/。\n\n限制：资料未提供具体安装命令、代码示例、收费、平台或效果等信息。该模式强调可预测性、复用性、可扩展性，适合组件库式共享 UI 的结构。资料还提到，若开发者纠正了本技能本应避免的行为，建议对本技能提出具体修订。