Run any Skill in Manus with one click

design-pricing-page

Stars2

Forks1

UpdatedMay 11, 2026 at 05:13

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

the-sid-dani

the-sid-dani/second-brain-os

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

name	design-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.

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:
1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
2. 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.
3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
4. FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
5. 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.

More from this repository

same repository

bootstrap

the-sid-dani/second-brain-os

Interactive first-run setup for a fresh fork of the second-brain-os — THE entry point every fork user runs once to configure their identity, name their assistant's persona (no default name — fork users always name their own), pick a design system, create the PARA workspace, and write the Configuration token block in root CLAUDE.md. A short, plain-language guided walkthrough for knowledge workers (~8-10 min) with AskUserQuestion gates and a brief why-it-matters intro on each step; nothing is installed, nothing is committed, every write asks first. When core setup finishes, it offers two OPTIONAL go-further steps — learning your writing voice from your own sent Slack/Gmail messages (with consent), and bringing your existing work in via `/migrate-work`. Detects re-runs via `setup_completed:` and refuses gracefully. Use after cloning the repo, or to reconfigure identity / persona / workspace — phrases like "/bootstrap", "I just cloned this", "first-time setup", "configure the assistant". Tiger invariants T1-T4 (n

2026-06-242

migrate-work

the-sid-dani/second-brain-os

Bring a user's EXISTING work into their second-brain-os PARA workspace by reading their past Claude Cowork sessions (local transcripts on disk) — discovering the projects they've actually been working on, then scaffolding the chosen ones as organized PARA entries (1-Projects or 4-Resources) with a CLAUDE.md + memory.md seeded from the session context. Read-only discovery + a fan-out of scout subagents (one per discovered project) + a SINGLE approval gate, then copy-never-move writes. Offered at the end of `/bootstrap` and re-invokable anytime. Use when the user says "/migrate-work", "bring in my existing work", "import my projects", "I have existing projects to bring over", "organize my past work", "migrate my cowork sessions". Hard invariants live in SKILL.md body — copy-never-move, read-only discovery, one approval gate, no fabrication, runnable code routes to the coding bucket (`<workspace.coding>`), never auto-commit.

2026-06-242

os-guide

the-sid-dani/second-brain-os

OS reference manual — for fork users in their first 30 days AND for Claude Code self-correcting mid-session on an OS-shaped mistake. Routes the question to its canonical source file, reads at runtime, answers with file:line citations. Topics — PARA, Configuration tokens, memory model, contacts schema, tools, lifecycle, design system, locked decisions, capability index, trigger-phrase map, Operating Principles. **Claude SHOULD consult this skill** before answering questions involving OS configuration values, workspace paths, or canonical skill behavior — especially before writing file paths into responses or scaffolding new files. Read-only by default; `/os-guide --sync` is the sole mutation mode and is gated behind explicit user approval. PRECEDENCE — `/bootstrap` for first-run setup; `/find` for topic search across user content; `/contact` for people; `/os-guide` for the OS itself.

2026-06-242

archive-project

the-sid-dani/second-brain-os

Moves a completed project from `<workspace.root>/<workspace.projects>/<slug>/` to `<workspace.root>/<workspace.archive>/<slug>/` and flips its frontmatter `status: active` → `status: done`. All paths come from the Configuration section in root CLAUDE.md — read those first. Use this whenever the user says they're done with a project, wants to wrap it up, or wants to clean up their active list — phrases like "archive the X project", "I'm done with X", "wrap up X", "move X to archive", "X is finished — clear it out", "shelve X for now". Optional one-paragraph retro gets appended to `memory.md` before the move so the decision context survives. Trigger even when the user doesn't say "archive" explicitly — finishing/wrapping/clearing language for a known project should invoke this skill rather than letting them `mv` by hand (which would skip the status flip and break `/prune-projects` later).

2026-06-222

atlassian-attach

the-sid-dani/second-brain-os

Upload files (screenshots, diagrams, PDFs, exported designs) as attachments to a Jira issue or a Confluence page. Works for either target — pick the subcommand. Uses Atlassian REST API directly via Python urllib + multipart — the official Atlassian MCP has no attachment-upload tools, so this skill exists to fill that hole. Auth via ATLASSIAN_BASIC_AUTH env var (classic API token only — scoped tokens cannot upload). Use whenever the user wants to add an image, screenshot, design export, or any binary file to an existing Jira ticket or Confluence page — phrases like "attach this screenshot to PROJ-450", "upload my-diagram.png to the design page", "add this PDF to the ticket", "embed this image in Confluence". Pairs naturally with `/confluence-publish-markdown` (which embeds external URLs only — no native upload) and with `/scaffold-engineering-project` (when slice descriptions need supporting images).

2026-06-222

autonomous-research

the-sid-dani/second-brain-os

Deep, iterative, hypothesis-driven research that loops until confident — not a single-pass lookup. Builds on /research by spawning multiple hypothesis workers per iteration, accumulating evidence in Ouros sessions, looping until confident or the user stops. Use when the user says 'research this deeply across multiple passes', 'run iterative research on', 'hypothesis-driven investigation of', 'loop until you understand X', 'deep-dive with synthesis'. NOT for single-session exploration (use /research) or implementation (use /autonomous).

2026-06-222

name	design-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.

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:
1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
2. 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.
3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
4. FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS.
5. 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.