スキル自身の言葉で
3層のデザイントークンアーキテクチャ(primitive → semantic → component)、コンポーネント仕様、ブランド準拠のプレゼンテーションスライドを生成します。プリミティブトークンは--color-blue-600のような生の値を定義します。セマンティックトークンは用途によってそれらをエイリアス化します(--color-primary)。コンポーネントトークンはコンポーネント単位の使用法を指定します(--button-bg)。
このスキルは、CSS変数、Tailwindテーマ統合の生成・検証スクリプトと、15種類のデッキ構造、25種類のレイアウト、Duarteのスパークライン感情アークにわたるBM25検索を使用したコンテクスチュアルなスライドシステムを提供します。すべてのスライドはdesign-tokens.cssをインポートし、CSS変数のみを使用する必要があります。データ可視化にはChart.jsが必須です。PexelsとUnsplashからの画像取得をサポートします。
生成されるもの
- ソースコード内でトークンを参照すべきハードコードされた値を特定するトークン検証レポート
仕組み
- 01トークンアーキテクチャリファレンスの読み込み
このスキルは、トークンの生成や検証を行う前に、references/token-architecture.mdを読み込んで3層のトークン構造を確立します。
- 02JSON設定からCSSを生成
generate-tokens.cjsをJSON設定ファイルと共に実行し、3層のトークン構造をCSS変数として出力するCSSファイルを生成します。
- 03目標別にスライド戦略を検索する
search-slides.pyによるBM25検索を使用して、slide-strategies.csvから一致するデック構造、エモーションアーク、スパークラインビートを検索します。必要に応じてドメイン（コピーまたはチャート）と文脈上の位置でフィルタリングできます。
- 04文脈に応じた意思決定フローを適用する
目標を解析し、レイアウトとbreak_patternフラグについてslide-layout-logic.csvを、タイプスケールについてslide-typography.csvを、カラー処理についてslide-color-logic.csvを、画像カテゴリについてslide-backgrounds.csvを照会します。
- 05デザイントークンでHTMLを生成する
assets/design-tokens.cssをインポートし、すべてのスタイリングにvar()を使用し、チャート用にChart.jsを含み、slide-animations.cssからナビゲーションとアニメーションのクラスを追加するスライドHTMLを作成します。
- 06トークン準拠を検証する
slide-token-validator.pyを実行して、生成されたスライドHTMLがCSS変数のみを使用し、ハードコードされた色、フォント、間隔の値を含まないことを確認します。