Agent skill
atomic-template
Create a React TEMPLATE that defines layout and composition without binding to real data sources. Use for page shells, dashboards, list-detail layouts, etc. Templates wire organisms together and expose slots/regions.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/atomic-template
SKILL.md
Atomic Design: TEMPLATE (React Functional Components)
You are creating a TEMPLATE: page-level layout composition without real data binding.
Hard rules
- Functional components only.
- No real data fetching in templates. Templates define structure, regions, and composition.
- Slot-based design:
- Prefer
header,sidebar,content,footerregions via props/children. - Avoid hard-coding copy and domain-specific assumptions.
- Prefer
- Responsiveness & semantics:
- Use proper landmarks and heading structure.
- Ensure layout works across breakpoints (as dictated by project conventions).
Output expectations
- Provide:
Template.tsxTemplate.stories.tsxshowing multiple compositions- Optional
Template.test.tsx(layout presence + landmark roles)
Recommended folder conventions
src/templates/<TemplateName>/...
Template checklist
- Defines regions clearly
- Minimal styling assumptions; flexible composition
- No domain logic or data acquisition
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?