AgentSkillsCN

atomic-scaffolder

生成原子设计目录结构（原子、分子、有机体、模板、页面），并添加索引桶，以实现清晰的导出。

SKILL.md
--- frontmatter
name: atomic-scaffolder
description: "Generates the Atomic Design directory structure (atoms, molecules, organisms, templates, pages) and adds index barrels for clean exports."
license: MIT
triggers:
  - "scaffold atomic"
  - "generate atoms molecules organisms"
  - "create components structure"

Atomic Scaffolder

When to use this skill

  • •Use when starting the UI layer or when reorganizing components into Atomic Design.
  • •Triggered by prompts that request a structured components tree or sample atoms/molecules.

Instructions

  1. •

    First Step: Create src/components/{atoms,molecules,organisms,templates,pages} directories and ensure src/components/index.ts exists as a barrel.

  2. •

    Second Step: Add index.ts in each folder that re-exports components to simplify imports (e.g., export * from './atoms/Button').

  3. •

    Third Step: Optionally scaffold a small set of example atoms (Button, Input, Badge) and a molecule (PaperCard) to demonstrate wiring and naming conventions.

Examples

  • •Generated tree: src/components/ atoms/ Button.tsx index.ts molecules/ PaperCard.tsx index.ts

Additional Resources

Notes

  • •Keep atoms minimal and focused; molecules compose atoms; organisms compose molecules.
  • •Use TypeScript interfaces for component props and default Tailwind utility patterns.