Agent skill
atomic-molecule
Create or refactor a React MOLECULE (a small composition of atoms). Use for input groups, labeled fields, search bars, card headers, etc. Keep molecules reusable and lightly stateful only for UI concerns.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/atomic-molecule
SKILL.md
Atomic Design: MOLECULE (React Functional Components)
You are creating a MOLECULE: a composition of atoms that forms a small UI pattern.
Hard rules
- Functional components only.
- Composition over configuration:
- Prefer composing atoms with children/slots.
- Keep props focused on the pattern’s essential degrees of freedom.
- State scope:
- Local UI state is allowed only when it’s intrinsic to the widget (e.g., input focus, password visibility).
- No remote fetching; no app-level orchestration.
- Accessibility:
- Ensure correct labeling relationships (
label+htmlFor,aria-describedby, error messaging).
- Ensure correct labeling relationships (
- Controlled/uncontrolled:
- Prefer controlled where it matters; if supporting both, do it intentionally and document behavior.
Output expectations
- Provide:
Component.tsxComponent.test.tsx(render + key interactions + a11y-critical attributes)Component.stories.tsx(happy path + edge states like error/disabled)
Recommended folder conventions
src/components/molecules/<ComponentName>/...
Molecule checklist
- Built from atoms
- Minimal and well-documented props
- Handles validation/error UI predictably
- No domain-specific coupling
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?