菜单
Apply the docs.plus design system (tokens, themes, elevation species, component state recipes) to any UI work. Use when the user mentions theme, colors, dark/light mode, borders, shadows, radius, styling, polish, cohesion, a new component/surface, or any visual change in apps/webapp.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Ask which skill or flow fits your situation. A router over the skills in this repo.
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Use when you need to resolve an in-progress git merge/rebase conflict.
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
Teach the user a new skill or concept, within this workspace.
| name | design-system |
| description | Apply the docs.plus design system (tokens, themes, elevation species, component state recipes) to any UI work. Use when the user mentions theme, colors, dark/light mode, borders, shadows, radius, styling, polish, cohesion, a new component/surface, or any visual change in apps/webapp. |
Working protocol for visual changes in apps/webapp. The source of truth is
.cursor/docs/design-system.md — tokens, themes, elevation species,
state language, and the per-component catalog. AGENTS.md owns behavioral invariants
(§UI And Theme, §Pad Workspace Surfaces, §Floating Surfaces And Modal Scrims, §Motion System).
:root vars (+ both dark
overrides) in globals.scss, exposed via @theme aliases when Tailwind utilities are needed.
Components never carry hex or raw palette classes (brand allowlist and media-anchored
black/white overlays excepted — see the doc's Color policy).base-200, active is-active
(primary-10% + primary ink), context-menu-active primary-15%/8%, focus
focus-visible:ring-2 ring-primary, unread error badge, disabled /40 ink. Cover both layers —
desktop and mobile variants of the same component share tokens, not necessarily geometry._document.tsx theme-color meta,
third-party CSS-var themings (em-emoji-picker, .documentKeywordInput), and the JS motion
mirror (utils/motion.ts).AGENTS.md when doctrine moved) in the
same change; after substantive design-system work, run the memory updater.*Classes.ts/*Styles.ts string modules; no second floating-surface language..ProseMirror; overlay species and motion tiers come from AGENTS.md.next build against a live dev server (shared .next) — tsc --noEmit + the running app.