timothy191/arch-systems-portal/ui

Name: ui
Author: timothy191

Trust tier 3

community

By timothy191
Design
timothy191/arch-systems-portal
agent-harnesses/claude-code-harness/opencode/skills/ui/SKILL.md
Updated 16 Sep 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic.

Install

npx vskill@latest install timothy191/arch-systems-portal/ui

SKILL.md

UI Skills

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

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

基本は ${CLAUDE_SKILL_DIR}/references/ui-skills.md の制約を最優先で適用する。
${CLAUDE_SKILL_DIR}/references/frontend-design.md は「尖った/独自/表現強め/ブランド強化」などが明示された場合のみ適用する。
UI Skills の MUST/NEVER は原則維持。ただしユーザーが明示的に要求した場合のみ以下の例外を許可する:

グラデーション、発光、強い装飾
アニメーション（追加・拡張）
カスタム easing

機能詳細

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

実行手順

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

Step 0: 品質判定ゲート（a11y チェックリスト）

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

markdown

♿ アクセシビリティチェックリスト
 
生成する UI は以下を満たすことを推奨：
 
### 必須項目
 
-[ ] 画像に alt 属性を設定
-[ ] フォーム要素に label を関連付け
-[ ] キーボード操作可能（Tab でフォーカス移動）
-[ ] フォーカス状態が視覚的に分かる
 
### 推奨項目
 
-[ ] 色だけに依存しない情報伝達
-[ ] コントラスト比 4.5:1 以上（テキスト）
-[ ] aria-label / aria-describedby の適切な使用
-[ ] 見出し構造（h1 → h2 → h3）が論理的
 
### インタラクティブ要素
 
-[ ] ボタンに適切なラベル（「詳細」ではなく「製品詳細を見る」）
-[ ] モーダル/ダイアログのフォーカストラップ
-[ ] エラーメッセージがスクリーンリーダーで読まれる

VibeCoder 向け

markdown

♿ 誰でも使えるデザインにするために
 
1.**画像には説明をつける**
   -「商品画像」ではなく「赤いスニーカー、正面から」
 
2.**クリックできる場所はキーボードでも操作可能に**
   -Tab キーで移動、Enter で決定
 
3.**色だけで判断させない**
   -赤=エラー だけでなく、アイコン+テキストも

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingagent-harnesses/claude-code-harness/opencode/skills/ui/SKILL.md

Popularity

7-day trend score: 0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/timothy191/arch-systems-portal/ui/badge)](https://verified-skill.com/skills/timothy191/arch-systems-portal/ui)

Something wrong with this skill or its page? Tell us.