craft-twig-guidelineslisted

Twig coding standards and conventions for Craft CMS 5 templates. ALWAYS load this skill when writing, editing, or reviewing any .twig file in a Craft CMS project — even for small edits. Covers: variable naming (camelCase, no abbreviations), null handling (?? operator, ??? with empty-coalesce plugin), whitespace control ({%- trimming, NOT {%- minify -%}), include isolation (always use 'only'), Craft Twig helpers ({% tag %}, tag(), attr(), |attr filter, |parseAttr, |append, svg()), collect() for props and class collections, .implode(), comment headers with ========= separators on component files, and common pitfalls (snake_case, macros as components, hardcoded colors). Triggers on: Twig template creation, editing, or review; .twig files; {% include %} with 'only'; {% tag %} and polymorphic elements; collect() and props.get(); class string building; attr() and |attr filter; svg() with styling and aria; ?? and ??? null coalescing; whitespace control and blank lines in output; minify alternatives; Twig file header
michtio/craftcms-claude-skills · ★ 53 · Code & Development · score 85

Install: claude install-skill michtio/craftcms-claude-skills

# Twig Coding Standards — Craft CMS 5 Coding conventions for Twig templates in Craft CMS 5 projects. These apply to all Twig code — atomic components, views, layouts, builders, partials. ## Companion Skills — Always Load Together When this skill triggers, also load: - **`craft-site`** — Template architecture and component patterns. Required when creating or editing components, layouts, views, or builders. - **`craft-content-modeling`** — Content architecture. Required when template code involves element queries, field access, or section decisions. For Twig **architecture** patterns (atomic design, routing, builders), see the `craft-site` skill. For PHP coding standards, see `craft-php-guidelines`. ## 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 something isn't covered here. ## Variable Naming Single-word, descriptive, lowercase preferred. When multi-word is needed, use camelCase. ```twig {# Correct #} {% set heading = entry.title %} {% set image = entry.heroImage.one() %} {% set items = navigation.links.all() %} {% set element = props.get('url') ? 'a' : 'span' %} {% set buttonText = entry.callToAction %} {% set containerClass = 'max-w-3xl' %} {# Wrong — abbreviations #} {% set el = prop