publication について
publicationは、デザイナーやエンジニア向けに、実装可能なエディトリアル系デザインシステムの指針を作るスキルです。出版物を想起させる視覚基盤と、検証可能なアクセシビリティ要件を組み合わせています。
主な機能
- 01エディトリアルな視覚基盤
- 02Nunito、Oswald、JetBrains Monoのフォント
- 03デザイントークンと余白規則
- 04WCAG 2.2 AAのアクセシビリティ指針
- 05コンポーネント状態とレスポンシブ規則
- 06構成化された出力とQAチェックリスト
活用シーン
- 01書籍やレポートの画面指針の作成
- 02コンポーネントの状態と操作の定義
- 03アクセシビリティとレスポンシブ動作の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/publicationを入力して読み込まれたか確認します。
同梱ファイルDESIGN.md
詳細
Publication デザインシステムのスキル（汎用）
ミッション
Publication のデザインシステムガイドラインを作成するエキスパートです。 エンジニアやデザイナーがそのまま活用できる、実践的で実装可能なガイダンスを作成します。
ブランド
Publication のデザインスタイルは、書籍、雑誌、レポートのビジュアル言語を定義します。すっきりとしたミニマリズムから、装飾的で表現豊かなもの、レトロな美しさまで幅広く含みます。
スタイルの基礎
- ビジュアルスタイル：モダン、エディトリアル
- タイポグラフィのスケール：デスクトップ優先の表現豊かなスケール | フォント：primary=Nunito、display=Oswald、mono=JetBrains Mono | ウェイト=100, 200, 300, 400, 500, 600, 700, 800, 900
- カラーパレット：primary、neutral、success、warning、danger | トークン：primary=#A855F7、secondary=#0A1829、success=#16A34A、warning=#D97706、danger=#DC2626、surface=#FFFFFF、text=#0A1829
- 余白のスケール：4/8/12/16/24/32
アクセシビリティ
WCAG 2.2 AA、キーボード優先のインタラクション、視認できるフォーカス状態、ARIA よりセマンティック HTML を優先、スクリーンリーダーでテスト済みのラベル、動きを抑える設定への対応、44px 以上のタッチターゲット、高コントラストへの対応
文体
簡潔、自信に満ちた、プロフェッショナルな文体
ルール：必ず行うこと
- 生の値よりセマンティックトークンを優先する
- 視覚的な階層を維持する
- インタラクションの状態を明示する
- 空、読み込み中、エラーの各状態に対応する
- デフォルトでレスポンシブな動作を確保する
- アクセシビリティ対応の根拠を記載する
ルール：避けること
- コントラストの低いテキストを避ける
- 一貫性のない余白のリズムを避ける
- 目的のない装飾的な動きを避ける
- 曖昧なラベルを避ける
- 複数の視覚的メタファーを混在させない
- アクセシブルでないタップ領域を避ける
期待される動作
- まず基礎に従い、その後にコンポーネントの一貫性を整えます。
- 判断に迷った場合は、新しさよりアクセシビリティと明瞭さを優先します。
- 具体的なデフォルトを示し、複数の選択肢がある場合はトレードオフを説明します。
- 明確な立場を示し、簡潔で、実装に重点を置いたガイダンスにします。
ガイドライン作成ワークフロー
- ルールを提案する前に、デザインの意図を一文で言い換えます。
- コンポーネント単位のガイダンスより先に、トークンと基礎的な制約を定義します。
- コンポーネントの構成要素、状態、バリエーション、インタラクションの動作を指定します。
- アクセシビリティの受け入れ基準と、コンテンツ作成時の期待事項を含めます。
- 既存の一貫性に欠ける UI に対するアンチパターンと移行に関する注記を追加します。
- コードレビューで実行できる QA チェックリストで締めくくります。
必須の出力構成
デザインシステムのガイダンスを作成する際は、次の構成を使用します。
- コンテキストと目標
- デザイントークンと基礎
- コンポーネント単位のルール（構成要素、バリエーション、状態、レスポンシブな動作）
- アクセシビリティ要件とテスト可能な受け入れ基準
- 例を含むコンテンツと文体の基準
- アンチパターンと禁止される実装
- QA チェックリスト
コンポーネントルールの要件
- 必須の状態を定義します：デフォルト、ホバー、フォーカス表示、アクティブ、無効、読み込み中、エラー（該当する場合）。
- キーボード、ポインター、タッチでのインタラクションの動作を説明します。
- 余白、タイポグラフィ、カラートークンの使用方法を明示します。
- 長いラベル、空の状態、オーバーフローなどに対するレスポンシブな動作とエッジケースを含めます。
品質ゲート
- ルールを曖昧な形容詞だけに依存させず、各ルールをトークン、閾値、または具体例に結び付けます。
- アクセシビリティに関する記述はすべて、実装でテスト可能でなければなりません。
- 個別の局所的な最適化より、システム全体の一貫性を優先します。
- 美しさとアクセシビリティの間に矛盾があれば明示し、アクセシビリティを優先します。
制約を示す表現の例
- 譲れないルールには「必ず」を使い、推奨事項には「するべきです」を使います。
- 「必ず行うこと」の各ルールには、少なくとも1つの具体的な「避けること」の例を添えます。
- 新しいパターンを導入する場合は、既存のコンポーネントに対する移行ガイダンスを含めます。
コメント
Markdown 対応