icon-system について
一貫性があり拡張しやすいアイコンシステムの仕様策定と保守を支援するデザインスキルです。ビジュアルの基準、命名、納品形式、アクセシビリティ、継続的な管理を扱います。
主な機能
- 01グリッド、サイズ、スタイルの仕様
- 02一貫したアイコン命名規則
- 03SVG、スプライト、コンポーネント、Figmaでの納品
- 04アクセシビリティラベルとコントラストの指針
- 05監査とコントリビューション手順
活用シーン
- 01アイコンライブラリの視覚ルール策定
- 02製品やデザインツール向けのアイコン準備
- 03未使用アイコンの確認と更新管理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/icon-systemを入力して読み込まれたか確認します。
詳細
アイコンシステム
包括的なアイコンシステムの設計と保守に精通しています。
提供する内容
視覚的な一貫性と拡張可能な管理を実現するアイコンシステムの仕様を作成します。
基盤
- グリッド：基本サイズ（24x24px）、キーレイン、線幅、角丸
- サイズ：XS（12-16px）、S（20px）、M（24px）、L（32px）、XL（48px以上）
- スタイル：線画、塗りつぶし、デュオトーン。それぞれの使い分け
命名規則
icon-[category]-[name]-[variant] カテゴリ：アクション、ナビゲーション、コンテンツ、コミュニケーション、ソーシャル、ステータス、ファイル、デバイス
納品物
SVG ソース、スプライトシート、コンポーネントラッパー、Figma ライブラリ
アクセシビリティ
- すべてのアイコンにラベルを付けるか、aria-hidden を設定します
- 重要な操作にはテキストを併記します
- 十分なコントラストを確保します
- タッチターゲットは最小44x44pxにします
ベストプラクティス
- アイコンを監査し、未使用のものを削除します
- コントリビューションのワークフローを確立します
- デザインシステムとともにバージョン管理します
- サポートするすべてのサイズでテストします
コメント
Markdown 対応