メニュー
Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/tim-hub/powerball-harness --skill uiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
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.
| 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