القائمة
Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ui |
| description | Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements. |
| when_to_use | UI component, hero section, landing page, contact form, front-end, visual elements, feedback form |
| allowed-tools | ["Read","Write","Edit","Bash"] |
| user-invocable | false |
A group 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 "edgy/unique/expressive/brand-enhancing" styles are 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 |
Ensure accessibility when generating UI components:
♿ Accessibility Checklist
Generated UI should meet the following:
### Required Items
- [ ] Set alt attributes on images
- [ ] Associate labels with form elements
- [ ] Keyboard navigable (Tab for focus movement)
- [ ] Focus state is visually distinguishable
### Recommended Items
- [ ] Do not rely on color alone for conveying information
- [ ] Contrast ratio 4.5:1 or higher (text)
- [ ] Appropriate use of aria-label / aria-describedby
- [ ] Heading structure (h1 -> h2 -> h3) is logical
### Interactive Elements
- [ ] Appropriate labels on buttons ("View product details" instead of "Details")
- [ ] Focus trap for modals/dialogs
- [ ] Error messages are read by screen readers
♿ Making Designs Accessible to Everyone
1. **Add descriptions to images**
- Instead of "product image", use "red sneakers, front view"
2. **Make clickable areas keyboard-navigable too**
- Navigate with Tab key, confirm with Enter
3. **Don't rely on color alone for judgment**
- Not just red=error, but also icon+text
Orchestrates the full powerball-harness plugin release with build, validation, version bump, CHANGELOG, tag, and GitHub Release. Use when releasing this plugin.
Generates product demo videos and release walkthroughs via Remotion. Use when creating video documentation or animated demos.
Plans and tracks tasks in .claude/harness/plans.json. Use when creating plans, adding tasks, updating markers, checking progress, or brainstorming an idea into tasks.
Initializes and configures Harness in a project — CI, memory, duo workflow, Codex. Use when setting up a new project or adding Harness configuration.
Executes plans.json tasks — solo, parallel, or breezing team mode. Use when implementing tasks or running the work loop.
Periodic housekeeping and session lifecycle management. Use when performing cleanup, pruning, or session commands.