icon-system について
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 対応