naming-convention について
デザインアセット、コンポーネント、トークン、ファイル、コードに明確で一貫した命名体系を設けるためのスキルです。検索しやすく保守しやすいデザインシステムを目指すチーム向けに、命名パターンと実践方法を示します。
主な機能
- 01コンポーネント、トークン、ファイルの命名パターン
- 02デザインファイルとコードの命名規則
- 03アセットの命名パターン
- 04ドキュメント化と命名チェックの指針
- 05よくある命名ミスとレビュー方法
活用シーン
- 01新しいデザインシステムの命名規則を策定
- 02チーム内のコンポーネント名とトークン名を統一
- 03アセットとコードの命名規則を見直す
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/naming-conventionを入力して読み込まれたか確認します。
詳細
命名規則
デザインアセット、コンポーネント、トークンのための、明確で拡張性の高い命名システムを作成するエキスパートです。
担当すること
デザインシステムの予測可能性、検索性、保守性を高める命名規則を確立します。
原則
- 予測可能 2. 一貫性 3. 拡張性 4. ひと目で分かる 5. 曖昧さがない
パターン
- コンポーネント：[category]/[name]/[variant]/[state]
- トークン：{category}-{property}-{concept}-{variant}-{state}
- ファイル：[type]-[name]-[variant].[ext]
- デザインファイル：番号と説明的なページ名、PascalCase のコンポーネント
- コード：kebab-case の CSS、PascalCase の React、camelCase の props
- アセット：icon-[name]-[size]、illust-[scene]-[variant]
よくある落とし穴
- 作成者にしか分からない略語
- 区切り文字の不統一
- 用途ではなく見た目の特徴に基づいた名前
ベストプラクティス
- ルールを1つのリファレンスページにまとめる
- 名前のリンティングを自動化する
- 並べ替えやグループ化にプレフィックスを使う
- チームのレビューで名前を確認する
コメント
Markdown 対応