craft-site

Name: craft-site
Author: michtio

33installs6forks

How to install craft-site?

michtio/craftcms-claude-skills/craft-site

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

Installs into the current project.

Summary

Craft CMS 5 front-end Twig development — atomic design, template architecture, components, Vite buildchain. Covers atoms/molecules/organisms, props/extends/block patterns, layout chains, view routing, content builders, image presets, Tailwind named-key collections, multi-brand CS

Files · 1

View on GitHub

SKILL.md

1	# Craft CMS 5 — Front-End Twig (Atomic Design)
2
3	Atomic design system patterns for Craft CMS 5 site templates. Vanilla Twig —
4	no module dependency. Works with any Craft 5 project.
5
6	This skill is scoped to front-end template architecture — component design,
7	routing, composition, theming, and buildchain. For extending Craft (plugins,
8	modules, PHP), see the `craftcms` skill.
9
10	## Companion Skills — Always Load Together
11
12	When this skill triggers, also load:
13
14	- `craft-twig-guidelines` — Twig coding standards: variable naming, null handling, whitespace control, include isolation, Craft helpers. Required for any Twig code.
15	- `craft-content-modeling` — Sections, entry types, fields, Matrix, relations. Required when deciding what content to query or how templates access data.
16	- `ddev` — All commands run through DDEV. Required for running Vite, npm, and Craft CLI commands.
17	- `craft-cloud` — When the site is hosted on Craft Cloud (detect via `craft-cloud.yaml` at the repo root or `craftcms/cloud` in `composer.json`). Required for edge static caching rules, `cloud.esi(...)` dynamic islands inside cached pages, edge image transform constraints, and the `csrfInput()` requirement on cacheable pages.
18	- `servd` — When the site is hosted on Servd (detect via `servd.yaml` at the repo root or `servd/craft-asset-storage` in `composer.json`). Required for Servd static caching, `{% dynamicInclude %}` islands in cached pages, running Blitz in reverse-proxy mode, and off-server image transforms.
19
20	## Documentation
21
22	- Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html
23	- Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html
24	- Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html
25	- Twig 3 docs: https://twig.symfony.com/doc/3.x/
26
27	Use `WebFetch` on specific doc pages when a reference file doesn't cover enough detail.
28
29	## Common Pitfalls (Cross-Cutting)
30
31	- Missing `only` on `{% include %}` — ambient variables leak in silently.
32	- Variant logic via conditionals (`{% if variant == 'x' %}`) instead of extends/block.
33	- Naming atoms by parent context (`hero-button`) instead of visual treatment (`button--primary`).
34	- `utilities` prop used as override — it's additive. Override via named-slot merge.
35	- Queries inside views — views receive data, they don't fetch it.
36	- Missing `.eagerly()` on relation fields in views — causes N+1 queries.
37	- Missing `devMode` fallback in builders for unknown block types.
38	- Hardcoded Tailwind colors (`bg-yellow-600`) instead of brand tokens (`bg-brand-accent`).
39	- Mixing buttons and links — buttons are actions (resolve to `<a>`, `<button>`, or `<span>` from props), links are navigation (always `<a>`). Separate atom categories.
40	- Tracking/analytics inside components — decouple to data attributes at view/page level.
41	- Forgetting `project-config/touch` after editing YAML outside the CP — Git pulls, manual edits, and merge conflict resolution don't update `dateModified`. Run `ddev craft project-config/touch` then `ddev craft up`, or `craft up` on other environments won't detect the change.
42
43	## Reference Files
44
45	Read the relevant reference file(s) for your task. Multiple files often apply together.
46
47	Task examples:
48	- "Build a new card component" → read `atomic-patterns.md` + `composition-patterns.md` + `component-inventory.md` + `tailwind-conventions.md`
49	- "Set up a new project's template structure"

People who liked this also viewed

6 picks

Type

craft-site

33installs6forks

View on GitHub

How to install craft-site?

michtio/craftcms-claude-skills/craft-site

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Craft CMS 5 — Front-End Twig (Atomic Design)
2
3	Atomic design system patterns for Craft CMS 5 site templates. Vanilla Twig —
4	no module dependency. Works with any Craft 5 project.
5
6	This skill is scoped to front-end template architecture — component design,
7	routing, composition, theming, and buildchain. For extending Craft (plugins,
8	modules, PHP), see the `craftcms` skill.
9
10	## Companion Skills — Always Load Together
11
12	When this skill triggers, also load:
13
14	- `craft-twig-guidelines` — Twig coding standards: variable naming, null handling, whitespace control, include isolation, Craft helpers. Required for any Twig code.
15	- `craft-content-modeling` — Sections, entry types, fields, Matrix, relations. Required when deciding what content to query or how templates access data.
16	- `ddev` — All commands run through DDEV. Required for running Vite, npm, and Craft CLI commands.
17	- `craft-cloud` — When the site is hosted on Craft Cloud (detect via `craft-cloud.yaml` at the repo root or `craftcms/cloud` in `composer.json`). Required for edge static caching rules, `cloud.esi(...)` dynamic islands inside cached pages, edge image transform constraints, and the `csrfInput()` requirement on cacheable pages.
18	- `servd` — When the site is hosted on Servd (detect via `servd.yaml` at the repo root or `servd/craft-asset-storage` in `composer.json`). Required for Servd static caching, `{% dynamicInclude %}` islands in cached pages, running Blitz in reverse-proxy mode, and off-server image transforms.
19
20	## Documentation
21
22	- Twig in Craft: https://craftcms.com/docs/5.x/development/twig.html
23	- Template tags: https://craftcms.com/docs/5.x/reference/twig/tags.html
24	- Template functions: https://craftcms.com/docs/5.x/reference/twig/functions.html
25	- Twig 3 docs: https://twig.symfony.com/doc/3.x/
26
27	Use `WebFetch` on specific doc pages when a reference file doesn't cover enough detail.
28
29	## Common Pitfalls (Cross-Cutting)
30
31	- Missing `only` on `{% include %}` — ambient variables leak in silently.
32	- Variant logic via conditionals (`{% if variant == 'x' %}`) instead of extends/block.
33	- Naming atoms by parent context (`hero-button`) instead of visual treatment (`button--primary`).
34	- `utilities` prop used as override — it's additive. Override via named-slot merge.
35	- Queries inside views — views receive data, they don't fetch it.
36	- Missing `.eagerly()` on relation fields in views — causes N+1 queries.
37	- Missing `devMode` fallback in builders for unknown block types.
38	- Hardcoded Tailwind colors (`bg-yellow-600`) instead of brand tokens (`bg-brand-accent`).
39	- Mixing buttons and links — buttons are actions (resolve to `<a>`, `<button>`, or `<span>` from props), links are navigation (always `<a>`). Separate atom categories.
40	- Tracking/analytics inside components — decouple to data attributes at view/page level.
41	- Forgetting `project-config/touch` after editing YAML outside the CP — Git pulls, manual edits, and merge conflict resolution don't update `dateModified`. Run `ddev craft project-config/touch` then `ddev craft up`, or `craft up` on other environments won't detect the change.
42
43	## Reference Files
44
45	Read the relevant reference file(s) for your task. Multiple files often apply together.
46
47	Task examples:
48	- "Build a new card component" → read `atomic-patterns.md` + `composition-patterns.md` + `component-inventory.md` + `tailwind-conventions.md`
49	- "Set up a new project's template structure"

People who liked this also viewed

6 picks

Type