skills.rest
michtio
michtioCOMMUNITY
Explore all skills by this author →
GitHub

craft-site

Standardize Craft CMS 5 front-end Twig templating with atomic design and Vite.

66|6|Updated Apr 7, 2026
Search Tags:#theming#vite#templating#twig#atomic-design#craft-cms
One-click install
npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-site
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: craft-site
Source: https://github.com/michtio/craftcms-claude-skills/tree/main/skills/craft-site
Command: npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-site

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines and standardizes Craft CMS 5 front-end Twig development across teams by prescribing a cohesive templating approach that aligns with atomic design and modern build tools.

Core Features & Use Cases

  • Atomic design-driven template architecture (atoms/molecules/organisms) for scalable front-end templates.
  • Vite-based build chain and asset loading with Craft 5 integration for per-page script loading and fast development.
  • Multi-brand theming and template routing conventions to support multi-site Craft deployments.
  • Use cases include building site templates, component libraries, and consistent front-end UX across plugins and sites.

Quick Start

Load the Twig templates, structural patterns, and buildchain references to scaffold a new Craft 5 front-end.

Frequently Asked Questions about craft-site

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up atomic design Twig templates in Craft CMS 5?▼

Atomic design Twig templates in Craft CMS 5 are structured using atoms, molecules, and organisms to build scalable front-end templates. This approach enforces Twig props, extends, and block patterns for consistent component architecture across projects.

What's the best way to integrate Vite with Craft CMS 5 for asset loading?▼

Vite integration with Craft CMS 5 uses a Vite-based build chain for fast development and per-page script loading. It provides asset loading conventions that streamline front-end builds without requiring custom plugin or module development.

Can I use Craft CMS 5 Twig templating for multi-brand theming across sites?▼

Craft CMS 5 Twig templating supports multi-brand theming through dedicated template routing conventions. This enables distinct per-brand themes and consistent front-end UX across multi-site Craft deployments.

Does this Craft CMS 5 front-end approach require plugin or module development?▼

No, this Craft CMS 5 front-end templating approach does not require plugin or module development. It focuses entirely on Twig templating patterns, Vite build chain integration, and atomic design component systems.

How do I load per-page scripts in Craft CMS 5 Twig templates?▼

Per-page script loading in Craft CMS 5 Twig templates is handled through the Vite-based build chain and asset loading conventions. This ensures scripts are loaded efficiently per page within the atomic design component system.

Related Skills

Explore More Software Engineering Skills→
michtiomichtio
66

craft-twig-guidelines

Standardize Twig template coding conventions for Craft CMS 5.

Community
Advanced
octobercmsoctobercms
9

octobercms-theme-development

Develop October CMS themes with Twig templates and CMS components.

Official
Intermediate
MiguelAngelLHMiguelAngelLH

creating-plugins

Create standard and native EmDash CMS plugins with TypeScript and the EmDash SDK.

Community
Advanced
TarasTsavolykTarasTsavolyk
1

add-tests

Generate unit and component tests for JavaScript web applications using Vitest, Vue Test Utils, and Playwright.

Community
Advanced