Menu
Use for design-token work, CSS architecture, shared UI patterns, visual consistency, and responsive layout cleanup.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create custom subagents for specialized AI tasks. Use when you want to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
Debugging specialist for errors, test failures, and unexpected behavior. Use when encountering reproducible bugs; follow reproduction steps and remove instrumentation before finishing.
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when you want to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands into the skills directory.
Adversarial multi-model code review — launch parallel readonly reviewers on different models, then synthesize consensus vs lone findings. Do not apply fixes unless the user asks.
Reproduce reported bugs before fixing. Provide evidence of reproduction and the fix; do not stop after repro to ask the user—continue to fix.
Guide users building apps, scripts, CI pipelines, or automations on top of the Cursor SDK - TypeScript (@cursor/sdk) or Python (cursor-sdk / cursor_sdk). Use when integrating Cursor agents programmatically; Agent.create, Agent.prompt, streaming, local vs cloud runtime, MCP, errors.
| name | frontend-design-system |
| description | Use for design-token work, CSS architecture, shared UI patterns, visual consistency, and responsive layout cleanup. |
| when_to_use | ["Consolidating duplicated card / button / panel variants","Adding a new design token","Auditing CSS for off-token values","Building a new reusable component"] |
| related_files | ["styles/global.css","styles/pages/**","docs/DESIGN_TOKENS.md","docs/PERFORMANCE.md"] |
| related_prompts | [".github/prompts/mobile-ux-audit.prompt.md",".github/prompts/tracker-flagship-revamp.prompt.md"] |
Keeps Gold Ticker Live's UI coherent. Consolidate before you create.
styles/global.css)| Category | Prefix |
|---|---|
| Color | --color-* |
| Surface | --surface-* |
| Text | --text-* |
| Space | --space-* |
| Radius | --radius-* |
| Shadow | --shadow-* |
| Easing | --ease-* |
| Duration | --duration-* |
When you find yourself reaching for a hex / raw rem / arbitrary cubic-bezier, stop — check whether a token already covers it. If not, add the token (with rationale in a comment) and use it.
docs/DESIGN_TOKENS.md.checklists/tokens.mdchecklists/components.mdchecklists/responsive-layout.mdchecklists/accessibility.md.card variant instead of a token-driven size prop.style="..." for "just this one place".--z-* (or a documented stacking order).prefers-reduced-motion.