craft-twig-guidelines

Name: craft-twig-guidelines
Author: michtio

31installs6forks

How to install craft-twig-guidelines?

michtio/craftcms-claude-skills/craft-twig-guidelines

$npx -y skills add michtio/craftcms-claude-skills --skill craft-twig-guidelines

Installs into the current project.

Summary

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 em

Files · 1

View on GitHub

SKILL.md

1	# Twig Coding Standards — Craft CMS 5
2
3	Coding conventions for Twig templates in Craft CMS 5 projects. These apply to
4	all Twig code — atomic components, views, layouts, builders, partials.
5
6	## Companion Skills — Always Load Together
7
8	When this skill triggers, also load:
9
10	- `craft-site` — Template architecture and component patterns. Required when creating or editing components, layouts, views, or builders.
11	- `craft-content-modeling` — Content architecture. Required when template code involves element queries, field access, or section decisions.
12
13	For Twig architecture patterns (atomic design, routing, builders), see the
14	`craft-site` skill. For PHP coding standards, see `craft-php-guidelines`.
15
16	## Documentation
17
18	- Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html
19	- Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html
20	- Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html
21	- Twig 3 docs: https://twig.symfony.com/doc/3.x/
22
23	Use `WebFetch` on specific doc pages when something isn't covered here.
24
25	## Variable Naming
26
27	Single-word, descriptive, lowercase preferred. When multi-word is needed, use
28	camelCase.
29
30	```twig
31	{# Correct #}
32	{% set heading = entry.title %}
33	{% set image = entry.heroImage.one() %}
34	{% set items = navigation.links.all() %}
35	{% set element = props.get('url') ? 'a' : 'span' %}
36	{% set buttonText = entry.callToAction %}
37	{% set containerClass = 'max-w-3xl' %}
38
39	{# Wrong — abbreviations #}
40	{% set el = props.get('url') ? 'a' : 'span' %}
41	{% set btn = entry.callToAction %}
42	{% set nav = navigation.links.all() %}
43
44	{# Wrong — snake_case #}
45	{% set button_text = entry.callToAction %}
46	{% set container_class = 'max-w-3xl' %}
47	```
48
49	No abbreviations: `element` not `el`, `button` not `btn`, `navigation` not `nav`,
50	`description` not `desc`.
51
52	Prefer single-word names when context makes the meaning clear (e.g. `heading`
53	inside a component is better than `sectionHeading`). But multi-word camelCase is
54	perfectly fine when needed for clarity.
55
56	## Null Handling
57
58	`??` is the default. Always safe, always portable.
59
60	`???` (empty coalesce) is acceptable if the project already has `nystudio107/craft-emptycoalesce` or `nystudio107/craft-seomatic` installed — both provide the operator. But never install a plugin just for `???`. Check `composer.json` first.
61
62	```twig
63	{# Always correct #}
64	{% set heading = entry.heading ?? '' %}
65	{% set image = entry.heroImage.one() ?? null %}
66	{{ props.get('label') ?? 'Default' }}
67
68	{# OK if empty-coalesce or SEOmatic is installed — checks empty, not just null #}
69	{% set heading = entry.heading ??? '' %}
70
71	{# Wrong — verbose, unnecessary #}
72	{% if entry.heading is defined and entry.heading is not null %}
73	{% if entry.heading is not defined %}
74	```
75
76	Craft 5 supports the nullsafe operator (`?.`). Use it for deep traversal through
77	chains that may have null links — it propagates `null` cleanly without the verbose
78	`is defined and is not null` dance:
79
80	```twig
81	{# Reach for ?. when any link in the chain may be null #}
82	{{ entry?.author?.fullName ?? 'Anonymous' }}
83
84	{# ?? alone is enough when only the leaf is in question #}
85	{{ entry.title ?? '' }}
86	```
87
88	`??` stays the right tool for simple "value or fallback" cases; `?.` is for chains
89	where intermediate links may be missing. Don't reach for `?.` on a single property
90	access — it adds noise without adding safety.
91
92	## Whitespace Control
93
94	Use `{%-` and `{{-` for whitespace trimming. Never use `{%- min

People who liked this also viewed

6 picks

Type

craft-twig-guidelines

31installs6forks

View on GitHub

How to install craft-twig-guidelines?

michtio/craftcms-claude-skills/craft-twig-guidelines

$npx -y skills add michtio/craftcms-claude-skills --skill craft-twig-guidelines

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Twig Coding Standards — Craft CMS 5
2
3	Coding conventions for Twig templates in Craft CMS 5 projects. These apply to
4	all Twig code — atomic components, views, layouts, builders, partials.
5
6	## Companion Skills — Always Load Together
7
8	When this skill triggers, also load:
9
10	- `craft-site` — Template architecture and component patterns. Required when creating or editing components, layouts, views, or builders.
11	- `craft-content-modeling` — Content architecture. Required when template code involves element queries, field access, or section decisions.
12
13	For Twig architecture patterns (atomic design, routing, builders), see the
14	`craft-site` skill. For PHP coding standards, see `craft-php-guidelines`.
15
16	## Documentation
17
18	- Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html
19	- Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html
20	- Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html
21	- Twig 3 docs: https://twig.symfony.com/doc/3.x/
22
23	Use `WebFetch` on specific doc pages when something isn't covered here.
24
25	## Variable Naming
26
27	Single-word, descriptive, lowercase preferred. When multi-word is needed, use
28	camelCase.
29
30	```twig
31	{# Correct #}
32	{% set heading = entry.title %}
33	{% set image = entry.heroImage.one() %}
34	{% set items = navigation.links.all() %}
35	{% set element = props.get('url') ? 'a' : 'span' %}
36	{% set buttonText = entry.callToAction %}
37	{% set containerClass = 'max-w-3xl' %}
38
39	{# Wrong — abbreviations #}
40	{% set el = props.get('url') ? 'a' : 'span' %}
41	{% set btn = entry.callToAction %}
42	{% set nav = navigation.links.all() %}
43
44	{# Wrong — snake_case #}
45	{% set button_text = entry.callToAction %}
46	{% set container_class = 'max-w-3xl' %}
47	```
48
49	No abbreviations: `element` not `el`, `button` not `btn`, `navigation` not `nav`,
50	`description` not `desc`.
51
52	Prefer single-word names when context makes the meaning clear (e.g. `heading`
53	inside a component is better than `sectionHeading`). But multi-word camelCase is
54	perfectly fine when needed for clarity.
55
56	## Null Handling
57
58	`??` is the default. Always safe, always portable.
59
60	`???` (empty coalesce) is acceptable if the project already has `nystudio107/craft-emptycoalesce` or `nystudio107/craft-seomatic` installed — both provide the operator. But never install a plugin just for `???`. Check `composer.json` first.
61
62	```twig
63	{# Always correct #}
64	{% set heading = entry.heading ?? '' %}
65	{% set image = entry.heroImage.one() ?? null %}
66	{{ props.get('label') ?? 'Default' }}
67
68	{# OK if empty-coalesce or SEOmatic is installed — checks empty, not just null #}
69	{% set heading = entry.heading ??? '' %}
70
71	{# Wrong — verbose, unnecessary #}
72	{% if entry.heading is defined and entry.heading is not null %}
73	{% if entry.heading is not defined %}
74	```
75
76	Craft 5 supports the nullsafe operator (`?.`). Use it for deep traversal through
77	chains that may have null links — it propagates `null` cleanly without the verbose
78	`is defined and is not null` dance:
79
80	```twig
81	{# Reach for ?. when any link in the chain may be null #}
82	{{ entry?.author?.fullName ?? 'Anonymous' }}
83
84	{# ?? alone is enough when only the leaf is in question #}
85	{{ entry.title ?? '' }}
86	```
87
88	`??` stays the right tool for simple "value or fallback" cases; `?.` is for chains
89	where intermediate links may be missing. Don't reach for `?.` on a single property
90	access — it adds noise without adding safety.
91
92	## Whitespace Control
93
94	Use `{%-` and `{{-` for whitespace trimming. Never use `{%- min

People who liked this also viewed

6 picks

Type