一键导入
frontend-design-system
Use for design-token work, CSS architecture, shared UI patterns, visual consistency, and responsive layout cleanup.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Use for design-token work, CSS architecture, shared UI patterns, visual consistency, and responsive layout cleanup.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.