菜单
Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications. |
| allowed-tools | ["Read","Grep","Glob","Bash"] |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere.
Before coding, understand the context and commit to a bold aesthetic direction:
Provide working code that is:
Frontend Design Checklist
- [ ] Clarify purpose, audience, and constraints
- [ ] Declare a specific aesthetic direction
- [ ] Define typography and color system
- [ ] Design layout and motion moments
- [ ] Implement production-grade code
- [ ] Explain key visual decisions briefly
Design robust backend systems and APIs. Use when users ask to plan or implement services, data models, or integrations.
A specialist skill that recognises and applies common software architecture patterns within a codebase. This skill should be used during the design and development phases of a project.
A skill that outlines best practices for using Git in a collaborative development environment, including branching strategies, commit conventions, and pull request workflows.
Analyses and optimises performance across frontend, backend and database interactions. Identifies bottlenecks and implements solutions to enhance speed and efficiency.
A specialist skill that analyses a codebase to understand its structure, dependencies, and architecture. This skill should be used at the start of a new project or when onboarding to an existing codebase.
A specialist skill for security reviews, threat modeling, and remediation guidance. Use for auth/permissions changes, secrets or PII handling, public endpoints, or dependency upgrades.