メニュー
Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/indielayer/ui --skill component-themeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components.
Create or update component documentation pages in packages/ui/docs. Use when adding docs, demos, DocumentPage, usage.vue, or component doc routes.
Prepare @indielayer/ui changes for release with changesets and conventional commits. Use when versioning, publishing, changelog, semver, or before merging user-facing library changes.
SOC 職業分類に基づく
SKILL.md を表示中
| name | component-theme |
| description | Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts. |
| disable-model-invocation | true |
For component <Name>:
theme/<Name>.base.theme.tstheme/<Name>.carbon.theme.tsImport *Theme from ../<Name>.vue.
const theme: ButtonTheme = {
classes: {
wrapper({ props, slots, data }) { return ['...'] },
},
styles({ props, colors, css, data }) { /* CSS variables */ },
}
export default theme
Export in both:
packages/ui/src/themes/base/components.tspackages/ui/src/themes/carbon/components.tsKey must match the theme name used in useTheme('<Name>', ...).
When changing layout, states, or tokens in one variant, apply the same logical change to the other unless the carbon design intentionally differs.
Reference: packages/ui/src/components/button/theme/Button.base.theme.ts
defaultsVariant/layout booleans that should respect app.use(UI, { defaults }) must use optionalBooleanProp() from packages/ui/src/common/props.ts (not plain Boolean). Use useResolvedComponentProps when the template or script reads those props outside useTheme.