Communityコーディング&開発github.com

getrdone/html-page-standard

新しい静的HTMLページのデフォルト契約。スクリーンショット、ビットマップモックアップ、ラスターデザインからHTMLプロジェクト、ランディングページ、スクリーンショットのクローン、CSSのトークン化、TUNEブロック、テーマトークン、クローン後のstudio-web修復、レイアウトパックに使用します。Wix Veloのみの編集やユーザーが別のパイプラインを指定した場合には使用しないでください。

html-page-standard とは?

このスキルは、静的HTMLページを生成するための公式パイプライン(ルーター)です。スクリーンショットやラスターデザインからHTMLを生成する際に、A-clone(視覚的クローン)、B-tokenize(CSSトークン化)、C-repair(セマンティクス・アクセシビリティ修復)、layout-pack(オプションのレイアウトパック)の4つのパスを順次実行します。各パスには専任のエージェントが割り当てられ、混在を防ぎます。ハードルールとして、TUNE(リズム)とテーマ(見た目)を分離し、コンテナクエリ(cqi)でレスポンシブ対応すること、トークンが存在する生のfont-sizeやmarginを禁止することなどが定められています。主なプラットフォームはscreenshot-to-html(Aパス)とstudio-web(Cパス)で、フォルダ構造やレイヤー(@layer reset, core, theme, layout, page)も厳密に定義されています。

対応~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/getrdone/agent-skills/tree/main/skills/html-page-standard

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

HTMLページ標準

静的HTMLを今後作成するための正規パイプライン。このスキルはルーターです。このファイル単体でページ全体を実装しないでください。

ファイルを書き始める前に宣言:

HTML-PAGE-STANDARD: 1.0
PASS: A-clone | B-tokenize | C-repair | layout-pack

現在のパスの所有者のみをロードしてください。スクリーンショットからHTMLへの変換とstudio-webが初稿を共同執筆することは絶対に避けてください。

パスの所有者

パス所有者出力
A-clonescreenshot-to-html のみsource.png + clone.html
B-tokenizeこのスキル + references/tokenize-contract.mdcore.css + theme-default.css
C-repairstudio-web 1.1 web.repairindex.html(クローンから)、セマンティクス、a11y、モーション
layout-packこのスキル + references/layout-packs.mdオプション: layout-*.css

ユーザーがライブURLや既存のHTML(クローン対象のスクリーンショットなし)を提供した場合、Aをスキップします。トークンが不足している場合はトークン化し、その後Cを実行します。

スクリーンショットが厳密な複製ではなくムードのみの場合、Aをスキップし、代わりにstudio-webのweb.buildを使用します。その旨を書き始める前に伝えてください。

ハードルール

  1. ユーザーが明示的に連鎖させない限り、1ターンにつき1パス。
  2. 見た目が1つだけの場合でも、すべての新しいページにはTUNEとテーマファイルを同梱します。
  3. TUNEはリズムを担当し、テーマは見た目を担当し、レイアウトパックは配置を担当し、HTMLはコピーを担当します。
  4. パスB以降、トークンが存在する場合は生のfont-size、padding、margin、gapを使用してはいけません。
  5. コンポーネントレイアウトにビューポート幅ブレークポイントは使用しません。領域は@container + cqiを使用します。
  6. テーマはDOMを変更してはいけません。レイアウトパックはパレットを変更してはいけません。
  7. 依頼がない限り、1ページ目に2つ目のテーマやレイアウトパックを追加しないでください。
  8. Wix Veloの作業は対象外です。

フォルダ契約

<page>/
  source.png
  clone.html
  core.css
  theme-default.css
  index.html

後からオプションで追加: theme-<name>.css、layout-<name>.css。ルート属性: data-theme="default"、data-layout="default"。

レイヤー: @layer reset, core, theme, layout, page;

ロードマップ

  • パスA — screenshot-to-htmlをロード。clone.htmlが画像と一致したら停止。
  • パスB — references/tokenize-contract.mdをロード。assets/core.template.cssとassets/theme-default.template.cssをコピーし、クローンから数値を埋めます。再設計は禁止。
  • パスC — studio-web 1.1(レーンweb.repair)と、そのスキルのreferences/page-anatomy.mdをロード。凍結条件: ビジュアル契約、TUNE数値、テーマパレット(ただし名前付きの場合は除く)。変更可能: 領域ID、セマンティクス、実際のコントロール、コントラスト、画像を変更しないモーション。
  • レイアウトパック — 要求された場合のみreferences/layout-packs.mdをロード。
  • スキャフォールドのリマインダー — references/project-scaffold.md。
  • プロンプトパターン — references/prompts.md。

手術マップ

質問ファイル
詰める、大きくする、余白を増やす、文字間隔、角丸、モーションcore.css TUNEブロック
ナイトペーパー、ゴールド、オーバーレイ、ヘアラインtheme-*.css
スタック vs 分割ヒーローdata-layout + レイアウトパック
間違った文章index.html

禁止事項

  • パスAのビジュアルクローンとstudio-webの構成を混在させない。
  • グリッドの列やorderをTUNEに入れない。
  • --space-*やタイプスケールをテーマファイルに入れない。
  • index-dark.html/index-camp.htmlをフォークしない。
  • ヒーロー+プライマリCTA以外のテーマ×レイアウトの全ビジュアルマトリックスは実行しない。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル