supanova-full-output について
supanova-full-output は、部分的な出力ではなく完全なランディングページを作成するためのスキルです。必要なページ要素と確認項目を定めています。
主な機能
- 01ページ全体の出力要件
- 02ランディングページの構成一覧
- 03レスポンシブレイアウト要件
- 04出力前の完全性チェック
活用シーン
- 01完全なランディングページの作成
- 02ページのセクション漏れの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ uxjoseph/ supanova-design-skill --skill supanova-full-outputインストール後、Claude Code で/supanova-full-outputを入力して読み込まれたか確認します。
詳細
Supanova の完全出力の徹底
基本方針
ランディングページの生成はすべて、本番環境に関わる重要な作業として扱ってください。出力が不完全なら、それは壊れた出力です。ユーザーがランディングページを求めた場合は、すべてのセクション、すべてのアニメーション、すべてのレスポンシブブレークポイントを含む完全なランディングページを提供してください。例外はありません。
禁止されている出力パターン
以下のパターンは重大な失敗です。絶対に出力しないでください。
コードブロック内:
- ``
- ``
- ``
- ``
- ``
// ...- 省略した HTML の代わりに単独の
...を使用する
文章内:
- "続けてほしい場合はお知らせください"
- "必要であれば、さらにセクションを追加できます"
- "簡潔にするため、ヒーローセクションだけを紹介します"
- "残りも同じパターンに従います"
- "残りのセクションも同様です"
- "カスタマイズはそちらでお願いします"
構成上の近道:
- ページ全体を求められているのに、ヒーローだけを出力する
- 最初と最後のセクションだけを示し、途中を飛ばす
- 繰り返しのセクションを一例と説明だけで置き換える
- HTML に含めるべき内容を説明するだけで、実際には記述しない
- 完全なページを求められているのに、骨組みやワイヤーフレームを生成する
実行プロセス
- 範囲の確認 — 依頼全体を読みます。必要なセクションやコンポーネントの数を数えます。「ランディングページ」とは、最低でもナビゲーション + ヒーロー + ソーシャルプルーフ + 機能紹介 + お客様の声 + CTA + フッターの 7 セクションを意味します。数を確定します。
- 構築 — すべてのセクションを、レスポンシブクラス、アニメーション、実際の韓国語コンテンツ、適切な Iconify アイコンをすべて含めて、完全に生成します。
- 相互確認 — 出力前に確認します。HTML ファイルに開始タグ
<!DOCTYPE html>と終了タグ</html>があるか。7 つ以上のセクションがすべて含まれているか。すべてのセクションに実際のコンテンツが完全に記述されているか。
長い出力の扱い
ランディングページがトークン上限に近づいた場合:
- 残りのセクションを圧縮して収めようとしないでください。
- フッターまで飛ばさないでください。
- 完全な
</section>タグの終わりなど、適切な区切りまで、品質を落とさずに記述してください。 - 次のように終了します。
[PAUSED — X of Y sections complete. Send "continue" to resume from: next section name]
「続けて」と言われたら、停止した箇所の次の <section> から正確に再開します。要約をしたり、<head> を再出力したり、繰り返したりしないでください。
ランディングページの完全性基準
完全な Supanova ランディングページには、必ず次の内容を含めてください。
必須要素
<html lang="ko">を含む<!DOCTYPE html>- メタタグ、Tailwind CDN、Pretendard フォント、Iconify、tailwind.config を含む完全な
<head> - ナビゲーション(フローティングガラスまたはミニマルなバー)
- ヒーローセクション(ファーストビューで最も重要なセクション)
- 信頼性を示す要素またはソーシャルプルーフを少なくとも 1 つ
- 機能紹介(機能を最低 3~5 個)
- お客様の声または導入事例
- 主要な CTA セクション
- 必須リンクを含むフッター
- スクロールアニメーション JavaScript(
IntersectionObserverのセットアップ) - 閉じタグ
</html>を含む完全な HTML
必須品質
- すべてのセクションに、プレースホルダーテキストではなく実際の韓国語コンテンツを含める
- すべてのセクションに完全なレスポンシブクラス(
sm:、md:、lg:)を含める - すべてのインタラクティブ要素にホバー時とアクティブ時の状態を設定する
- すべての画像に
loading="lazy"、altテキスト、有効なsrcを設定する - すべてのアイコンに
<iconify-icon icon="solar:..."></iconify-icon>を使用する
簡易チェック
回答を確定する前に、次の点を確認してください。
- 上記の禁止パターンがどこにも含まれていない
- HTML ファイルが
<!DOCTYPE html>から</html>まで完全である - 要求されたすべてのセクションが含まれ、内容も完全に記述されている
- すべてのコードブロックに、説明ではなく実際に実行できる HTML が含まれている
- 省略、要約、短縮によって内容を削っていない
- 表示されるすべてのテキストが自然な韓国語である
コメント
Markdown 対応