スキル ckm-design-system

📦

ckm-design-system

Name: ckm-design-system
Author: nextlevelbuilder

v1.0.0 コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド📁 ファイルシステムへのアクセス🌐 ネットワークアクセス🔑 環境変数⚡ スクリプトを含む

トークン駆動のデザインシステムを構築

トークン、コンポーネント、プレゼンテーションアセットを別々に扱うと、デザインシステムはずれていきます。このスキルは、一貫した実装のためのトークンアーキテクチャ、バリデーター、スライドヘルパーを提供します。

対応: Claude Codex Code(CC)

⚠️ 50 不十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "ckm-design-system" from https://skillstore.io/skills/nextlevelbuilder-ckm-design-system.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/nextlevelbuilder-ckm-design-system.md 署名済み manifest GET /api/skills/nextlevelbuilder-ckm-design-system/manifest 署名済み lockfile GET /api/skills/nextlevelbuilder-ckm-design-system/lockfile

テストする

「ckm-design-system」を使用しています。ダッシュボード製品向けのトークン計画を依頼する。

期待される結果:

生の値、セマンティックエイリアス、コンポーネント固有トークンをカバーする3層のトークンマップ。
色、タイポグラフィ、余白、影、インタラクション状態に関する推奨命名ルール。

「ckm-design-system」を使用しています。フロントエンドフォルダのトークン準拠レビューを依頼する。

期待される結果:

ハードコードされた色、ピクセル値、rem値を一覧化したローカル監査サマリー。
色、余白、角丸、タイポグラフィのトークンファミリーを使用した推奨置換。

「ckm-design-system」を使用しています。ブランド付きプレゼンテーション計画を依頼する。

期待される結果:

推奨レイアウト、コピーの型、チャートタイプ、感情の流れを含むスライドごとの構成。
トークン準拠のスライドスタイリングと背景画像選定のためのガイダンス。

セキュリティ監査

中リスク

v4 • 2026/7/5 バージョン別レポートを開く

Most static findings are false positives from Markdown code fences, JavaScript template literals, CSV design vocabulary, dictionary key access, and fixed public resource URLs. Confirmed issues are local filesystem write/read risks in the token generator plus semantic risks in slide generation: unescaped HTML content and unrestricted output paths. No prompt-injection attempt was found in the reviewed skill files.

スキャンされたファイル

4,805

解析済み行数

レビュー項目

誤検知を無視

確認済みのセキュリティ上の懸念 (2)

中

scripts/generate-slide.py:415-420 scripts/generate-slide.py:737-745

Unescaped Slide Content In Generated HTML

Slide fields from input data are inserted directly into HTML templates. Untrusted JSON can inject HTML or scripts into generated decks opened in a browser.

The generator reads slide JSON and interpolates values such as title, subtitle, and CTA text directly into HTML strings. I did not see escaping or sanitization before write_text emits the deck.

中

scripts/generate-slide.py:743-745

Unrestricted Slide Output Path

The slide generator accepts --output as a path and writes to it without restricting the destination. Prompt-controlled arguments could overwrite writable files outside the intended slide directory.

args.output is converted directly to a Path, its parent directory is created, and HTML is written there. The risk depends on invocation context, so confidence is high but not absolute.

機能レビュー項目 (6)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

中

scripts/generate-tokens.cjs:184

Node.js fs operations

const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));

The token generator reads a user-supplied config path with no workspace restriction. This is expected CLI behavior, but it can read arbitrary accessible JSON files when invoked with unsafe arguments.

中

scripts/generate-tokens.cjs:197

Node.js fs operations

fs.mkdirSync(path.dirname(outputPath), { recursive: true });

The --output argument is resolved directly and its parent directory is created recursively. Without output path restrictions, a prompt-controlled invocation could create directories outside the intended project area.

中

scripts/generate-tokens.cjs:198

Node.js fs operations

fs.writeFileSync(outputPath, output);

The script writes generated content to a user-supplied output path without restricting it to a known output directory. This can overwrite arbitrary writable files if invoked with unsafe arguments.

中

scripts/generate-tokens.cjs:178

Node.js fs stat operations

if (!fs.existsSync(configPath)) {

The script resolves the --config value from process.cwd() and checks that path without constraining it to the project. This is user-directed, but it still allows probing arbitrary accessible paths if unsafe arguments are supplied.

中

scripts/generate-tokens.cjs:184

Synchronous file operations

const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));

The same user-supplied config path is read synchronously and is not limited to a safe directory. The risk is local file exposure through misuse rather than hidden exfiltration.

中

scripts/generate-tokens.cjs:198

Synchronous file operations

fs.writeFileSync(outputPath, output);

The synchronous write uses the unrestricted --output path. The issue is not command execution, but unintended local file overwrite when arguments are not trusted.

リスク要因

⚙️ 外部コマンド (76)

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

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 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)

🔑 環境変数 (6)

