hyva-child-theme by hyva-themes/hyva-ai-tools
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-child-theme此技能用于创建一个完整的 Hyvä 子主题,包含正确的目录结构、配置文件以及 Tailwind CSS 构建设置。
命令执行: 对于需要在开发环境内运行的命令(例如 bin/magento),请使用 hyva-exec-shell-cmd 技能来检测环境并确定合适的命令包装器。
提示用户提供以下信息:
供应商名称 : 供应商/公司命名空间(例如 "Acme", "MyCompany")
app/design/frontend 或 app/code/ 中已存在供应商名称文件夹,则以小写形式提供这些作为建议主题名称 : 主题的名称(例如 "customTheme", "StoreTheme")
app/design/frontend 中广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
如果用户已指定父主题,则使用该主题。父主题可以是:
Hyva/default-csp 或 Hyva/defaultapp/design/frontend/ 的 {Vendor}/{ThemeName}如果用户未指定父主题,则通过调用 hyva-theme-list 技能来发现项目中的所有 Hyvä 主题选项。
向用户提供选择父主题的选项:
Hyva/default-csp(如果已安装)或 Hyva/default{Vendor}/{ThemeName}后续步骤的父主题路径:
vendor/hyva-themes/magento2-default-theme-csp 或 vendor/hyva-themes/magento2-default-themeapp/design/frontend/{Vendor}/{ThemeName}在 app/design/frontend/<Vendor>/<themeName>/ 创建主题目录,包含:
app/design/frontend/<Vendor>/<themeName>/
├── registration.php
├── theme.xml
├── composer.json
└── web/
└── tailwind/
└── (从父主题复制)
<?php
declare(strict_types=1);
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register( ComponentRegistrar::THEME, 'frontend/<Vendor>/<themeName>', __DIR__);
<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Example Store Theme</title>
<parent>Hyva/default-csp</parent>
</theme>
标题格式化: 将 PascalCase 主题名称拆分为单独的单词(例如 StoreTheme → Store Theme)。标题应读作 <Vendor> <Theme Name Words>(例如 Example/StoreTheme → Example Store Theme)。
调整 <parent> 以匹配选定的父主题:
Hyva/default-csp 或 Hyva/default{ParentVendor}/{ParentThemeName}(例如 Example/baseTheme){
"name": "<vendor-lowercase>/<package-name>",
"description": "Example Store Theme based on Hyvä",
"type": "magento2-theme",
"license": "proprietary",
"require": {
"hyva-themes/magento2-default-theme-csp": "*"
},
"autoload": {
"files": [
"registration.php"
]
}
}
包名规则:
<ThemeName> 转换为 kebab-case(例如 StoreTheme → store-theme)-theme 后缀StoreTheme → store-theme(已以 "theme" 结尾,不添加后缀)CustomStore → custom-store-theme(添加后缀)myTheme → my-theme(已以 "theme" 结尾,不添加后缀)调整 require 依赖项以匹配父主题:
hyva-themes/magento2-default-theme-csp 或 hyva-themes/magento2-default-themecomposer.json),如果父主题不是 composer 包,则省略创建 web 目录并从父主题复制 tailwind 文件夹,排除 node_modules(复制的 node_modules 包含损坏的符号链接,必须重新安装):
mkdir -p app/design/frontend/<Vendor>/<ThemeName>/web
rsync -a --exclude='node_modules' <parent_theme_path>/web/tailwind app/design/frontend/<Vendor>/<ThemeName>/web/
其中 <parent_theme_path> 是:
vendor/hyva-themes/magento2-default-theme-cspvendor/hyva-themes/magento2-default-themeapp/design/frontend/{ParentVendor}/{ParentTheme}更新 web/tailwind/hyva.config.json,将父主题路径包含在 Tailwind 内容扫描中。
对于 Hyvä 默认主题父级:
{
"tailwind": {
"include": [
{ "src": "vendor/hyva-themes/magento2-default-theme-csp" }
]
}
}
对于子主题父级: 同时包含直接父级和根 Hyvä 主题,以确保扫描所有模板类:
{
"tailwind": {
"include": [
{ "src": "app/design/frontend/{ParentVendor}/{ParentTheme}" },
{ "src": "vendor/hyva-themes/magento2-default-theme-csp" }
]
}
}
如果子主题父级的 hyva.config.json 中已有额外的包含项,请复制这些项以维护完整的继承链。
使用 hyva-compile-tailwind-css 技能为新创建的主题(位于 app/design/frontend/<Vendor>/<ThemeName>/)安装依赖项并构建 CSS。
告知用户可以通过以下方式启用主题:
bin/magento config:set design/theme/theme_id <theme_id>运行 setup upgrade 以注册主题:
bin/magento setup:upgrade
bin/magento cache:flush
原因:项目中未安装 Hyvä 主题包。解决方案:通过 Composer 安装 Hyvä 主题:composer require hyva-themes/magento2-default-theme 或 hyva-themes/magento2-default-theme-csp。
原因:选定的父主题目录缺失或路径不正确。解决方案:在运行 rsync 之前验证父主题是否存在。使用 composer install 检查 Composer 包是否正确安装。
原因:父主题没有 web/tailwind 目录(可能出现在非常旧或自定义的主题中)。解决方案:回退到从 vendor/hyva-themes/magento2-default-theme-csp/web/tailwind 复制 tailwind 文件夹。
原因:Node 版本不匹配、网络问题或 package-lock.json 损坏。解决方案:
node --versionnode_modules 和 package-lock.json,然后重试 npm install原因:hyva.config.json 中的路径无效或缺少清除目标。解决方案:
hyva.config.json 中的所有路径是否存在于项目中成功创建后,提供摘要:
app/design/frontend/<Vendor>/<ThemeName>/Hyva/default-csp、Hyva/default 或 {Vendor}/{ThemeName})web/tailwind/tailwind-source.css 中自定义 Tailwindnpm run watchnpm run build每周安装数
166
代码仓库
GitHub 星标数
59
首次出现
Jan 27, 2026
安全审计
安装于
github-copilot164
opencode160
codex160
gemini-cli156
amp155
kimi-cli155
This skill creates a complete Hyvä child theme with the proper directory structure, configuration files, and Tailwind CSS build setup.
Command execution: For commands that need to run inside the development environment (e.g., bin/magento), use the hyva-exec-shell-cmd skill to detect the environment and determine the appropriate command wrapper.
Prompt the user to provide the following information:
Vendor Name : The vendor/company namespace (e.g., "Acme", "MyCompany")
Theme Name : The name of the theme (e.g., "customTheme", "StoreTheme")
If the user has specified a parent theme, use that. The parent can be:
Hyva/default-csp or Hyva/default{Vendor}/{ThemeName} from app/design/frontend/If the user has NOT specified a parent theme, discover available options by invoking the hyva-theme-list skill to find all Hyvä themes in the project.
Present the user with options to select a parent theme:
Hyva/default-csp (if installed) or Hyva/default{Vendor}/{ThemeName}Parent theme paths for later steps:
vendor/hyva-themes/magento2-default-theme-csp or vendor/hyva-themes/magento2-default-themeapp/design/frontend/{Vendor}/{ThemeName}Create the theme directory at app/design/frontend/<Vendor>/<themeName>/ with:
app/design/frontend/<Vendor>/<themeName>/
├── registration.php
├── theme.xml
├── composer.json
└── web/
└── tailwind/
└── (copied from parent theme)
<?php
declare(strict_types=1);
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register( ComponentRegistrar::THEME, 'frontend/<Vendor>/<themeName>', __DIR__);
<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Example Store Theme</title>
<parent>Hyva/default-csp</parent>
</theme>
Title formatting: Split PascalCase theme names into separate words (e.g., StoreTheme → Store Theme). The title should read as <Vendor> <Theme Name Words> (e.g., Example/StoreTheme → Example Store Theme).
Adjust <parent> to match the selected parent theme:
Hyva/default-csp or Hyva/default for Hyvä default themes{ParentVendor}/{ParentThemeName} for child theme parents (e.g., Example/baseTheme){
"name": "<vendor-lowercase>/<package-name>",
"description": "Example Store Theme based on Hyvä",
"type": "magento2-theme",
"license": "proprietary",
"require": {
"hyva-themes/magento2-default-theme-csp": "*"
},
"autoload": {
"files": [
"registration.php"
]
}
}
Package name rules:
<ThemeName> to kebab-case (e.g., StoreTheme → store-theme)-theme suffix only if the theme name doesn't already end with "theme"StoreTheme → store-theme (already ends with "theme", no suffix added)CustomStore → custom-store-theme (suffix added)myTheme → my-theme (already ends with "theme", no suffix added)Adjust the require dependency to match the parent theme:
hyva-themes/magento2-default-theme-csp or hyva-themes/magento2-default-themecomposer.json), or omit if the parent theme is not a composer packageCreate the web directory and copy the tailwind folder from the parent theme, excluding node_modules (copied node_modules contain broken symlinks and must be installed fresh):
mkdir -p app/design/frontend/<Vendor>/<ThemeName>/web
rsync -a --exclude='node_modules' <parent_theme_path>/web/tailwind app/design/frontend/<Vendor>/<ThemeName>/web/
Where <parent_theme_path> is:
vendor/hyva-themes/magento2-default-theme-csp for Hyvä default-cspvendor/hyva-themes/magento2-default-theme for Hyvä defaultapp/design/frontend/{ParentVendor}/{ParentTheme} for child theme parentsUpdate web/tailwind/hyva.config.json to include the parent theme path(s) in Tailwind content scanning.
For Hyvä default theme parent:
{
"tailwind": {
"include": [
{ "src": "vendor/hyva-themes/magento2-default-theme-csp" }
]
}
}
For child theme parent: Include both the immediate parent AND the root Hyvä theme to ensure all template classes are scanned:
{
"tailwind": {
"include": [
{ "src": "app/design/frontend/{ParentVendor}/{ParentTheme}" },
{ "src": "vendor/hyva-themes/magento2-default-theme-csp" }
]
}
}
If the child theme parent already has additional includes in its hyva.config.json, copy those to maintain the full inheritance chain.
Use the hyva-compile-tailwind-css skill to install dependencies and build CSS for the newly created theme at app/design/frontend/<Vendor>/<ThemeName>/.
Inform the user they can enable the theme via:
bin/magento config:set design/theme/theme_id <theme_id>Run setup upgrade to register the theme:
bin/magento setup:upgrade
bin/magento cache:flush
Cause : Hyvä theme packages not installed in the project. Solution : Install Hyvä themes via Composer: composer require hyva-themes/magento2-default-theme or hyva-themes/magento2-default-theme-csp.
Cause : The selected parent theme directory is missing or path is incorrect. Solution : Verify the parent theme exists before running rsync. Check that Composer packages are properly installed with composer install.
Cause : The parent theme doesn't have a web/tailwind directory (possible with very old or custom themes). Solution : Fall back to copying the tailwind folder from vendor/hyva-themes/magento2-default-theme-csp/web/tailwind instead.
Cause : Node version mismatch, network issues, or corrupted package-lock.json. Solution :
node --versionnode_modules and package-lock.json, then retry npm installCause : Invalid paths in hyva.config.json or missing purge targets. Solution :
hyva.config.json exist in the projectAfter successful creation, provide a summary:
app/design/frontend/<Vendor>/<ThemeName>/Hyva/default-csp, Hyva/default, or {Vendor}/{ThemeName})web/tailwind/tailwind-source.cssnpm run watch for developmentnpm run build before deploymentWeekly Installs
166
Repository
GitHub Stars
59
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
github-copilot164
opencode160
codex160
gemini-cli156
amp155
kimi-cli155
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
152,900 周安装
项目文档协调器 - 自动化文档生成与上下文管理工具
163 周安装
GPUI 布局与样式:Rust 类型安全的 CSS 样式库,Flexbox 布局与链式 API
163 周安装
Telegram自动化指南:通过Rube MCP与Composio实现消息发送、聊天管理
163 周安装
AI内容生成工具:一键生成图像、图表、文档、提案和PDF,提升内容创作效率
164 周安装
iOS无障碍功能开发指南:VoiceOver、动态字体、WCAG合规性检查与App Store审核
164 周安装
Phoenix AI 可观测性平台 - 开源 LLM 应用追踪、评估与监控解决方案
164 周安装