endorsment/.github/skills/atomic-scaffolder/SKILL.md

name, description, license, triggers

name	description	license	triggers
atomic-scaffolder	Generates the Atomic Design directory structure (atoms, molecules, organisms, templates, pages) and adds index barrels for clean exports.	MIT	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

• Atomic Design: https://bradfrost.com/blog/post/atomic-web-design/

Notes

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