From claude-code-harness
Generates UI components, hero sections, and feedback forms with accessibility checks. Useful for UI elements, forms, feedback, or contact requests; avoids backend or auth.
npx claudepluginhub chachamaru127/claude-code-harness --plugin claude-code-harnessThis skill is limited to using the following tools:
UIコンポーネントとフォームの生成を担当するスキル群です。
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
UIコンポーネントとフォームの生成を担当するスキル群です。
${CLAUDE_SKILL_DIR}/references/ui-skills.md の制約を最優先で適用する。${CLAUDE_SKILL_DIR}/references/frontend-design.md は「尖った/独自/表現強め/ブランド強化」などが明示された場合のみ適用する。| 機能 | 詳細 |
|---|---|
| 制約セット | See references/ui-skills.md / references/frontend-design.md |
| コンポーネント生成 | See references/component-generation.md |
| フィードバックフォーム | See references/feedback-forms.md |
UI コンポーネント生成時は、アクセシビリティを確保:
♿ アクセシビリティチェックリスト
生成する UI は以下を満たすことを推奨：
### 必須項目
- [ ] 画像に alt 属性を設定
- [ ] フォーム要素に label を関連付け
- [ ] キーボード操作可能（Tab でフォーカス移動）
- [ ] フォーカス状態が視覚的に分かる
### 推奨項目
- [ ] 色だけに依存しない情報伝達
- [ ] コントラスト比 4.5:1 以上（テキスト）
- [ ] aria-label / aria-describedby の適切な使用
- [ ] 見出し構造（h1 → h2 → h3）が論理的
### インタラクティブ要素
- [ ] ボタンに適切なラベル（「詳細」ではなく「製品詳細を見る」）
- [ ] モーダル/ダイアログのフォーカストラップ
- [ ] エラーメッセージがスクリーンリーダーで読まれる
♿ 誰でも使えるデザインにするために
1. **画像には説明をつける**
- 「商品画像」ではなく「赤いスニーカー、正面から」
2. **クリックできる場所はキーボードでも操作可能に**
- Tab キーで移動、Enter で決定
3. **色だけで判断させない**
- 赤=エラー だけでなく、アイコン+テキストも