Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

landing-page

Name: landing-page
Author: jezweb

簡単なブリーフからデプロイ可能なランディングページを丸ごと生成します。Tailwind CSS（CDN経由）・レスポンシブデザイン・ダークモード・セマンティックHTML・OGメタタグを含む単一のHTMLファイルを出力し、ヒーロー＋CTA・特徴紹介・社会的証明・料金プラン（任意）・FAQ・フッターで構成されます。マーケティングページ・製品ローンチページ・Coming Soonページなど単独で機能するランディングページを作成したいときに使用してください。

description の原文を見る

Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.

SKILL.md 本文

ランディングページジェネレーター

単一のHTMLファイルとして完全で本番環境対応のランディングページを生成します。ビルドステップや依存関係は不要 — ブラウザで開くか、どこでもデプロイできます。

ワークフロー

1. ブリーフを集める

ユーザーに以下を確認します:

フィールド	必須	例
ビジネス/製品名	はい	"Acme Plumbing"
バリュープロポジション	はい	"24/7 emergency plumbing across Newcastle"
ターゲットオーディエンス	はい	"Homeowners in the Hunter Valley"
プライマリCTA	はい	"Call Now" / "Get a Quote" / "Sign Up"
セカンダリCTA	いいえ	"Learn More" / "View Pricing"
ブランドカラー	いいえ	Primary: #1E40AF, accent: #F59E0B
ロゴURL またはテキスト	いいえ	ロゴ画像へのURL、または事業名を使用
電話 / メール	いいえ	連絡先セクション用
希望セクション	いいえ	デフォルト: hero, features, testimonials, FAQ, footer

ブランドカラーが提供されない場合は、color-palette skillを使用してカラーを生成するか、妥当なデフォルト(slate/blue)を使用することを提案してください。

2. HTMLを生成する

単一のHTMLファイルを作成します:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <!-- Meta, OG tags, favicon -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  <!-- Nav -->
  <!-- Hero -->
  <!-- Features -->
  <!-- Social Proof -->
  <!-- Pricing (optional) -->
  <!-- FAQ -->
  <!-- Footer -->
  <!-- Dark mode toggle script -->
</body>
</html>

3. セクションパターン

ヒーロー

全幅、ファーストビュー内
ヘッドライン(h1) — バリュープロポジション、事業名ではない
サブヘッドライン — サポート詳細、1〜2文
プライマリCTAボタン(大きく、対比色)
オプション: ヒーロー画像プレースホルダーまたはグラデーション背景
パターン: デスクトップでは左寄せ(画像と60/40分割)、モバイルでは中央寄せ

機能 / サービス

レスポンシブグリッド内に3〜6項目(モバイル1列、デスクトップ2〜3列)
各項目: アイコンプレースホルダー + 見出し + 簡潔な説明
セマンティック見出しを使用(セクション用h2、項目用h3)

ソーシャルプルーフ / 推薦文

名言、名前、役職/企業の推薦文カード 2〜3個
該当する場合は星評価
代替案: クライアント/パートナーロゴのロゴバー

料金(オプション)

2〜3段階のティアカード(basic/pro/enterprise パターン)
強調表示された「推奨」ティア
ティアごとの機能比較リスト
ティアごとのCTAボタン

FAQ

アコーディオンパターン(details/summary — JSは不要)
一般的な質問 4〜6個
SEO用のSchema.org FAQPageマークアップ

フッター

ビジネス名、連絡先、ソーシャルリンク
法的リンク(プライバシー、利用規約)をプレースホルダーとして
著作権年(自動更新用JS)

4. 技術要件

レスポンシブ: モバイルファースト、3つのブレークポイント

デフォルト: モバイル (< 640px)
sm: 640px+ (タブレット)
lg: 1024px+ (デスクトップ)

ダークモード: 3段階トグル(light/dark/system)

カラー用CSS カスタムプロパティ
<html> の .dark クラス — CSS メディアクエリはなし
トグル + localStorage永続化用の小さなJSスニペット

アクセシビリティ:

適切な見出し階層(h1 → h2 → h3、スキップなし)
すべての画像にalt属性プレースホルダー
インタラクティブ要素のfocus-visibleスタイル
十分なカラーコントラスト(最小4.5:1)
スキップ・トゥ・コンテンツリンク

SEO:

セマンティックHTML5要素(header, main, section, footer)
OGメタタグ(title, description, image, url)
Twitter cardメタタグ
正規URL
ローカルビジネスの場合はJSON-LD LocalBusiness (seo-local-business skillを参照)

パフォーマンス:

コアコンテンツレンダリングにはJSは不要
画像の遅延読み込み(loading="lazy")
システムフォントスタック(外部フォントリクエストなし)
単一ファイル — Tailwind CDN以外の外部CSS/JRなし

5. カラー適用

ユーザーがブランドカラーを提供する場合、Tailwindをインライン設定します:

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

カラーが提供されない場合、Tailwindの組み込みパレットを使用(ニュートラルスレート、プライマリブルー)。

6. 出力

ファイルをユーザーが指定した場所に書き込むか、デフォルトは ./index.html。

生成後:

プレビュー方法をユーザーに伝える: open index.html (macOS) またはローカルサーバーの場合 python3 -m http.server
デプロイオプションを提案: Cloudflare Pagesへのドラッグ、Netlify drop、または Workers 用 wrangler deploy
置き換え必要なプレースホルダーコンテンツをリストする(画像、推薦文、電話番号)

品質ルール

プレースホルダーlorem ipsumなし — ビジネスタイプに基づいた現実的なプレースホルダーテキストを生成
レイアウト崩れなし — レスポンシブグリッドを精神的にテスト: 1列 → 2列 → 3列
インラインスタイルなし — Tailwind クラスのみを使用
実際のインタラクション — セクションへのスムーススクロール、動作するアコーディオン、動作するダークモードトグル
デフォルトでアクセシブル — アクセシビリティを美学のために犠牲にしない
オーストラリア規約 — ビジネスがオーストラリアの場合、+61 電話形式、オーストラリア英語綴り、ABNプレースホルダーを使用

バリエーション

リクエスト	アプローチ
"Coming soon page"	ヒーローのみ + メールサインアップフォーム + カウントダウンタイマー
"Product launch"	ヒーロー + 機能 + 料金 + CTA-重い
"Portfolio"	ヒーロー + プロジェクトグリッド + about + 連絡先
"Event page"	ヒーロー + スケジュール + スピーカー + 会場 + 登録CTA
"App download"	ヒーロー + 機能 + スクリーンショット + アプリストアバッジ

ページ目的に合わせてセクション選択を調整します。すべてのページが料金またはFAQを必要とするわけではありません。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: jezweb
リポジトリ: jezweb/claude-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/jezweb/claude-skills / ライセンス: MIT

landing-page

SKILL.md 本文

ランディングページジェネレーター

ワークフロー

1. ブリーフを集める

2. HTMLを生成する

3. セクションパターン

ナビゲーション

ヒーロー

機能 / サービス

ソーシャルプルーフ / 推薦文

料金(オプション)

FAQ

フッター

4. 技術要件

5. カラー適用

6. 出力

品質ルール

バリエーション

詳細情報

関連スキル

doubt-driven-development

apprun-skills

desloppify

debugging-and-error-recovery

test-driven-development

incremental-implementation