design-systemlisted

Read and respect the active DESIGN.md before generating any UI / frontend code / dashboard / design artifact. Use the 4-level cascade exposed by `cortex-agent design resolved` to find the right spec. Use proactively when: generating UI code, dashboards, prototypes, prototypes that touch color/typography/spacing, brand-aligned assets, or any visual output. Don't use when: pure backend / data / logic work with no visual surface.
Kucell/cortex-agent · ★ 1 · Web & Frontend · score 77

Install: claude install-skill Kucell/cortex-agent

# Design System ## Goal Make sure every AI agent (Claude Code / Codex / Cursor / etc.) in a cortex-agent project respects the project's active visual specification when producing any UI, frontend, dashboard, prototype, or design asset. The active specification is read from a **4-level cascade** (see below). Without this skill, agents fall back to generic defaults that ignore brand identity, accessibility, and project-specific anti-patterns. ## When to use Invoke this skill **before** any of: - Writing or modifying UI / frontend code (React, Vue, Svelte, HTML/CSS, …) - Generating dashboards, prototypes, or design artifacts - Suggesting colors, fonts, spacing, motion, or component styles - Refactoring existing UI to a new brand spec ## The 4-level cascade `cortex-agent design resolved` prints the cascade (highest priority first): ``` 1. <project_root>/DESIGN.md ← user override 2. <project_root>/.agent/DESIGN.md ← agent context 3. <project_root>/.agent/design-systems/<id>/DESIGN.md ← installed (LIFO) 4. templates/{zh,en}/.agent/DESIGN.md ← cortex-agent starter ``` The **first** layer is the effective spec. Read it before generating output. ## How to use 1. Run `cortex-agent design resolved` (or read `<cwd>/DESIGN.md` directly). 2. Identify the effective spec and its sections (Visual theme / Color roles / Typography / Layout / Components / Motion / Accessibility / Anti-patterns). 3. **Cite** the section name when ju