# 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. Use when this capability is needed. - Skill: `tomevault-io/atomic-template` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/atomic-template` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/atomic-template/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/atomic-template --- # Atomic Design: TEMPLATE (React Functional Components) You are creating a **TEMPLATE**: page-level layout composition without real data binding. ## Hard rules 1. **Functional components only**. 2. **No real data fetching** in templates. Templates define structure, regions, and composition. 3. **Slot-based design**: - Prefer `header`, `sidebar`, `content`, `footer` regions via props/children. - Avoid hard-coding copy and domain-specific assumptions. 4. **Responsiveness & semantics**: - Use proper landmarks and heading structure. - Ensure layout works across breakpoints (as dictated by project conventions). ## Output expectations - Provide: 1. `Template.tsx` 2. `Template.stories.tsx` showing multiple compositions 3. Optional `Template.test.tsx` (layout presence + landmark roles) ## Recommended folder conventions - `src/templates//...` ## Template checklist - [ ] Defines regions clearly - [ ] Minimal styling assumptions; flexible composition - [ ] No domain logic or data acquisition --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/andireuter) — claim your Tome and manage your conversions.