Skip to content
Get All-Access
All skills
ProCoding agent skills

Compose. Whole pages from blocks, in the order of the visitor's questions — with rhythm and a protected LCP.

Clarifies the page's goal and audience, proposes a block order that answers the visitor's questions, inserts and fills the blocks, checks that each section has at most one notable effect and that the headline is not faded in.

Get All-AccessSee the workflow
Workflow

What it actually does. Step by step, in the order it runs.

  1. 1

    Goal and audience

    What the page must achieve, who arrives from where, what they know and the objection that stops them.

  2. 2

    Propose the order

    Section · question it answers · block · its one effect, from proven page orders — confirmed before building.

  3. 3

    Insert and fill

    Blocks from the registry where one fits, components for the rest, real copy marked as draft.

    compose.mjs find "help center"
  4. 4

    Check the rhythm

    Effects per section: at most one, and at least every other section quiet.

    compose.mjs rhythm app/page.tsx
  5. 5

    Protect the LCP

    The first heading and the hero image render at full opacity; motion uses transform only.

    compose.mjs lcp app/page.tsx
Example run

Real output. From a test run of this skill.

You ask

“Check the rhythm of our landing page.”

Or in other words

  • “Build a landing page for our analytics product.”
  • “Assemble a help center page.”
  • “Make a pricing page with FAQ.”
Hero      gradient, border beam   too many — keep one
Logos     marquee                  one
Features  —                        quiet
Pricing   gradient                 one
FAQ       —                        quiet
lcp       h1 starts at opacity-0 → render at full opacity, transform only
Install

Comes with WunderUI Pro. One folder for your agent.

The WunderUI Pro skills zip comes with your order (confirmation e-mail and Polar customer portal). Unzip it and copy the folder:

# from the WunderUI Pro skills zip
cp -r wunderui-skills/skills/wunderui-compose ~/.claude/skills/

Claude Code loads it by itself when your request fits. Cursor, Codex and other agents: point them at the skill's .

What it needs

  • WunderUI set up in the project
  • Node.js 20+
  • Block source needs WunderUI Pro