菜单
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 职业分类
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.
| 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