キュレーション済み

フロントエンドUIマスター

アクセシビリティ、再利用可能なコンポーネント、レスポンシブデザインを備えた本番グレードのフロントエンドインターフェースを構築します。WCAG準拠、コンポーネントアーキテクチャ、モバイルファーストレイアウトをカバーします。

3 スキル 13 インストール

frontenduiaccessibilityresponsive-designcomponents

8 日前に更新

インストール

このパック内のすべてのスキルをインストールするには、このコマンドを実行してください:

npx skillstore add @frontend-ui-mastery

CLI は Codex と Claude Code のフォルダを自動検出し、利用できる場合は両方にインストールします。

概要

使用ガイド

AI が改善しました

詳細ガイド

## 概要

Frontend UI Masteryは、3つの本番グレードのフロントエンドスキル — **frontend-accessibility**、**frontend-components**、**frontend-responsive** — を1つのプラグインにバンドルしています。これらを組み合わせることで、UIライフサイクル全体をカバーできます。再利用可能なコンポーネントを構築し、すべてのユーザーにとってアクセシブルにし、デバイス間でシームレスに適応させます。React、Vue、Svelte全体で一貫した規約を提供します。

## クイックスタート

1. OpenClawワークスペースにプラグインをインストールします。
2. 新しいUIをスキャフォールディングする際に、**frontend-components** を呼び出して、明確なpropsと最小限のローカルステートを持つ再利用可能な単一責任コンポーネントを定義します。
3. **frontend-accessibility** を適用し、セマンティックHTML、ARIA、キーボードナビゲーション、フォーカス管理、カラーコントラストを実装してから、スクリーンリーダーテストを実行してWCAG準拠を確認します。
4. 最後に **frontend-responsive** を使用して、モバイルファーストのブレークポイント、流動的なコンテナ、タッチフレンドリーなサイズを適用し、同じコンポーネントがスマートフォンからデスクトップまで適応するようにします。

## 主要コマンド

- `frontend-components` — 明確なインターフェースと適切なカプセル化を備えた、コンポーザブルなReact/Vue/Svelteコンポーネントを設計します。
- `frontend-accessibility` — WCAG準拠のため、セマンティックHTML、ARIA、キーボードナビゲーション、スクリーンリーダー互換性を監査して修正します。
- `frontend-responsive` — メディアクエリ、相対単位、標準ブレークポイントを使用したモバイルファーストのレスポンシブレイアウトを構築します。

## ヒント

- まずコンポーネントシェルを構築し（`frontend-components`）、その後すぐにアクセシビリティチェックを実行してから（`frontend-accessibility`）、レスポンシブスタイルを追加してください。後からa11yを修正するよりも、最初から組み込む方がはるかにコストが低くなります。
- `frontend-responsive` と実際のデバイステスト（または `375px`、`768px`、`1280px` でのDevToolsデバイスエミュレーション）を組み合わせることで、デスクトップファーストレイアウトでは見逃されがちなタッチターゲットやリフローの問題を捕捉できます。
- バックエンドやDBプラグインと組み合わせて、フルバティカルスライスを提供しましょう。UIプラグインはユーザーFacingのレイヤーをエンドツーエンドで処理します。