Use for prototype, MVP, fullstack feature, from-scratch feature, or multi-domain work that needs a SPEC.md before planning or implementation. Do not use for tiny one-file edits.

2026-05-176

codex-docs-change-sync

Bang-isme/CodexAI---Skills

Use when code changes may require documentation updates; maps git diff to candidate docs without auto-editing documentation.

2026-05-066

codex-execution-quality-gate

Bang-isme/CodexAI---Skills

Use before completion, PR, deploy, handoff, or when verifying code changes. Runs advisory or blocking checks and reports evidence.

2026-05-066

codex-doc-renderer

Bang-isme/CodexAI---Skills

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.

2026-04-306

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

TL;DR

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.

Activation

Activate when task involves UI, frontend, styling, component work, or landing-page creation.
Activate on $design or "make it look premium/modern/creative".
Auto-load when frontend-specialist agent is active.
Pair with codex-design-md when the project needs a durable DESIGN.md contract or token export.

Anti-Generic Rules (HARD)

NEVER use default blue (#007bff, #2196F3, #3B82F6) or default purple (#6C63FF, #7C3AED) unless the chosen palette in references/palettes.md explicitly uses it.
NEVER ship plain white cards with border-radius: 8px and box-shadow: 0 2px 4px rgba(0,0,0,0.1).
NEVER use system fonts or unnamed "sans-serif"; specify exact font families and fallbacks.
NEVER build a fully symmetrical layout without hierarchy through size, spacing, color, or motion.
ALWAYS choose a palette from references/palettes.md before writing UI code.
ALWAYS choose a font pair from references/typography.md.
ALWAYS apply at least one composition principle from references/composition.md.
ALWAYS add at least two micro-interactions from references/micro-interactions.md.

Design Decision Flow

Decide the mood: premium, bold, calm, editorial, playful, technical, or luxury.
Pick one palette from references/palettes.md.
Pick one font pair from references/typography.md.
Pick one or two layout patterns from references/patterns.md.
Pick two or three micro-interactions from references/micro-interactions.md.
Check references/anti-patterns.md before finalizing.
Then write UI code with explicit values for color, type, spacing, radius, and shadow.

Reference Files

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.