mcpField
P
presentation-styling

presentation-styling

github.com/shanraisshanデザイン・UI68.3k203 回インストール今日更新
リポジトリ

presentation-styling について

`presentation/index.html`のスライドを編集するためのスタイリングスキルです。レイアウト、コンテンツブロック、リスト、タグ、コード例向けのCSSクラスとHTMLパターンをまとめています。

主な機能

  1. 012カラムとカードのレイアウト
  2. 02プロンプト・警告・コードブロック
  3. 03リストとタグのスタイル
  4. 04コードの構文色分けクラス
  5. 05スライド形式のパターン

活用シーン

  1. 012カラムの比較を配置
  2. 02コード例や注記を表示
  3. 03アイコン付きリストとタグを作成
  4. 04プレゼンテーションスライドを編集

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill presentation-styling

インストール後、Claude Code で/presentation-stylingを入力して読み込まれたか確認します。

詳細

プレゼンテーションスタイリングスキル

presentation/index.html で使用されている CSS クラスと HTML パターンです。

CSS コンポーネントクラス

レイアウト
  • .two-col — 24px の間隔がある 2 列グリッドレイアウト
  • .info-grid — 情報カード用の 2 列グリッド
  • .col-card — 列内のカード（緑の枠線を付けるには .good、赤の枠線を付けるには .bad を追加します）
  • .info-card — 情報グリッド内のカード
コンテンツブロック
  • .trigger-box — 左側に濃い色のボーダーがあるグレーのボックス（主要な概念や前提条件用）
  • .how-to-trigger — 緑のボーダーがある緑色のボックス（「試してみましょう」のアクション用）
  • .warning-box — 警告用ボーダーがあるオレンジ色のボックス（重要な警告用）
  • .code-block — 等幅フォントを使った暗色のコード表示ブロック
リスト
  • .use-cases — アイコンとテキストのリスト項目をまとめるコンテナー
  • .use-case-item — アイコンとテキストを含む個別の項目
  • .feature-list — シンプルな枠線付きリスト
タグとバッジ
  • .matcher-tag — グレーのインラインピルタグ
  • .weight-badge — 緑色のピルバッジ（重み付けされたスライドに JS が自動挿入します）

コードブロックの構文ハイライト

.code-block 内では、構文の色付けに次の span を使用します。

<div class="code-block">
<span class="comment"># This is a comment</span>
<span class="key">field_name</span>: <span class="string">value</span>
<span class="cmd">&gt;</span> command to run
</div>
  • .comment — コメント用の緑色（#6a9955）
  • .key — プロパティ名／キー用の青色（#9cdcfe）
  • .string — 文字列値用のオレンジ色（#ce9178）
  • .cmd — コマンド／プロンプト用の黄色（#dcdcaa）

スライドタイプのパターン

2 列構成のコンテンツスライド（良い例と悪い例）
<div class="slide" data-slide="N" data-weight="5">
    <h1>Title</h1>
    <div class="two-col">
        <div class="col-card bad">
            <h4>Before (Vibe Coding)</h4>
            
        </div>
        <div class="col-card good">
            <h4>After (Agentic)</h4>
            
        </div>
    </div>
</div>

スライド HTML に <span class="weight-badge"> をハードコードしないでください。プレゼンテーションの JavaScript が重みバッジを自動的に挿入、削除します。

コード例を含むコンテンツスライド
<div class="slide" data-slide="N">
    <h1>Title</h1>
    <div class="trigger-box">
        <h4>Key Concept</h4>
        <p>Description</p>
    </div>
    <div class="code-block"><span class="comment"># Example</span>
<span class="key">field</span>: <span class="string">value</span></div>
</div>
アイコンリストのパターン
<div class="use-cases">
    <div class="use-case-item">
        <span class="use-case-icon">EMOJI</span>
        <div class="use-case-text">
            <strong>Title</strong>
            <span>Description text</span>
        </div>
    </div>
</div>

Journey Bar 固有の仕様

  • .journey-bar — 進捗バーの下に固定されるバー
  • .journey-bar.hidden — タイトルスライドでは非表示
  • Journey Bar の色は HSL 補間により、赤（0%）から緑（100%）へ変化します
  • 重みバッジは、重み付けされたスライドの h1 要素に JS が自動挿入します

コメント

Markdown 対応