スキル ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

低リスク ⚙️ 外部コマンド📁 ファイルシステムへのアクセス🌐 ネットワークアクセス🔑 環境変数⚡ スクリプトを含む

デザイントークンの生成、使用状況の検証、ブランドスライドの作成

デザインシステムは、プリミティブ、セマンティック、コンポーネントの各レイヤーにわたってトークンが一貫して適用されないと、しばしば機能しなくなります。このスキルは、JSONトークン定義からCSS変数を生成し、コード内でのトークン使用状況を検証し、Chart.jsを統合したブランド準拠のスライドプレゼンテーションを作成します。

対応: Claude Codex Code(CC)

🥉 72 ブロンズ

スキルZIPをダウンロード

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

オンにして利用開始

テストする

「ckm:design-system」を使用しています。 tokens.jsonからCSSデザイントークンを生成し、Next.jsプロジェクト用のTailwind設定を作成してください。

期待される結果:

プリミティブ、セマンティックトークン、コンポーネントトークンを含む:rootブロックとして整理された3層トークン構造のCSS出力
tailwind.config.jsで使用するCSS変数を参照するカラーマッピング付きのTailwind設定ファイル

「ckm:design-system」を使用しています。フィンテックスタートアップ向けの5枚スライドのピッチデッキを作成してください。収益チャートを含めてください。

期待される結果:

タイトル、問題、カード付き解決策、収益成長棒グラフ、CTAスライドを含むブランドスライドデッキのHTMLファイル
すべての色、フォント、スペーシングにデザイントークンを参照してブランド準拠を保証するCSS

「ckm:design-system」を使用しています。 4つの製品ラインにわたる四半期ごとの収益成長を示すのに最適なチャートタイプを見つけてください。

期待される結果:

チャートの推奨：複数の製品ラインを四半期ごとに比較するためのグループ化棒グラフ
いつ使用すべきか、いつ避けるべきか、Chart.jsの実装メモに関する状況に応じたガイダンス

セキュリティ監査

低リスク

v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

スキャンされたファイル

4,805

解析された行数

検出結果

総監査数

低リスクの問題 (9)

data/slide-backgrounds.csv:7 data/slide-charts.csv:22-26 data/slide-copy.csv:2-26 SKILL.md:42-48

Hex color values in design token data flagged as cryptographic algorithms

FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.

references/component-specs.md:40-46 SKILL.md:54-61 references/token-architecture.md:7-18

Shell command examples in Markdown documentation

FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.

scripts/fetch-background.py:144-184

Hardcoded image URLs in fetch-background.py

FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.

scripts/slide-token-validator.py:30

subprocess.run delegation in slide-token-validator.py

TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.

scripts/generate-slide.py:632

Path traversal sequence in generate-slide.py

FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.

scripts/embed-tokens.cjs:86 scripts/generate-tokens.cjs:184

Standard filesystem operations in build and validation scripts

FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.

SKILL.md:190

Chart.js CDN URL in SKILL.md

FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.

scripts/search-slides.py:10

Dynamic import pattern in search-slides.py

FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.

multiple:1

Heuristic dangerous combination warning

FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

リスク要因

⚙️ 外部コマンド (201)

📁 ファイルシステムへのアクセス (17)

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 ネットワークアクセス (28)

🔑 環境変数 (7)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

⚡ スクリプトを含む (1)

scripts/search-slides.py:10-14

監査者: claude

品質スコア

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

セキュリティ

仕様準拠

作れるもの

デザインシステムを作成するフロントエンド開発者

フロントエンド開発者が新しいプロジェクト用に一貫したデザイントークンシステムを確立する必要があります。このスキルは、JSONトークン定義からCSS変数を生成し、コンポーネントがハードコードされた値ではなくトークンを使用していることを検証し、統合用のTailwind設定を生成します。

ブランドスライドを作成するデザイナー

デザイナーがブランドガイドラインに従ったピッチデッキを作成する必要があります。このスキルは、色、タイポグラフィ、スペーシングにデザイントークンを使用するHTMLスライドを生成します。Chart.jsによるチャートオプションとPexelsの厳選された背景画像も含まれます。

デザイントークンパイプラインを自動化するDevOpsエンジニア

DevOpsエンジニアがCIパイプラインで自動化されたトークン生成と検証を設定します。このスキルは、CSS生成、トークン使用ルールに対するコードベースの検証、スタンドアロンのHTMLファイルへのトークンの埋め込みのためのCLIスクリプトを提供します。

