메뉴
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