SuperAPI AI 工具集

component-scaffolding

通用与其它

查看项目

更新于 10-16 02:32

技能介绍

用途:为 Drupal 主题生成组件骨架,组合 Twig 模板、Web Components 与 Miyagi 校验,用于新建或补充组件。触发场景包括“在 patterns/... 添加组件骨架”“创建新组件”“脚手架组件”,以及创建或更新 schema.yaml、mocks.yaml。

主要能力:按工作流在 src/components/<tier>/<component-name>/ 下生成组件文件,包括 Twig 模板、CSS、按需的 JavaScript、schema.yaml、mocks.yaml,并创建 src/css/<component-name>.css 入口,最后在 <theme-name>.libraries.yml 中按层级分区字母顺序添加库定义。

命名与层级:目录和文件用 kebab-case,CSS 类与 JS 类用 PascalCase,自定义元素用无前缀 kebab-case,库名形如 pattern-<component-name>。组件层级包括 elements(前缀 element-)、patterns(pattern-)、template-components(template-component-)、templates(template-)。主题名通过组件库根目录下的 *.libraries.yml 文件前缀确定,无法确定时询问用户。

使用方式:先确定主题名,再创建目录与文件,添加 CSS 入口和库定义,最后运行 linter 校验。可按用户要求跳过文件:说“无需 JavaScript”或“仅 CSS”则跳过 .js 并从库定义省略 js:;说“无需 CSS”或“仅 JavaScript”则跳过 .css 并省略 css:;说“仅 schema”则只生成 schema.yaml。

限制:资料未提供具体 Miyagi 校验命令、linter 名称与运行方式、安装步骤或收费信息;骨架只提供结构,不包含功能实现。文件缩进除 YAML 用 2 空格、YAML 遵循标准外均使用 Tab。CSS 入口对 element 层可用 elements.css。