Injects 30 palettes, 21 font pairings, 20 layout patterns, 15 micro-interactions, composition rules, trends, and anti-generic design rules for UI, frontend, styling, landing pages, and components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/codexai-agentic-workflow:codex-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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 production-ready 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.npx claudepluginhub bang-isme/codexai---skillsGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.