mithril-ui-kit-standards
A compliance skill for building UI components in mithril-ui-kit with strict docs and demo requirements.
Install
mkdir -p .claude/skills/mithril-ui-kit-standards && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15317" && unzip -o skill.zip -d .claude/skills/mithril-ui-kit-standards && rm skill.zipInstalls to .claude/skills/mithril-ui-kit-standards
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
mithril-ui-kit の UI コンポーネント実装標準。Use when: UIコンポーネントの追加、作成、改良、変更、修正、リファクタ、既存UIの挙動変更、CSS Modules対応、Bootstrap互換フォールバック、docs必須更新、live demo必須実装。Key capabilities
- →Add new UI components following defined standards
- →Refactor existing UI components
- →Update UI component documentation and live demos
- →Adjust UI appearance, API, behavior, and accessibility
- →Review CSS design and Bootstrap compatible fallback
How it works
The skill defines standard procedures for UI component work, requiring simultaneous updates to documentation and live demos. It specifies rules for CSS, Mithril implementation, and dependency management.
Inputs & outputs
When to use mithril-ui-kit-standards
- →Adding new UI components
- →Refactoring existing UI
- →Updating component documentation
About this skill
mithril-ui-kit UI 実装標準スキル
このスキルは、mithril-ui-kit における UI コンポーネント作業の標準手順を定義する。 UI コンポーネントの作業では、実装と同時に docs と live demo を必ず更新する。
いつ使うか
- 新しい UI コンポーネントを追加する
- 既存 UI コンポーネントを作り直す
- 既存 UI コンポーネントを改良・変更・修正する
- UI の見た目、API、挙動、アクセシビリティを調整する
- CSS 設計や Bootstrap 互換フォールバックを見直す
上記のいずれかに該当する場合は、このスキルを必ず適用する。
最重要ルール
- UI 実装だけで完了にしない。docs と live demo の更新まで必須
- docs 作業では mithril-ui-kit-docs スキルを必ず併用する
- Bootstrap 未読込でも破綻しない実装を維持する
- 公開 API 変更時は docs の API Reference を同時更新する
- 既存公開 API 互換は慎重に扱う
実装標準
CSS とスタイル
- コンポーネント固有スタイルは ComponentName.module.scss を基本にする
- TSX 側では import styles from "./ComponentName.module.scss" を使う
- 値指定は var(--bs-, var(--muk-, fallback)) の 2 段フォールバックを基本にする
- Bootstrap class 依存は増やさない
- DOM 操作の識別には data-* 属性を使い、CSS Modules のハッシュ class を識別子にしない
Mithril 実装
- JSX ファーストで記述する
- view() は可能な限り JSX で書く
- state 更新は Mithril 流儀で扱い、必要に応じて m.redraw() を使う
- React Hooks 記法は使わない
依存管理
- CDN 依存を増やさず npm バンドルを使う
- docs/demo でも import は mithril-ui-kit を使う
必須ワークフロー
- 対象コンポーネントの現行 API と利用箇所を確認する
- src/components 側の実装を更新する
- 必要なら .module.scss を追加または更新する
- docs/<Component>.md を作成または更新する
- docs/demos/<component-kebab-case>/ に live demo tsx を作成または更新する
- docs 導線を更新する（必要時: docs/.vitepress/config.mts, docs/index.md）
- docs スキルのチェック項目で検証する
- build と docs:build を通して最終確認する
完了条件
次をすべて満たした場合のみ完了とする。
- UI 実装が完了している
- docs 本文が更新されている
- live demo が更新されている
- API 変更が docs に反映されている
- docs ルートで表示確認できる
- build と docs:build が通る
関連スキル
- docs 作成標準: ../mithril-ui-kit-docs/SKILL.md
- コメント方針: ../typescript-code-comments/SKILL.md
When not to use it
- →When working on non-UI components
- →When the task does not involve mithril-ui-kit components
Limitations
- →Applies only to mithril-ui-kit UI components
- →Requires concurrent updates to docs and live demos
- →Mandates Bootstrap compatible fallback
How it compares
This skill enforces a structured workflow for UI component development, ensuring that documentation and live demos are updated concurrently with code changes, unlike an ad-hoc approach.
Compared to similar skills
mithril-ui-kit-standards side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| mithril-ui-kit-standards (this skill) | 0 | 3mo | No flags | Intermediate |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
| svelte-ui-design | 23 | 9mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
writing-registry-meta
siriwatknp
Use this skill when writing meta file for MUI Treasury registry.
figma-implement-design
openai
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.