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

Screen. A complete screen from one sentence — with the empty, loading and error states that generated screens forget.

Translates the request into regions and data, searches the WunderUI block registry, picks the layout, places components with props from their real signatures, adds every state, uses motion tokens instead of raw milliseconds and finishes with a lint, a typecheck and a build.

Download free skillsSee the workflow
Workflow

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

  1. 1

    Translate the request

    The screen's job, its data, its actions and the region each part lives in — and one grouped question for whatever decides the build.

  2. 2

    Search the blocks

    Matches the request against the block registry and the component inventory and prints the best blocks with the components they use.

    screen.mjs find "billing invoices usage"
  3. 3

    Pick the layout

    App shell with sidebar, shell with aside, top bar only, centered card, split or full bleed — and the grid inside it.

  4. 4

    Place the components

    Top-down: shell, page header, regions. Props come from get_component or design.json, never from memory.

  5. 5

    Add the states

    Every data region gets loading (the component's loading prop or a Skeleton of the same height), empty (EmptyState with one action) and error (Alert with retry), reachable through a state switch.

  6. 6

    Motion from tokens

    duration-fast|base|slow, ease-entrance in, ease-exit out, transform and opacity only — and never a fade on the headline.

  7. 7

    Check and build

    Lints the new files for raw colours, raw motion, missing states, deep imports and hand-built tables, then runs typecheck and build.

    screen.mjs check app/billing/page.tsx
Example run

Real output. From a test run of this skill.

You ask

“Build a billing page with the current plan, usage and an invoices table.”

Or in other words

  • “Build a billing page with the current plan, usage and an invoices table.”
  • “Add a team members screen with roles and invites.”
  • “Make a settings page for notifications.”
blocks     app/billing · 01-subscription-overview   (Price, Progress, Table, Badge)
           app/billing · 04-invoice-detail          (Table, Badge, Button)
built      app/billing/page.tsx — Card, Button, Skeleton, EmptyState, Alert, SidebarItem
states     loading ✓  empty ✓  error ✓   (?state=loading|empty|error)
check      0 errors · 0 warnings
build      tsc --noEmit ✓  next build ✓   light, dark and 390 px without overflow
Install

Free for personal projects. One folder for your agent.

Download the free skills zip, unzip it and copy the folder into your skills directory — .claude/skills/ in one project or ~/.claude/skills/ for all of them.

# from the free skills zip
cp -r wunderui-skills/skills/wunderui-screen ~/.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 (skill Setup)
  • Node.js 20+
  • Block source needs WunderUI Pro; without it the blocks serve as blueprints