Qué incluye

Un SKILL.md (la guía paso a paso) + una plantilla inicial. Una vista previa:

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

1. 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.
2. 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.
3. 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.
4. Compose a page from skills (input: skill specs + page brief → output: assembled page)
   Assemble by choosing sections in the order a visitor thinks, not the order the kit lists them: Hero (why am I here) → proof or problem (why believe it) → features (what it does) → pricing or steps (what it costs / how it works) → FAQ (what's still nagging me) → Final CTA (what now). Enforce the kit's shared tokens across sections — same headings, same spacing, same button style — so the page reads as one design. No section appears twice on one page, and no section survives if removing it changes nothing.
5. Test the kit end-to-end (input: assembled page → output: proven kit)
   Prove the kit by building one real page with it, on a phone-sized screen first: read every headline in order, tap every link and button, check every section at small width, and time how long the page takes to produce. Log what broke — a missing section, a skill whose inputs were unclear, a place where two sections repeated each other — and fix the kit, not just the page. The kit is done when a second page assembles faster than the first and looks like it belongs to the same site.

Vista previa de la plantilla

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

El paquete de la habilidad (SKILL.md + plantilla) está escrito en inglés.

Comprar el paquete completo de la habilidad — $4.99 Pro — las 511 habilidades