pricing-page

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.

インストールへ移動

リポジトリ: skeletorflet/opencode-supreme-setup
ソースの最終更新活動: 2026年5月19日 18:56
検出された SKILL.md の言語: 英語
スター: 47
フォーク: 2

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill pricing-page

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

4 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

8-bit-orbit-video-template

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

2026-05-19

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

2026-05-19

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.

2026-05-19

このリポジトリのすべてを見る

Pricing Page Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

Workflow

Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.

Classify the product from the brief and pick a tier shape:

3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
4-tier when the brief says "scale" or "enterprise plus".
2-tier when it says "individual / business" or "personal / pro".

Sections, in order:

Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
Footer CTA — single line + button, accent band sparingly.

Write one self-contained HTML document:

<!doctype html> through </html>, CSS in one inline <style>.
CSS Grid for the plan-card row; CSS Grid for the comparison table.
data-od-id on each tier card and each table row.

Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale.

Self-check:

Prices are plausible for the product (not "$X / month").
Accent is on the recommended tier and one CTA only.
Comparison table renders cleanly at 1024px and stacks readably below 768px (rotate column headers or scroll-x).
No fake feature names — every row reads as something a real product would actually offer.

Output contract

Emit between <artifact> tags:

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

Pricing Page Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

Workflow

Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.

Classify the product from the brief and pick a tier shape:

3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
4-tier when the brief says "scale" or "enterprise plus".
2-tier when it says "individual / business" or "personal / pro".

Sections, in order:

Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
Footer CTA — single line + button, accent band sparingly.

Write one self-contained HTML document:

<!doctype html> through </html>, CSS in one inline <style>.
CSS Grid for the plan-card row; CSS Grid for the comparison table.
data-od-id on each tier card and each table row.

Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale.

Self-check:

Prices are plausible for the product (not "$X / month").
Accent is on the recommended tier and one CTA only.
Comparison table renders cleanly at 1024px and stacks readably below 768px (rotate column headers or scroll-x).
No fake feature names — every row reads as something a real product would actually offer.

Output contract

Emit between <artifact> tags:

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

name	pricing-page
description	A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.
triggers	["pricing","pricing page","plans","subscription","compare plans","定价","套餐"]
od	{"mode":"prototype","platform":"desktop","scenario":"sales","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["laws-of-ux"]}}

pricing-page

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

Pricing Page Skill

Workflow

Output contract

このリポジトリの他の Skills

Pricing Page Skill

Workflow

Output contract