--- name: craft-site description: "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, Tailwind named-key collections, multi-brand CSS tokens, JavaScript boundaries (Alpine/DataStar/Vue, tabs, accordions, interactive components), Vite asset loading, and front-end auth (login, registration, password reset, user profiles). Triggers on: {% include ... only %}, {% embed %}, _atoms/, _molecules/, _organisms/, _views/, _builders/, _boilerplate/, component--variant.twig, _component--props.twig, image presets, Tailwind class collections, collect({}), utilities prop, multi-brand theming, data-brand, hero sections, card components, content builders, Matrix block rendering, craft.vite.script, vite.php, vite.config.ts, nystudio107, buildchain, asset loading, per-page scripts, Blitz, static caching, page caching, dynamic caching with Sprig, ImageOptimize, Imager-X, responsive images, srcset, image transforms, SEOmatic, meta tags, OpenGraph, JSON-LD, Sprig, htmx, multi-language site, language switcher, hreflang, localization, Formie, form styling, login form, registration form, user authentication front-end, RSS feed, Atom feed, JSON Feed, XML sitemap, feed.xml, sitemap.xml, |rss, |atom, search page, search results, .search(), search index, search form, search configuration, headless, headless CMS, GraphQL queries, preview tokens, Next.js, Nuxt, Astro, consuming GraphQL API, front-end framework integration. Always use when creating, editing, or reviewing any Craft CMS front-end Twig template, component, layout, view, builder, buildchain configuration, or front-end auth flow — including plugin template integration (Blitz, SEOmatic, Sprig, Formie, Imager-X). Do NOT trigger for PHP plugin/module development or content modeling decisions." --- # Craft CMS 5 — Front-End Twig (Atomic Design) Atomic design system patterns for Craft CMS 5 site templates. Vanilla Twig — no module dependency. Works with any Craft 5 project. This skill is scoped to **front-end template architecture** — component design, routing, composition, theming, and buildchain. For extending Craft (plugins, modules, PHP), see the `craftcms` skill. ## Companion Skills — Always Load Together When this skill triggers, also load: - **`craft-twig-guidelines`** — Twig coding standards: variable naming, null handling, whitespace control, include isolation, Craft helpers. Required for any Twig code. - **`craft-content-modeling`** — Sections, entry types, fields, Matrix, relations. Required when deciding what content to query or how templates access data. - **`ddev`** — All commands run through DDEV. Required for running Vite, npm, and Craft CLI commands. ## Documentation - Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html - Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html - Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html - Twig 3 docs: https://twig.symfony.com/doc/3.x/ Use `WebFetch` on specific doc pages when a reference file doesn't cover enough detail. ## Common Pitfalls (Cross-Cutting) - Missing `only` on `{% include %}` — ambient variables leak in silently. - Variant logic via conditionals (`{% if variant == 'x' %}`) instead of extends/block. - Naming atoms by parent context (`hero-button`) instead of visual treatment (`button--primary`). - `utilities` prop used as override — it's additive. Override via named-slot merge. - Queries inside views — views receive data, they don't fetch it. - Missing `.eagerly()` on relation fields in views — causes N+1 queries. - Missing `devMode` fallback in builders for unknown block types. - Hardcoded Tailwind colors (`bg-yellow-600`) instead of brand tokens (`bg-brand-accent`). - Mixing buttons and links — buttons are actions (resolve to ``, `