القائمة
デザインシステムの新規構築と既存ルールの強制を行う。トークン設計、コンポーネント設計、 プロジェクトセットアップ、日本語タイポグラフィをガイドする。 「デザインシステムを作りたい」「DS を構築」「コンポーネントライブラリを作る」 「トークンを設計」「デザインシステムに従って」などのリクエストで使用する。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
写真に写っている人物の顔を検出してぼかし、匿名化した画像を作成する。YuNet による 2 パス顔検出、ガウスぼかし、拡大クロップでの目視検証、取りこぼしの手動追いぼかしまでのワークフロー。「顔をぼかして」「顔にモザイク」「写真の顔を隠して」「人物を匿名化して」などのリクエストで使用する。
Analyze X creator subscription accounts through X's authenticated internal Web API. Use when asked to collect subscriber counts, subscription-only post counts, monthly prices, estimated gross monthly revenue, rankings, or summary statistics for X Subscriptions, including the user's managed set of subscribed creators.
X（Twitter）上の公開情報を検索し、投稿、アカウント、スレッド、最近の話題、評判、反応を根拠となる x.com URL 付きで調査する。「X で検索して」「X でこの投稿やアカウントを探して」「X で最近何が話題？」「X 上の反応や評判を調べて」などで使用する。投稿、返信、引用、いいね、フォロー、ブロック、ミュート、報告、削除などの書き込み操作や、指定された X URL またはログイン済み X 画面そのものを開いて閲覧・確認する依頼には使用しない。
chrome-devtools MCP でログイン済み Chrome を使い、X (Twitter) の内部 Web API (api.x.com / i/api) を fetch で呼んで一括操作する。ブロック解除、ブロック、ミュート、フォロー解除などをまとめて処理したいときに使う。X のレートリミット (短い窓あたり約 10 件) の回避方法を含む。「X で全員ブロック解除して」「まとめてミュート」「一括でフォロー解除」などのリクエストで使用する。
Check Luma event guests against X profile, follow, mutual-follow, affiliation, and recent-account-activity requirements. Use when Codex needs to review a Luma event guest table, extract pending guests and X profile links, identify missing/invalid/deleted/protected X accounts, use X relationship lookup to verify whether guests follow the logged-in organizer account, check whether candidates have posted from their own X account within the last month excluding repost-only activity using read-only internal APIs, prioritize mutual follows before followed-by-only candidates, check whether a specific X handle registered and what current Luma status it has, manage X rate limits without causing 429s, and report decline or approval-support candidates without ever performing approve, decline, or other guest write actions.
Archive only the current Codex App thread when the user invokes /archive or $archive to finish the current thread. Use the Codex App thread archive tool without passing a thread id so no other thread is archived.
| name | design-system |
| description | デザインシステムの新規構築と既存ルールの強制を行う。トークン設計、コンポーネント設計、 プロジェクトセットアップ、日本語タイポグラフィをガイドする。 「デザインシステムを作りたい」「DS を構築」「コンポーネントライブラリを作る」 「トークンを設計」「デザインシステムに従って」などのリクエストで使用する。 |
デザインシステムの構築から運用までをガイドするスキル。2 つのモードで動作する。
プロジェクトに .design-system/system.md が存在しない場合に適用。
トークン設計 -> 技術選定 -> プロジェクト初期化 -> コンポーネント実装の順にガイドする。
各フェーズの決定事項を .design-system/system.md に記録し、次のフェーズへ進む。
プロジェクトに .design-system/system.md が存在する場合に適用。
ファイルに記録されたトークン、パターン、技術スタックに従ってコーディングを強制する。
.design-system/system.md を探す既存プロダクトがある場合のみ実施。新規の場合は Phase 2 へ。
出力: 矛盾リストと優先コンポーネントリストをユーザーに提示。
ユーザーと対話して 3-5 個のデザイン原則を策定する。
質問する内容:
各原則に Do/Don't の具体例を添える。
出力例:
1. 明確さ優先 - 装飾より情報の伝達を優先する
Do: ラベルを省略しない、エラー原因と対処法を両方伝える
Don't: アイコンだけで意味を伝えようとしない
決定内容を .design-system/system.md の Design Principles セクションに記録。
references/token-design.md を参照して以下を決定する。
決定事項:
ユーザーにカラー候補を提示する際は、既存ブランドカラーがあるか確認する。
日本語フォントは references/japanese-typography.md を参照。
出力フォーマット(DTCG JSON):
{
"color": {
"primitive": {
"blue-500": { "$type": "color", "$value": "#3b82f6" }
},
"semantic": {
"primary": { "$type": "color", "$value": "{color.primitive.blue-500}" }
}
}
}
決定内容を .design-system/system.md の Tokens セクションに記録。
references/tech-stack-guide.md を参照し、ユーザーと対話して決定する。
決定事項:
ユーザーの経験や好みに合わせて推奨構成を提案する。 迷った場合のデフォルト推奨: React + Tailwind v4 + Radix UI + CVA + tsdown + pnpm + Turborepo
決定内容を .design-system/system.md の Tech Stack セクションに記録。
references/project-setup.md を参照してモノレポを構築する。
design-system/
apps/
docs/ # Storybook
packages/
tokens/ # DTCG JSON + Style Dictionary
components/ # UI コンポーネント
icons/ # SVG -> コンポーネント変換
pnpm-workspace.yaml
turbo.json
package.json
各パッケージの初期ファイルを生成:
packages/tokens/: Phase 3 で決定したトークンを DTCG JSON で配置、Style Dictionary 設定packages/components/: Headless UI + バリアント管理のベース設定packages/icons/: SVG 変換パイプラインapps/docs/: Storybook 設定references/component-patterns.md を参照してコンポーネントを実装する。
推奨実装順:
cn() ヘルパー、型定義各コンポーネントの実装時に守ること:
...rest props)Storybook のセットアップと拡張:
tags: ['autodocs'])ドキュメントサイトが必要な場合は Astro Starlight を推奨。
npm パッケージとしての公開準備:
package.json の exports フィールドで ESM エントリを定義"sideEffects": false で Tree-shaking を有効化MCP サーバー化(オプション): デザインシステムのトークンとコンポーネント情報を MCP 経由で AI エージェントに公開する。 日本企業の先行事例: Spindle MCP, kamii-mcp, MFUI MCP
.design-system/system.md が存在する場合、以下のルールを適用する。
#xxx, rgb())を使わない。トークン経由で参照するreferences/japanese-typography.md と system.md の Japanese Typography セクションに従う:
ルールから逸脱する必要がある場合:
構築モードの各フェーズで決定した内容を以下のフォーマットで保存する。 強制モードではこのファイルを読み込んでルールを適用する。
# Design System: [project-name]
## Design Principles
1. [原則名] - [説明]
Do: [具体例]
Don't: [具体例]
## Tokens
### Colors
- primitive: { blue-500: #3b82f6, ... }
- semantic: { primary: blue-500, background: white, ... }
- dark: { background: gray-900, ... }
### Typography
- font-family: "Noto Sans JP", sans-serif
- base-size: 16px
- scale-ratio: 1.25
- sizes: { xs: 10px, sm: 13px, base: 16px, lg: 20px, xl: 25px, 2xl: 31px }
### Spacing
- base: 4px
- scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80]
### Elevation
- level-0: none
- level-1: 0 1px 2px rgba(0,0,0,0.05)
- level-2: 0 4px 6px rgba(0,0,0,0.07)
- level-3: 0 10px 15px rgba(0,0,0,0.1)
- level-4: 0 20px 25px rgba(0,0,0,0.15)
### Border
- radius: { sm: 4px, md: 8px, lg: 12px, full: 9999px }
### Breakpoints
- sm: 640px, md: 768px, lg: 1024px, xl: 1280px
## Component Patterns
- headless-base: Radix UI
- variant-tool: CVA
- styling: Tailwind CSS v4
- component-style: Compound Components
## Tech Stack
- framework: React
- styling: Tailwind CSS v4
- build: tsdown
- monorepo: pnpm + Turborepo
- docs: Storybook 10
- test: Vitest + Testing Library
- versioning: Changesets
## Japanese Typography
- font: "Noto Sans JP", sans-serif
- line-height-body: 1.7
- line-height-heading: 1.3
- letter-spacing: 0.03em
## Exceptions
(ルールからの逸脱を記録)