jpoindexter/theft-kit

ヒーロー、機能、社会的証明、価格表、CTAを備えた単一ページSaaSランディング。アクティブなDESIGN.mdのカラー/タイポグラフィ/レイアウトトークンを尊重します。トリガーキーワード：「saas landing」「marketing page」「product landing」。

theft-kit とは？

このスキルは、SaaS製品向けの単一ページランディングページを生成するために設計されています。エージェントは、プロジェクトルートにあるDESIGN.mdファイルからカラーパレット、タイポグラフィトークン、レイアウトルールを読み取り、それに厳密に従って、ヒーロー、機能タイル、社会的証明（オプション）、価格表（オプション）、フッターCTA、フッターを含む完全なHTMLファイルを生成します。このスキルは、Claude CodeやCodexなどのAIエージェントプラットフォームで使用することを想定しており、エージェントが自己完結型のindex.htmlを出力するための明確なステップバイステップのワークフローを提供します。各編集可能要素は`data-od-id`属性でタグ付けされ、ホストアプリケーションのコメントモードとの互換性を確保します。また、エージェントが意味のあるプレースホルダーコンテンツを生成し、カラー参照がDESIGN.mdからのみ取得され、アクセントカラーが2回までしか使用されないことを確認する自己チェックも行います。

対応✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/jpoindexter/theft-kit/tree/HEAD/saas-landing

ドキュメント

SaaSランディングスキル

単一ページのSaaSランディングを生成します。エージェントは、このワークフローに正確に従ってください。

1. コンテキストを読む

何かを書き始める前に:

カレントワーキングディレクトリのDESIGN.mdを読んでください。存在しない場合は停止し、作成を依頼してください。
カラーパレット、タイポグラフィトークン、レイアウトの原則を特定してください。
「Agent Prompt Guide」セクションに注意してください。これは、ここでの指示と競合する場合、そちらが優先されます。

2. セクションを計画する

必須セクション（順番通り）:

ヒーロー — ロゴまたはワードマーク、見出し（タグライン入力）、サブ見出し（1～2文）、プライマリCTA、セカンダリCTA。垂直パディング（px）にはhero_densityパラメータを使用します。
機能 — 3～6個の機能タイル。各タイル: アイコン、短いタイトル、1～2文の説明。
社会的証明 — proof_count個のロゴまたは推薦文。0の場合はこのセクションをスキップします。
価格 — 2～3段階。has_pricingがtrueの場合のみ含めます。
フッターCTA — アクセントカラーの大きなバンドに1ボタンのコールトゥアクション。
フッター — 最小限: リンクと著作権表示。

3. デザインシステムを適用する

すべての色はDESIGN.mdのトークンから取得する必要があります。16進数値を独自に作成しないでください。
タイポグラフィ: 見出しには宣言された表示用フォントを、それ以外には本文用フォントを使用します。
レイアウト: グリッド、最大幅、セクション間隔のルールを尊重します。
コンポーネント: 宣言されたボタン/カード/入力パターンを使用します。DESIGN.mdの「Depth & Elevation」が最小限としている場合、シャドウを追加しないでください。
アクセント: アクセントカラーは、ヒーローで1回、フッターCTAで1回、そしてすべてのリンクにのみ使用します。ページに多用しないでください。

4. ファイルを書く

単一の自己完結型index.htmlを出力します:

すべてのCSSは<head>内の<style>ブロックにインライン化します。
DESIGN.mdのフォントがGoogle Fontsなどから読み込めない場合のシステムフォントフォールバックを含めます。
外部JSは使用しません。
セマンティックHTML（<header>、<main>、<section>、<footer>）を使用します。
各編集可能要素にdata-od-id="<ユニークスラッグ>"のタグを付け、ホストアプリのコメントモードがそれをターゲットにできるようにします。

5. セルフチェック

終了する前に、以下を確認してください:

すべてのテキストは意味のあるコンテンツであり、ダミーテキストではない（product_nameとtagline入力を使用し、残りは具体的で妥当なコピーを生成する）。
壊れたカラー参照がない（すべてのCSSカラー値はDESIGN.mdのパレット、または有効なアルファ/フォールバックバリアントにある）。
レスポンシブブレークポイントがDESIGN.mdの「Responsive Behavior」セクションと一致している。
ページが1440w、768w、375wで適切に見える（頭の中でシミュレーション）。
アクセントカラーが合計で2回以上使用されていない。

6. 完了

index.htmlのみを書き出してください。別のCSSファイル、JSファイル、またはREADMEを生成しないでください。

これを参考に読んでいるスキル作成者の方へ

これは最小限ですが完全なスキルです。構造:

saas-landing-skill/
├── SKILL.md    ← 現在地
└── assets/
    └── base.html    （オプションのスターターテンプレート; このスキルは使用しません）

注意点:

od:フロントマターブロックはClaude-Codeのみの互換性にはオプションですが、追加することでODの型付き入力、スライダー、プレビューメタデータ、機能ゲーティングが有効になります。
フロントマター以下のワークフローは、エージェントがシステムプロンプトとして読み取るプレーンなMarkdownです。
DESIGN.mdは共同作業者として扱われ、上書きではありません。このスキルは、エージェントに、簡潔な指示が競合する場合は上書きする権限を与えますが、新しいトークンを発明することは決して許しません。
data-od-idタグ付けは、要素をコメントモードに配線する方法です。コメントモードとの互換性を必要とするスキルは、出力に注釈を付ける必要があります。

パッケージ契約内ではこれらの4つのルールを維持してください。このスキルと一緒に移動しない可能性のあるリポジトリレベルのプロトコルファイルに依存しないでください。