scripts/fetch-background.py:208 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

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/nextlevelbuilder-ckm-design-system/security.svg)](https://skillstore.io/skills/nextlevelbuilder-ckm-design-system?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

nextlevelbuilder. (2026). ckm-design-system security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4

BibTeX形式の引用

@techreport{nextlevelbuilder-nextlevelbuilder-ckm-design-system-2026,
  author = {nextlevelbuilder},
  title = {ckm-design-system security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-design-system security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
  - name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4"
identifiers:
  - type: other
    value: "skillstore:nextlevelbuilder-ckm-design-system:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

トークンアーキテクチャを作成

チームがテーマ、状態、バリアントを実装する前に、プリミティブ、セマンティック、コンポーネントトークンを定義します。

トークン準拠を監査

デザイントークンを使用すべきハードコード値を見つけるために、ローカルのソースファイルとHTMLアセットをスキャンします。

ブランド付きプレゼンテーションを計画

一貫したプレゼンテーションデッキを計画するために、スライド戦略、レイアウト、コピー、チャート、背景のリファレンスを使用します。

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

トークンシステムを始める

ckm-design-systemを使用して、SaaSダッシュボード向けのプリミティブ、セマンティック、コンポーネントトークンの概要を作成してください。色、タイポグラフィ、余白、角丸、状態トークンを含めてください。

既存UIを検証

ckm-design-systemを使用して、ハードコードされたデザイン値がないかmy srcディレクトリをレビューしてください。違反を要約し、対応するトークンカテゴリを提案してください。

トークン出力を生成

ckm-design-systemを使用して、私のトークンJSONをCSS変数とTailwindカラー拡張に変換してください。出力はプロジェクトのassetsディレクトリ内に保持してください。

ピッチデッキシステムを設計

ckm-design-systemを使用して、戦略、レイアウト、タイポグラフィ、カラー処理、チャート選択、トークン準拠のHTML出力を含む10枚の投資家向けデッキを計画してください。

ベストプラクティス

プリミティブ値をセマンティックエイリアスやコンポーネントトークンと分離して管理します。
生成された出力をレビューまたは共有する前に、信頼できるプロジェクトフォルダでバリデーターを実行します。
生成されたスライドとトークンファイルを予測しやすいアセットディレクトリに保持します。

回避

生成に使用するスライドデータへ、信頼できないHTMLやスクリプトを貼り付けないでください。
絶対パスや親ディレクトリへのトラバーサルを使って、ファイル書き込みヘルパーを実行しないでください。
本番コンポーネント内で、生のhex値とトークン参照を混在させないでください。

よくある質問

このスキルで完全なデザインシステムを作成できますか？

トークンアーキテクチャ、例、バリデーター、生成ヘルパーを提供できます。ただし、製品固有のデザイン判断とレビューは引き続き必要です。

Tailwindをサポートしていますか？

はい。トークンジェネレーターは、セマンティックトークン値からTailwindカラー設定を生成できます。

コードを自動的に検証できますか？

ソースファイルとHTMLアセット向けのローカルバリデーターが含まれています。変更を加える前に結果をレビューしてください。

スライドデッキを生成できますか？

はい。構造化されたスライドデータとトークンベースのテンプレートからHTMLスライドデッキを生成できます。

ネットワークアクセスは必要ですか？

ほとんどのツールはローカルで動作します。生成されたスライドやサンプルは、Google Fonts、Pexels画像、Chart.js CDNリソースを参照する場合があります。

信頼できないコンテンツに対して安全ですか？

信頼できないスライドデータは慎重に扱ってください。スライドジェネレーターはテキストをHTMLに挿入するため、共有前にサニタイズする必要があります。

開発者情報

作成者

nextlevelbuilder

ライセンス

MIT

作者バージョン

v1.0.0

Skillstore リビジョン

リポジトリ

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design-system/

参照

62e2a730c5cd74eab4c7164309d810de660fcea3

メンテナンスの新しさ

2026/7/21

利用状況

7 ダウンロード · 15 閲覧

ファイル構成

📁 data/

📄 slide-backgrounds.csv

📄 slide-charts.csv

📄 slide-color-logic.csv

📄 slide-copy.csv

📄 slide-layout-logic.csv

📄 slide-layouts.csv

📄 slide-strategies.csv

📄 slide-typography.csv

📁 references/

📄 component-specs.md

📄 component-tokens.md

📄 primitive-tokens.md

📄 semantic-tokens.md

📄 states-and-variants.md

📄 tailwind-integration.md

📄 token-architecture.md

📁 scripts/

📄 embed-tokens.cjs

📄 fetch-background.py

📄 generate-slide.py

📄 generate-tokens.cjs

📄 html-token-validator.py

📄 search-slides.py

📄 slide_search_core.py

📄 slide-token-validator.py

📄 validate-tokens.cjs

📁 templates/

📄 design-tokens-starter.json

📄 SKILL.md