{"id":"2baf9890-e5fc-4337-ba90-3b63bcc3c13c","shortId":"8mZNhh","kind":"skill","title":"craft-site","tagline":"Craft CMS 5 front-end Twig development — atomic design, template architecture, component patterns, Vite buildchain. Covers the full site template surface: atoms, molecules, organisms, props/extends/block pattern, layout chains, view routing, content builders, image presets, Tailw","description":"# Craft CMS 5 — Front-End Twig (Atomic Design)\n\nAtomic design system patterns for Craft CMS 5 site templates. Vanilla Twig —\nno module dependency. Works with any Craft 5 project.\n\nThis skill is scoped to **front-end template architecture** — component design,\nrouting, composition, theming, and buildchain. For extending Craft (plugins,\nmodules, PHP), see the `craftcms` skill.\n\n## Companion Skills — Always Load Together\n\nWhen this skill triggers, also load:\n\n- **`craft-twig-guidelines`** — Twig coding standards: variable naming, null handling, whitespace control, include isolation, Craft helpers. Required for any Twig code.\n- **`craft-content-modeling`** — Sections, entry types, fields, Matrix, relations. Required when deciding what content to query or how templates access data.\n- **`ddev`** — All commands run through DDEV. Required for running Vite, npm, and Craft CLI commands.\n\n## Documentation\n\n- Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html\n- Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html\n- Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html\n- Twig 3 docs: https://twig.symfony.com/doc/3.x/\n\nUse `WebFetch` on specific doc pages when a reference file doesn't cover enough detail.\n\n## Common Pitfalls (Cross-Cutting)\n\n- Missing `only` on `{% include %}` — ambient variables leak in silently.\n- Variant logic via conditionals (`{% if variant == 'x' %}`) instead of extends/block.\n- Naming atoms by parent context (`hero-button`) instead of visual treatment (`button--primary`).\n- `utilities` prop used as override — it's additive. Override via named-slot merge.\n- Queries inside views — views receive data, they don't fetch it.\n- Missing `.eagerly()` on relation fields in views — causes N+1 queries.\n- Missing `devMode` fallback in builders for unknown block types.\n- Hardcoded Tailwind colors (`bg-yellow-600`) instead of brand tokens (`bg-brand-accent`).\n- Mixing buttons and links — buttons are actions (resolve to ``, `