mcpField
U
ui

ui

github.com/chachamaru127设计与 UI3.2k38 次安装2 周前更新
代码仓库

关于 ui

面向 UI 组件和表单生成的技能集，按优先级应用界面约束，并根据请求选择相应参考指南。适用于需要生成界面并关注可访问性的设计与开发工作。

主要功能

  1. 01按优先级应用界面约束
  2. 02生成 UI 组件
  3. 03生成反馈表单
  4. 04依据请求分类并查阅指南
  5. 05检查界面可访问性

适用场景

  1. 01根据既定规则生成 UI 组件
  2. 02创建反馈表单
  3. 03生成表单时检查标签关联
  4. 04检查键盘导航和图片替代文本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/chachamaru127/claude-code-harness --skill ui

安装后在 Claude Code 中输入/ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
component-generation.md
feedback-forms.md
frontend-design.md
ui-skills.md

详细介绍

来自项目 README

UI Skills

UIコンポーネントとフォームの生成を担当するスキル群です。

制約の優先順位と適用条件

  1. 基本は ${CLAUDE_SKILL_DIR}/references/ui-skills.md の制約を最優先で適用する。
  2. ${CLAUDE_SKILL_DIR}/references/frontend-design.md は「尖った/独自/表現強め/ブランド強化」などが明示された場合のみ適用する。
  3. UI Skills の MUST/NEVER は原則維持。ただしユーザーが明示的に要求した場合のみ以下の例外を許可する:
    • グラデーション、発光、強い装飾
    • アニメーション（追加・拡張）
    • カスタム easing

機能詳細

機能詳細
制約セットSee references/ui-skills.md / references/frontend-design.md
コンポーネント生成See references/component-generation.md
フィードバックフォームSee references/feedback-forms.md

実行手順

  1. 制約セットを適用（優先順位に従う）
  2. 品質判定ゲート（Step 0）
  3. ユーザーのリクエストを分類
  4. 上記の「機能詳細」から適切な参照ファイルを読む
  5. その内容に従って生成
Step 0: 品質判定ゲート（a11y チェックリスト）

UI コンポーネント生成時は、アクセシビリティを確保:

♿ アクセシビリティチェックリスト

生成する UI は以下を満たすことを推奨：

### 必須項目
- [ ] 画像に alt 属性を設定
- [ ] フォーム要素に label を関連付け
- [ ] キーボード操作可能（Tab でフォーカス移動）
- [ ] フォーカス状態が視覚的に分かる

### 推奨項目
- [ ] 色だけに依存しない情報伝達
- [ ] コントラスト比 4.5:1 以上（テキスト）
- [ ] aria-label / aria-describedby の適切な使用
- [ ] 見出し構造（h1 → h2 → h3）が論理的

### インタラクティブ要素
- [ ] ボタンに適切なラベル（「詳細」ではなく「製品詳細を見る」）
- [ ] モーダル/ダイアログのフォーカストラップ
- [ ] エラーメッセージがスクリーンリーダーで読まれる
VibeCoder 向け
♿ 誰でも使えるデザインにするために

1. **画像には説明をつける**
   - 「商品画像」ではなく「赤いスニーカー、正面から」

2. **クリックできる場所はキーボードでも操作可能に**
   - Tab キーで移動、Enter で決定

3. **色だけで判断させない**
   - 赤=エラー だけでなく、アイコン+テキストも

评论

支持 Markdown