使い方ガイドへスキップ
slides作者 nextlevelbuilder

Slides スキル。

Claude Code と Codex 向けの PPT・スライドデッキ用スキル:Chart.js、デザイントークン、レスポンシブレイアウトを用いた戦略的な HTML プレゼンテーションです。

  • Presentations
  • HTML slides
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/slides/SKILL.mdSKILL.md
--- name: slides description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. --- ## When to Use ## Subcommands ## Script Paths ## References (Knowledge Base) ## Routing
アップストリームファイルから2026年9月14日に読み取られたフロントマターとセクション見出し · 全1,718文字

01 できること

Claude Code と Codex における slides スキルの動作

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、Chart.js によるデータ可視化、デザイントークン、レスポンシブレイアウトを備えた戦略的な HTML プレゼンテーションを作成します。マーケティングプレゼンテーション、ピッチデック、データドリブンなスライドに、コピーライティングの定式とコンテキストに応じたスライド戦略を適用します。

このスキルは create サブコマンドを経由して処理を振り分け、レイアウトパターン、HTML テンプレート、コピーライティングの定式、スライド戦略の知識ベースを提供します。スクリプトはスキルディレクトリを基準に動作しますが、docs/brand-guidelines.md、assets/design-tokens.json、src/ などのプロジェクトファイルはプロジェクトルートを基準に読み書きします。

生成されるもの

  • HTML テンプレート、Chart.js による可視化、コピーライティングの定式を適用した戦略的なプレゼンテーションスライド
プロンプト例を見る ↗

仕組み

  1. 01
    サブコマンドを解析する

    このスキルは、実行するサブコマンドを判断するために、引数の最初の単語を抽出します。

  2. 02
    参照ファイルを読み込む

    このスキルは、references ディレクトリからサブコマンドに対応する Markdown ファイルを読み込みます。

  3. 03
    残りの引数で実行する

    このスキルは、サブコマンドに続く引数を使って、読み込んだ参照内の指示を実行します。

02 適合性を確認

slides skill を使用するタイミング

Claude Code または Codex で、この種の PPT やスライドデッキの作業を行う際に slides skill を使用します。以下の適合性と制限事項は、スキル自体のファイルから引用しています。

適している場合

  • マーケティングプレゼンテーションとピッチデッキ
  • Chart.js によるデータドリブンスライド
  • レイアウトパターンを用いた戦略的スライドデザイン
  • コピーライティングに最適化されたプレゼンテーションコンテンツ

境界を知る

  • Chart.js が必要ですSKILL.md にこの依存関係が記載されています。プロジェクトに Chart.js がない場合、このスキルは機能しません。

提供すべきもの

  • 必要なものChart.js — SKILL.md に必須として記載されています。

03 スキルの内部

slides スキルが Claude Code と Codex に与えるルール

SKILL.mdがエージェントに設定する3つの具体的な指示、デフォルト値、制限事項——結果を変える部分です。

  1. スクリプトパスの解決

    このスキルおよびその参照内のスクリプトパスは、プロジェクトルートではなく SKILL.md を含むディレクトリを基準とした相対パスです。作業ディレクトリはプロジェクトルートのままです。

  2. プロジェクトファイルへのアクセス

    スクリプトは、docs/brand-guidelines.md、assets/design-tokens.json、src/ などのプロジェクトファイルを、プロジェクトルートの作業ディレクトリを基準に読み書きします。

  3. スキルディレクトリのベース

    作業ディレクトリをプロジェクトルートに保ちながら、スキルの読み込み時に Claude Code が報告するスキルのベースディレクトリから完全なパスを構築してください。

04 実際に使う

Claude Code または Codex に slides をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに slides を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

.claude/skills/slides/SKILL.md 用の汎用的な skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに初めての PPT・スライドデッキタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Create a 12-slide pitch deck on [product launch strategy] with data visualizations for [market growth projections] and [competitive positioning]. Apply layout patterns for visual hierarchy and use copywriting formulas to strengthen the value proposition on key slides.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • references/layout-patterns.md のレイアウトパターンが、スライド全体で一貫して適用されていることを確認する
  • references/copywriting-formulas.md のコピーライティングの定式が、プレゼンテーションのコンテンツで使用されていることを確認する
  • references/slide-strategies.md のスライド戦略が、プレゼンテーションのコンテキストに合っていることを確認する
  • assets/design-tokens.json のデザイントークンが正しく適用されていることを検証する
  • 異なるビューポートサイズでレスポンシブレイアウトをテストする

OpenDesign では slides が同梱されています。上部バーのPlugins → Skillsから選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

スキルファイル
.claude/skills/slides/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 7f69fed
License
MIT LICENSE より
リポジトリスター数
127,450 nextlevelbuilder/ui-ux-pro-max-skill リポジトリ全体の GitHub スナップショット(2026-09-14 取得)。このカタログには 7 つのスキルが含まれています。slides の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱(2026-08-28 確認)。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. 使用場面マーケティングプレゼンテーション、データドリブンなスライド、戦略的デザイン、コピーライティングに最適化されたコンテンツなどのユースケースを記載しています
  2. サブコマンド戦略的なプレゼンテーションスライドを生成するcreateサブコマンドについて説明しています
  3. スクリプトパスプロジェクトルートから作業しつつ、スキルディレクトリを基準としたスクリプトパスの解決方法を説明しています
  4. 参照資料(ナレッジベース)レイアウトパターン、HTMLテンプレート、コピーライティングの公式、スライド戦略に関する参照ファイルを記載しています
  5. ルーティングサブコマンドの解析、参照ファイルの読み込み、残りの引数での実行という3段階のプロセスを説明しています
スキル自身による説明
「Chart.js、デザイントークン、レスポンシブレイアウト、コピーライティングの公式、コンテキスト別のスライド戦略を使用して、戦略的な HTML プレゼンテーションを作成します。」

SKILL.md のフロントマター説明。完全なファイルは約 1,718 文字です。GitHub で完全なファイルを読む。

Slides

実際の PPT とスライドデッキタスクで slides を実行します。

slides スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

ターミナル
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides