instant-ui git:20260721.8030965A

Immutable. This exact content is served forever at /api/v1/blob/cb98152fa61e1876.

---
name: instant-ui
description: Build a BenAI-branded HTML page in the neo-brutalist instant-ui design language (cream background, near-black ink, 3px hard borders, 6px zero-blur shadows, a blue/green/amber gradient stripe, system font plus SF Mono, weight-900 headings). Use for any BenAI landing page, offer, sales, or pricing page, onboarding or intake form, partner page, case study, playbook, toolkit, or internal doc that must look like it came off the same line as the BenAI Champion Offer assets. Reproduces that visual language 1:1 with a fixed token set and a 20-component library. Triggers include "instant-ui", "benai ui", "benai brand page", "build a benai page", "make this look like benai", "on-brand landing page", "branded form", "benai landing", "champion offer page". Not for dark HUD dashboards (route to personal-ui) or non-BenAI clients (route to client-docs).
disable-model-invocation: true
argument-hint: "[what to build, e.g. 'pricing page for new tier' or 'onboarding form for partners']"
---

# Instant UI (BenAI Brand)

Build a single self-contained HTML page in the BenAI neo-brutalist design language. Every output must match the BenAI Champion Offer assets 1:1, as if it came off the same assembly line.

## Steps

1. **Confirm scope.** If `$ARGUMENTS` is empty or vague, ask for: page name, page type (landing / form / product / pricing / case study / doc), primary CTA, and the real copy. This brand is content-first: never write marketing filler. If copy is missing, stop and ask.
2. **Load the tokens.** Read `references/design-tokens.md` and paste the `:root` block plus typography rules verbatim. Never hand-type tokens.
3. **Build the shell.** Read `references/page-shell.md` for the required page wrapper, the BenAI smiley SVG (header and footer), and the responsive breakpoints. Every page opens with the 4px blue/green/amber gradient stripe.
4. **Assemble components.** Read `references/components.md` and copy the CSS and HTML for each block the page needs (20 components: pills, buttons, hero, stat strips, sections, cards, VS grids, timeline, testimonial, pricing, CTA, footer, forms). Copy verbatim, swap the copy, do not improvise.
5. **Apply the rules.** Read `references/build-rules.md` for the voice rules, hard build constraints, error-handling routes, and the after-build checklist. Run the checklist before confirming the output.
6. **Save and confirm.** Write to `~/Desktop/builds/benai/[page-name].html` (kebab-case) with the kicker comment `<!-- BenAI instant-ui v1 -->` at the top. Report the file path and open it for the user to review.

A minimal starter is at `templates/starter.html`. A full reference page using every token and component is at `references/examples/reference-page.html`.

## Self-improvement

This skill is never finished. Improve it as you use it.

- When the user corrects how a step was done (a token value, a component detail, a rule), update the matching reference file (`design-tokens.md`, `page-shell.md`, `components.md`, or `build-rules.md`) so the correction sticks. Do not just fix it for this run.
- When a correction is a hard rule ("always X", "never Y"), add it to the build rules in `references/build-rules.md`.
- When the user says a page was genuinely good, save it to `references/examples/` so it becomes a model for future runs.
- Keep the skill small: when you add something, cut anything that no longer changes what the agent does.