agentsclimarketplace

Instant ui

Skill naveedharri/benai-skills/plugins/benai-marketing/skills/instant-ui

Install
npx -y skills add naveedharri/benai-skills --skill instant-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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).

SKILL.md

3.8 KB, as published. Nobody here has run it

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 / run report), primary CTA, and the real copy. This brand is content-first: never write marketing filler. If copy is missing, stop and ask.

    Unattended exception. If the caller says it is running unattended, do not ask anything. Build from the content given, render any missing section as an explicit gap, and never invent copy to fill it. A scheduled routine calling this skill cannot answer a question, so a question means no page gets made at all.

  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 the output path the caller gave you. If none was given, default to ~/Desktop/builds/[page-name].html (kebab-case). Add the kicker comment <!-- instant-ui v1 --> at the top. Report the file path and open it for the user to review, unless running unattended, in which case just report the path.

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.