القائمة
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