菜单
Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
HAR: Execute Plans.md tasks from single task to full parallel team run. Trigger: implement, execute, do everything, breezing, team run, parallel. Do NOT load for: planning, review, release, setup.
Browser automation through the repo agent-browser CLI. Explicit helper for navigation, forms, screenshots, scraping, and web-app checks. Prefer Browser Use or Playwright when available. Do NOT load for: sharing URLs, embedding links, or editing screenshot files.
Explicit helper for authentication and payment implementation with Clerk, Supabase Auth, or Stripe. Do NOT load for: general UI work, database design, or non-auth features.
CI red? Call us. Pipeline fire brigade deploys. Use when user mentions CI failures, build errors, test failures, or pipeline issues. Do NOT load for: local builds, standard implementation work, reviews, or setup.
Explicit helper for CRUD scaffolding and API endpoint generation. Do NOT load for: UI components, form design, database schema discussion, or general implementation.
Deploy to Vercel/Netlify. One-way ticket to production arranged. Use when user mentions deployment, Vercel, Netlify, analytics, or health checks. Do NOT load for: implementation work, local development, reviews, or setup.
| name | ui |
| description | Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic. |
| description-en | Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic. |
| allowed-tools | ["Read","Write","Edit","Bash"] |
| user-invocable | false |
| disable-model-invocation | true |
A set of skills responsible for generating UI components and forms.
${CLAUDE_SKILL_DIR}/references/ui-skills.md with highest priority.${CLAUDE_SKILL_DIR}/references/frontend-design.md only when "sharp/distinctive/expressive/brand-focused" is explicitly requested.| Feature | Details |
|---|---|
| Constraint Set | See references/ui-skills.md / references/frontend-design.md |
| Component Generation | See references/component-generation.md |
| Feedback Forms | See references/feedback-forms.md |
When generating UI components, ensure accessibility:
♿ Accessibility Checklist
It is recommended that the generated UI meets the following:
### Required
- [ ] Set alt attributes on images
- [ ] Associate labels with form elements
- [ ] Keyboard operable (Tab to move focus)
- [ ] Focus state is visually apparent
### Recommended
- [ ] Information not conveyed by color alone
- [ ] Contrast ratio 4.5:1 or higher (text)
- [ ] Appropriate use of aria-label / aria-describedby
- [ ] Heading structure (h1 → h2 → h3) is logical
### Interactive Elements
- [ ] Buttons have appropriate labels (e.g., "View product details" not just "Details")
- [ ] Focus trap in modals/dialogs
- [ ] Error messages are read by screen readers
♿ Making designs usable by everyone
1. **Add descriptions to images**
- "Red sneakers, front view" not just "Product image"
2. **Make clickable areas keyboard-accessible too**
- Move with Tab key, confirm with Enter
3. **Don't rely on color alone**
- Not just red=error; also use icon + text