これらのプロンプトを試す

JSON設定からトークンを生成

tokens.jsonファイルから3層構造を使用してCSSデザイントークンを生成してください。プリミティブからセマンティック、コンポーネントへのパターンを使用してください。

コードベース内のトークン使用状況を検証

src/ディレクトリ内のハードコードされた16進数カラーとピクセル値を検証してください。すべての違反を報告し、代わりに使用すべきデザイントークンを提案してください。

チャート付きピッチデッキを作成

SaaS分析プラットフォーム用の8枚スライドの投資家用ピッチデッキを作成してください。タイトルスライド、問題スライド、機能グリッド付き解決策スライド、メトリクススライド、収益チャートスライド、推薦文スライド、比較表スライド、CTAクロージングスライドを含めてください。ブランドのデザイントークンを使用してください。

Duarteスパークライン手法を適用

Duarteスパークラインのナラティブ構造を使用して9枚のスライドデッキを作成してください。「現状」（フラストレーション）と「未来」（希望）のビートを交互に配置してください。3番目と6番目の位置でパターンブレイクを使用してください。「投資家ピッチ」のスライド戦略を検索し、各スライドに最適なレイアウトを推奨してください。

ベストプラクティス

最大限の柔軟性とテーマ切り替えを実現するには、まずプリミティブトークンを生の値で定義し、次にセマンティックトークンにマッピングし、最後にコンポーネント固有のトークンにマッピングします。
生成されたHTMLスライドは、共有する前に必ずトークンバリデーターで検証し、ハードコードされた色やフォントがないか確認します。
スライド位置と感情パラメータを使用したコンテキスト検索を活用して、パターンブレイクと感情的なコントラストを持つデッキを作成し、より良いオーディエンスエンゲージメントを実現します。

回避

コンポーネントのCSSファイルで生の16進数カラーを使用しないでください。テーマの一貫性のために、常にvar()を通じてデザイントークンを参照してください。
design-tokens.cssファイルをインポートせずにスライドを作成しないでください。すべてのビジュアルプロパティはトークン変数を使用する必要があります。
セマンティックトークンレイヤーをスキップしないでください。コンポーネントをプリミティブに直接マッピングすると、テーマの切り替えとメンテナンスが困難になります。

よくある質問

デザイントークンのJSONはどのようなファイル形式に従う必要がありますか？

JSONは3層構造に従う必要があります：プリミティブ（生の色、スペーシング、タイポグラフィ値）、セマンティック（--color-primaryなどの目的ベースのエイリアス）、コンポーネント（--button-bgなどのコンポーネント固有のトークン）です。各トークンは$値と$タイプのフィールドを持ちます。

このスキルはPowerPointやGoogle Slidesファイルを生成できますか？

いいえ。このスキルは埋め込みCSSデザイントークンを使用したHTMLスライドを生成します。出力は自己完結型のHTMLファイルで、任意のブラウザで開くことができますが、PowerPointやGoogle Slidesに直接インポートすることはできません。

スライドに新しい背景画像を追加するにはどうすればよいですか？

背景画像は、スライドタイプ（ヒーロー、チーム、推薦文など）ごとに整理されたPexelsの無料写真の厳選セットから選択されます。scripts/fetch-background.pyのCURATED_IMAGESディクショナリに追加のPexels画像URLを追加することで拡張できます。

トークンバリデーターは何をチェックしますか？

バリデーターはCSS、JSX、TSX、その他のソースファイルをスキャンし、ハードコードされた16進数カラー、RGBカラー、ピクセル値、rem値を探します。それらをデザイントークンへのvar()参照に置き換えることを提案します。トークン定義ファイルと一般的な例外はスキップします。

デザイントークンからTailwindテーマを作成するにはどうすればよいですか？

generate-tokens.cjsスクリプトに--format tailwindフラグを付けて使用します。これにより、セマンティックカラートークンをCSS変数参照を使用してTailwindの色名にマッピングするカラー設定オブジェクトが生成されます。

スライド生成はアニメーションをサポートしていますか？

はい。スライドシステムには、animate-fade-up、animate-stagger、animate-scale、animate-chart、animate-count、animate-pulseなどのCSSアニメーションクラスが含まれています。コンテキスト検索は、スライドの目標と感情に基づいてアニメーションクラスを推奨します。