design について
designは、Auraデザインシステムを使った顧客向けUI制作を支援するスキルです。プリミティブの選択、セマンティックトークンの利用、一貫性とアクセシビリティのある状態設計、簡潔な文言作成を案内します。
主な機能
- 01Auraプリミティブとトークンの利用ガイド
- 02レイアウトと操作状態の統一
- 03UI動作のアクセシビリティガイド
- 04簡潔で行動を促すUI文言
- 05AuraドキュメントとStorybookの参照
活用シーン
- 01フォーム、テーブル、ナビゲーションの作成や移行
- 02Auraコンポーネントとトークンを使ったページ設計
- 03読み込み・成功・エラー表示の設計
- 04キーボード操作とフォーカスの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/designを入力して読み込まれたか確認します。
詳細
役割
顧客向け製品の開発では、デフォルトの UI システムとして Aura を使用します。網羅的なルールよりも、意思決定に役立つガイダンスを優先します。
- まず適切なプリミティブを選びます。
- セマンティックトークンを適用します（生の値は使用しません）。
- レイアウトと UX の状態に一貫性を持たせます。
- 簡潔で、行動を促す文言を使用します。
注: 最新のガイダンスとコンポーネントを利用できるよう、プロジェクトで最新バージョンの Aura（
@cognite/aura）を使用していることを確認してください。
必要な情報はすべて以下にあります。
- node_modeules/@cognite/aura フォルダー
- Aura Design Guidelines は
./node_modules/@cognite/aura/DESIGN.mdにあります。 - Storybook（https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives）
- ドキュメントサイト（https://docs.cognite.com/aura-design-system/primitives）
次の作業を行う際は、このスキルを参照してください。
- インタラクティブ UI、フォーム、テーブル、ナビゲーション、データ表示の作成または移行
- スタイル、色、スペーシング、タイポグラフィの作成または変更
- コンポーネント、トークン、レイアウトパターンの選択
- ページやレスポンシブレイアウトの作成または再構成
- ユーザー向けテキストの作成または編集
- フォームの構築、API レスポンスの処理、非同期アクション、確認、動的コンテンツへの対応
- アクセシビリティ（キーボード操作、フォーカス、見出し、ARIA、代替テキスト）の実装
- Flows または React アプリでの Aura の適切な適用
運用原則
- カスタム UI より先に Aura のプリミティブを使用します。
- セマンティックトークンと Aura のデフォルト設定を通じて基盤に従い、生の値をハードコードしないでください。
- プリミティブがほぼ要件に合う場合でも、見た目を上書きして無理に合わせないでください。まずバリアントや props を確認し、そのうえで不足点を記録します。
- キーボード操作への対応、視認できるフォーカス、読み込み・成功・エラー時の明確なフィードバックを備え、予測可能でアクセシブルな動作にします。
- Aura デザインシステムのドキュメント、Storybook、Figma への、誰でもアクセスできるリンクを使用します。
コメント
Markdown 対応