用途：该技能面向需要在现代前端框架中实施原子设计（原子、分子、组织、模板、页面）的项目，提供框架专属的实现模式，而非仅停留在方法论层面。
主要能力： 1）分层目录结构：为 React（含 Next.js 页面）、Vue 3、Angular 分别给出 atoms/molecules/organisms/templates/pages 的组织方式，并采用每层 barrel export（index.ts）统一导出。 2）组件模板：以按钮为例展示 React/TypeScript 的 forwardRef 组件、Vue 3 的 script setup 组件、Angular 的 standalone 组件写法，含变体、尺寸、加载、禁用等状态与无障碍属性。 3）逻辑复用：React 自定义 Hook（如 useHeader）与 Vue composable 示例，将组织级组件逻辑从视图分离。 4）设计令牌：通过 React Context（ThemeProvider/useTheme）提供颜色与间距等主题变量，Vue 侧使用 CSS 变量。 5）Storybook 集成：按“层级/组件名”组织故事标题，配合 argTypes、AllVariants、AllSizes 等展示，并给出 main.ts 配置（stories 路径、addon-essentials、addon-a11y、autodocs）。 6）测试集成：以 React/Vitest 为例覆盖渲染、状态、交互与无障碍断言。
使用方式：按所用框架复制对应目录结构，为每个组件建立 组件文件、样式、测试、故事 与 index 导出；跨层引用时通过 barrel export 导入，原子层不依赖上层。
适用场景：需要建立可复用、可测试、可文档化的组件体系的前端项目，尤其是多人协作的组件库或设计系统。
限制：资料以 React、Vue、Angular 示例为主，其他框架仅提及“通用模式”；未提供安装命令、版本依赖、构建配置细节、性能或收费信息；具体命令与代码请以原文为准。