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

Ready to run

npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-site

💬 Prompt for ChatGPT / Claude Chat▼

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.