naming-convention について
デザインシステムのアセット、コンポーネント、トークン、ファイル、コードに一貫した命名規則を定めるスキルです。再利用できるパターンとレビュー方法を示し、検索性と拡張性を保つチームを支援します。
主な機能
- 01コンポーネントとトークンの命名パターン
- 02ファイルとデザインアセットの規則
- 03CSS と React の命名ガイド
- 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 対応