§Skills and features

The surfaces you work on. The skills that build them.

Five working surfaces in your repository, and a skill for every step. Each one below: what it is, what goes in, what comes out.

21
skills
6
intents
5
surfaces
3
agents
Browse the skillsOpen the demos
Fig. 05Constantine I, assembled from squares.Marble, ca. 325–370 CE · The Met

§ IFeatures

Design work, served from your own dev server.

01/auis/styleguide

Styleguide

A catalog rendered from the code that ships, so it cannot drift from the product.

  • A page per component, with its variants and its import line.
  • Live values for color, type, spacing, radius, shadow and motion.
Plate 01A component page, rendered from the component.Styleguide · drawn

02On every screen

Review Mode

Comment on the running product. An agent fixes it, and the fix waits for your decision.

  • Anchored to the element, not to a spot on a picture.
  • Pin it, circle it, point at it, say it or paste an image.
  • Mention an agent and it opens on that thread.
Try Review Mode →
Plate 02Two pins on a screen, one fix waiting for a decision.Review Mode · drawn

03/auis/ux-flow

UX Flows

Flow diagrams that are React pages, next to the routes they describe.

  • A screen node opens the real screen.
  • A compiled view overlays scenarios, one lens at a time.
  • Versioned with the code, so a journey has a history.
See a flow of this site →
Plate 03Three journeys on one board, one lens on.UX Flows · drawn

04/auis/states

State Mode

Every screen in every state, side by side. A state is a URL, so it is a link you can share.

  • Empty, loading, error, no permission: all at once, no faked data.
  • Axes such as plan or role multiply the matrix.
Try State Mode →
Plate 04One screen, every state, each with its URL.State Mode · drawn

05Live overlay

Edit Mode

Change text, tokens, variants and icons on the live page. An agent writes them into the source once you approve.

  • The code is untouched until you say so.
  • Only tokens and variants the system already has.
Try Edit Mode →

Edits · 4 waiting

  1. 01

    texth1

    ItemsInventory

  2. 02

    tokenbutton

    --accent-brand--bg-inverse

  3. 03

    variantAuButton

    secondaryprimary

  4. 04

    iconAuButton

    addinventory_2

app/items/page.tsx

  <header>-   <h1>Items</h1>+   <h1>Inventory</h1>-   <AuButton variant="secondary"-     icon="add">+   <AuButton variant="primary"+     icon="inventory_2">      New item    </AuButton>  </header>

In review · waiting for you

Plate 05Four edits on the page, one diff in the file.Edit Mode · drawn

§ IISkills

21 skills, grouped by what you are trying to do.

A skill is a plain file in your repository that tells an agent how to do one job and what it may not do. Type its name in Claude Code, Codex or Cursor.

Turn an empty project into your product: name, tokens, voice.

  • /auis-setup

    The guided first run. It sequences brand, foundation and voice, and checks in with you between each.

    The welcome formA project that is yours

    1. 01Creates nothing itself; it only orders the three skills that do.
    2. 02Reads the intake you filled at /auis/welcome, or interviews you.
  • /auis-brand

    Sets the app name, the positioning line and the logo, and wires the logo component to your mark.

    A name and a logoBrand config and AuLogo

    1. 01The only skill that establishes brand.
    2. 02Verifies the logo file before it wires anything.
  • /auis-voice

    Writes the product voice into PRODUCT_CONTEXT.md, the file every writing skill reads.

    Your product, a tone document or an interviewLanguage, voice and protected vocabulary

    1. 01Derives the voice from evidence: real strings, a site, a brand document.
    2. 02Proposes before it writes.

Support skills and Codex variants are in the skills catalog.

§ IIIThe check

Rules an agent can break are rules a script can catch.

npm run ds:check reads the code for what the rulebook forbids: on the whole project, on the files you name, or as a hook while an agent works.

Exit 0 clean · 2 findings · 1 the scan failed

ds:check · what it flags5 rules
hardcoded-color
A hex or rgb value where a token belongs.
arbitrary-value
A Tailwind arbitrary value for color, spacing, radius, shadow or type.
raw-svg
A hand-drawn icon instead of the Icon component.
hand-rolled-overlay
A modal or drawer built from a conditional mount, which cannot animate out.
raw-primitive-import
A page importing a primitive instead of its Au* wrapper.

An exception is written where it lives, with its reason.

§ IVThe CLI

Four commands. One of them only reads.

Start from the template, or bring Review into an app you have. Flags are in the CLI reference.

  • npx @auis/cli@latest my-product

    A new project, with every surface working.

  • npx @auis/cli@latest doctor

    Reports what Auis can do in a repository. Writes nothing.

  • npx @auis/cli@latest init

    Installs Review into an existing Next.js App Router app.

  • npx @auis/cli@latest uninstall

    Takes it back out.