メニュー
Use for UI, frontend, styling, landing page, or component creation; injects palettes, typography, layouts, motion, and anti-generic design rules.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when code changes may require documentation updates; maps git diff to candidate docs without auto-editing documentation.
Use for frontend, backend, mobile, debugging, security, or specialized engineering work that needs focused domain references and strict boundaries.
Use when an approved plan has independent tasks ready for delegated execution with fresh subagents and two-stage review.
Use before completion, PR, deploy, handoff, or when verifying code changes. Runs advisory or blocking checks and reports evidence.
Use when the task involves reading, creating, or editing `.docx` documents, especially when formatting or layout fidelity matters; prefer `python-docx` plus the bundled `scripts/render_docx.py` for visual checks.
Use when committing or pushing completed work; automates gate-aware conventional commits with optional signing and CI/CD checks.
| name | codex-design-system |
| description | Use for UI, frontend, styling, landing page, or component creation; injects palettes, typography, layouts, motion, and anti-generic design rules. |
| load_priority | on-demand |
Load before any UI/frontend task. This skill brings 30 palettes, 21 free font pairings, 20 layout patterns, 15 micro-interactions, composition rules, current trends, and developer-UI anti-pattern fixes. Anti-generic rules: no default blue, no plain white card stacks, no bootstrap look.
$design or "make it look premium/modern/creative".frontend-specialist agent is active.codex-design-md when the project needs a durable DESIGN.md contract or token export.#007bff, #2196F3, #3B82F6) or default purple (#6C63FF, #7C3AED) unless the chosen palette in references/palettes.md explicitly uses it.border-radius: 8px and box-shadow: 0 2px 4px rgba(0,0,0,0.1).references/palettes.md before writing UI code.references/typography.md.references/composition.md.references/micro-interactions.md.references/palettes.md.references/typography.md.references/patterns.md.references/micro-interactions.md.references/anti-patterns.md before finalizing.references/palettes.md — 30 curated palettes with exact hex tokens, mood, app fit, and contrast ratios.references/typography.md — 21 free font pairings with imports, weights, style tags, and fallback stacks.references/patterns.md — 20 layout patterns with structure, responsive CSS, and usage boundaries.references/micro-interactions.md — 15 motion patterns with CSS or JS code.references/composition.md — Visual hierarchy, spacing, grids, storytelling flow, and emphasis rules.references/trends.md — Current design trends for 2025-2026 with code signatures and fit guidance.references/anti-patterns.md — 15 developer-UI mistakes with wrong/right code and violated principles.