Web Skills
One kit, many pages — every section pulling its weight.
Turns your AI into a web-kit builder — scopes, writes, and assembles a coherent kit of web skills that ship real pages: one skill per page section (hero, testimonial, pricing, FAQ, and more), each held to the same quality bar, composing into landing pages, product pages, and whole small sites.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
Web Skills
When to use
- You need more than one web page and want them to feel like one site, not a pile of one-offs
- A team keeps rebuilding the same sections (hero, pricing, FAQ) from scratch on every page
- You want a reusable kit: pick the sections a page needs, assemble, ship — without redesigning each time
- A landing page, product page, or small marketing site has to go live fast and still look considered
- You are standardizing how your AI builds web pages so every page meets the same bar
Workflow
- Define the kit's job (input: the pages you need to ship → output: kit brief)
Start page-first: list the actual pages this kit must produce (landing page, product page, pricing page, about page — whatever is real), and for each, name its one job ("get the visitor to start a trial", "answer pricing objections"). The kit brief states the audience, the pages, and the shared constraints: one type system, one spacing rhythm, one voice. A kit with no named pages drifts into generic components nobody uses; a kit built for three real pages gets used on the fourth. - Inventory the skills (input: kit brief → output: section inventory)
Decompose each page into sections, then merge duplicates into the kit's inventory — one skill per section type. A typical kit holds: Hero (the first screen: headline, subhead, one action), Feature Grid (what it does, in scannable cards), Testimonial (proof in a real voice), Pricing (plans, plain numbers, one recommended plan), FAQ (objections answered honestly), How It Works (steps, in order), Final CTA (one ask, no new information), and Footer (navigation, contact, fine print). Cut any section that no page in the brief actually needs, and name each skill for the section it builds — the inventory is a menu, not a museum. - Write each skill to the bar (input: section inventory → output: skill specs)
Every skill in the kit gets the same spec shape: when to use it, its inputs (the content it needs — e.g. Hero needs a headline, one subhead, one action), its output (the section, ready to drop into a page), and its quality bar. The bar is shared across the kit: one idea per section, real content over placeholder text (no "lorem ipsum" escapes — if the copy isn't ready, the skill says so), mobile-first layout (the section must read on a phone screen first), one primary action per section, and accessible contrast and focus states. Write the specs so a new skill can be added later without breaking the kit — same shape, same bar.
Template preview
Web Skills — Kit-Building Template
Build the kit for real pages, then prove it on a second page.
Kit brief
Audience: {who the pages serve} Pages this kit must ship:
Shared constraints: one type system / one spacing rhythm / one voice: {describe each in one line}
Section inventory (one skill per section type)
Cut: {any section no page actually needs — remove it}
Skill spec (copy per skill)
Skill: {name} When to use: {___} Inputs: {___} Output: {the section, ready to drop into a page} Quality bar: one idea per section / real content, no placeholders / mobile-first / one primary action / accessible contrast + focus states
