Copy skill

Full-page generation

Use the public xzero-ui MCP server at https://mcp.xzero.co.uk/mcp. The complete Free and Pro library is available through this service. No account, sign-in, token, or upstream fallback is required. If the service is unavailable, retry later; do not use upstream services.

Brief, plan, build, verify. If the user asked only for a plan ("plan this page first"), do steps 1 and 2, deliver the plan, and stop. Otherwise copy this checklist and keep it updated in your replies:

Page progress:
- [ ] 1. Brief written
- [ ] 2. Plan: region map, Xzero item per region, states table, plan validated
- [ ] 3. Installed: one command, foundation imported, fonts loaded
- [ ] 4. Built: page file and CSS module, real data or typed placeholders, every state
- [ ] 5. Verified: checklist.md passes, tsc and lint pass
- [ ] 6. Reported

1. Brief

Restate the request in five lines:

Audience: who uses the page
Job: what they come to do ("invite a teammate and set their role")
Primary action: exactly one
Data: objects on screen and where they come from
Surface: product page or marketing page

Ask one question only when the primary action or the data source is unknown. Otherwise state your assumption and continue.

2. Plan

Map regions to Xzero items

Pick one Xzero item per region. Prefer the Pro block when the user has Pro; the free column is the fallback without Pro or for a lighter region.

Region	Pro	Free
App shell	sidebar-rail, workspace-sidebar, inbox-sidebar, docs-sidebar	Your nav plus user-menu and command-palette
Page title and actions		page-header, or h1, breadcrumb, button, split-button
Records	data-grid	sortable-data-table, pagination
Filters		filter-toolbar, search-field, chip-group, segmented-control for 2 to 5 views
Bulk actions		dropdown-menu or split-button on the selection
Metrics	metrics-dashboard, metric-explorer, kpi-drilldown, revenue-explorer	metric-card row, line-chart, bar-chart, sparkline
Settings	settings-page, security-settings, roles-permissions, api-keys, webhooks, integrations	input, select, switch rows (free example-settings.md)
Team	team-members, invite-people, team-directory	avatar-group, sortable-data-table
Billing and money	billing-overview, usage-billing, usage-forecast, invoice-studio, checkout-summary, cancel-flow	billing-toggle, plan-comparison, usage-meter
Creation flow	multi-step-form	stepper with form fields
AI	ai-chat, ai-composer, agent-run	chat-thread, text-shimmer
Activity and history		timeline, comment-thread, notification-center
Global search		command-palette, expanding-search
Marketing	feature-bento, scroll-story, spotlight-grid, testimonial-stage, hero-signup, pricing-calculator, usage-pricing	hero-section, logo-marquee, stats-band, comparison-table, faq-section, cta-section

For a marketing page the default order is site-header, hero-section, proof (logo-marquee, stats-band), features (Pro: feature-bento, scroll-story), pricing (free: plan-comparison, see the free skill's example-pricing.md; Pro: pricing-calculator, usage-pricing), testimonials (Pro: testimonial-stage), faq-section, cta-section, site-footer.

For anything not in the table, call search_components with the region's job before building it yourself. login and sidebar are block families: get_component lists their variants, and you pick one variant id. Every other id is one item.

Hierarchy

• One h1. Section headings describe content, not layout. No eyebrow labels.
• The primary action is the only variant="primary" on screen.
• Secondary actions go in split-button or dropdown-menu; destructive ones behind confirm-morph, hold-to-confirm, or a dialog.
• Group with spacing, separate with borders, use a card only for a real boundary. One page container; blocks fill their column.
• One memorable detail for the page (a gliding highlight, a morphing save, a rolling number). Everything else stays quiet. No two adjacent sections share a layout.

States

List every region's states in a table; each cell gets a treatment:

Region	Loading	Empty	Error	Success	Limited
e.g. Members	skeleton rows	empty-state "Invite your first teammate"	inline alert with retry	row appears, seat count rolls	read-only for non-admins, with the reason

Validate the plan

Before installing anything, confirm and fix until all hold:

• Every id is live: get_component returns it, and its "when to use" fits the region (check "when not to use" too).
• One primary action and one memorable detail on the page.
• Every state cell has a treatment.

Plan output: the brief, the region map with tiers, the states table, and the ids to install. If only a plan was asked for, stop here and report it.

3. Install

Call get_install_command once with every id and run the command it returns. Then, once per project: import "@/components/xzero/foundation.css"; in the root layout, and Geist and Inter loaded as --font-geist and --font-inter. Pro items need the setup in SKILL.md; without Pro access, name the Pro items the user must add.

4. Build

• One page file plus one CSS module, Xzero tokens only. The page owns the one container; everything inside fills its column.
• Layout with CSS grid; product spacing 16 to 24px gaps and 24 to 32px padding; marketing sections 64 to 120px.
• Replace every sample value in blocks with real data or typed placeholders the user can fill. Keep names and numbers realistic.
• Wire callbacks to real functions and return their promises. Mark anything simulated in the report.
• Implement every cell of the states table.
• Write copy by the free skill's copy.md: sentence case, no eyebrows, no em dashes, verbs on buttons, true claims.
• Keep the page shell a server component; put "use client" on the interactive parts only.

5. Verify (feedback loop)

1. Run the free skill's checklist.md sweeps (the grep block) over the new files. Fix every hit.
2. Walk the checklist line by line against the code. Fix every failure.
3. Run the type check and lint. Fix errors.
4. If the project can run, open the page at 390, 768, 1024, and 1440px, in light and dark, and try every control and state: open, close, save, fail, empty.
5. Repeat from step 1 until all of it passes. Do not report success with a failing line; report the line and the reason instead.

6. Report

The shared report from SKILL.md: files created, Xzero items installed, what is simulated, what the user must connect (APIs, auth, real copy), and the checklist result.