用途：为 Craft CMS 5 站点提供前端 Twig 模板架构方案，涵盖原子设计（atoms/molecules/organisms）、组件设计、路由、组合、主题与构建链。纯 Twig，无模块依赖，适用于任意 Craft 5 项目。范围仅限前端模板；扩展 Craft（插件、模块、PHP）请用 craftcms 技能。
配套技能（触发时一并加载）：craft-twig-guidelines（Twig 编码规范）、craft-content-modeling（内容建模）、ddev（所有命令经 DDEV 运行）、craft-cloud（检测到 craft-cloud.yaml 或 composer.json 含 craftcms/cloud 时）、servd（检测到 servd.yaml 或 servd/craft-asset-storage 时）。
主要能力：原子设计方法论与 5 到 3 层压缩；组件构造（props/extends/block、变体文件、按钮/链接/文本/图标原子）；组件组合（molecule、organism、结构嵌入、include/extends/embed 决策）；组件清单与分类；模板链与路由（布局层级、区块模板路径、全局变量、routers、views、内容构建器）；Tailwind 类组合约定；Vite 构建链（nystudio107 插件桥、config/vite.php、vite.config.ts、craft.vite.script()、按页条件加载、Tailwind v4、DDEV）；图片预设与 srcset/sizes；JS 边界决策（Twig → Alpine/DataStar → Vue）；collect() 集合 API；第三方集成（脚本加载顺序、CMP、GTM、分析、SES、插件 CSS 级联）；多站点模式（语言切换、hreflang、站点架构、跨站点查询）；前端认证流程与账户管理；搜索、Feeds（RSS/Atom/JSON Feed/XML 站点地图）、Headless 与 GraphQL、元素 partials、示例模板打包。
使用方式：按任务读取对应参考文件，多个文件常需同时使用。例如新建卡片组件读 atomic-patterns.md + composition-patterns.md + component-inventory.md + tailwind-conventions.md；新项目模板结构读 boilerplate-routing.md + component-inventory.md；Matrix 内容构建器读 boilerplate-routing.md + composition-patterns.md；响应式图片读 image-presets.md + plugins/image-optimize.md；Vite + Tailwind 搭建读 vite-buildchain.md。涉及具体插件时加载 craft-plugins 技能并打开对应参考。文档不足时用 WebFetch 抓取指定文档页。
约定与限制：原子按视觉处理命名而非父级上下文；HTML 元素类型由 props 解析（url → <a>、type → <button>、否则 <span>）；外链检测由 URL 推导，自动加 target="_blank"、rel="noopener noreferrer"、外链图标与 sr-only 文本；图标统一用 FontAwesome 类字符串；变体用 extends/block，不用条件逻辑切换样式；图片用单一原子加配置预设；类集合用命名键，utilities 为追加而非覆盖；多品牌主题用 CSS 自定义属性配合 data-brand；PHP 管数据、Twig 管呈现，视图不自行查询；collect() 用于 props 与类构建。编辑 CP 外 YAML 后需运行 ddev craft project-config/touch 再 ddev craft up。
常见陷阱：{% include %} 会静默泄漏环境变量；用条件切换变体；按父级命名原子；把 utilities 当覆盖；视图中查询数据；关系字段缺 .eagerly() 导致 N+1；构建器缺 devMode 回退；硬编码 Tailwind 颜色而非品牌令牌；混淆按钮与链接；组件内埋跟踪分析。
收费、价格与平台支持等资料暂未提供。