git:20261028.3455b18 to git:20261028.776fc68

---

name: visant-frontend

description: 'Sub-skill do visant-killer: sistema de decisão de frontend da Visant, onde toda escolha de interface nomeia a variável de negócio que move. Entrega obrigatória é a tabela de classificação das rotas. Use em "redesenhar tela", "criticar interface", "hierarquia visual", "cortar excesso", "empty state".'

---

# Visant Frontend

A decision system for Visant product interfaces. The rule that generates every

other rule:

> **A design choice only ships if it names the business variable it moves.**

> If it moves nothing, it is decoration, and decoration costs attention.

## Inherited constraints (read before anything else)

This skill extends **[revenue-centric-design](https://github.com/heliocosta-dev/revenue-centric-design)**

by Richard ([@richardrx](https://x.com/richardrx)) — 101 principles on conversion,

activation, retention, pricing, and behavioral science, distilled with the

author's permission. That skill owns **persuasion mechanics**; this one owns the

**product interior and the build**. Where both apply, cite the RCD principle by

name and add the Visant-specific move.

> **Do not apply either skill to betting, casino, gambling, or real-money

> games-of-chance products.** This is a hard condition of the source author's

> reuse permission, not a stylistic preference. Decline and explain.

**Never modify the revenue-centric-design skill.** Reference it; do not edit it.

### The craft layer lives next door

**`visant-refine`** owns the elements this skill does not draw: charts, limit

meters, simulation sliders, gauges, sparklines, delta badges, metric tiles, and

the motion that carries a data change. The split is strict and load-bearing:

> **This skill decides IF the element exists and what variable it moves.**

> **`visant-refine` decides HOW it is drawn, and that every such element on the

> screen reads as one family.**

Load `visant-refine` whenever the ask is "add a chart", "show the limit", "make it

feel designed", "burilar", a slider that projects a scenario, or intelligent

animation. It defers to `dataviz` for chart correctness and to `visant-motion` for

the easing/duration SSoT — and it never justifies an element. If the *cut test*

below produces silence, the fix is deletion, not refinement: a beautiful chart of

a datum nobody uses is slop with better finishing, and it costs more attention

than the ugly version.

## Step 0 — Classify the surface (a written table, before any fix)

**This step's deliverable is a table on disk, not a conclusion in your head.**

That is a fix, not ceremony. This skill used to end Step 0 in a *question*, and

a question has no exit code — so in a real round someone ran `motion-lint` and

`refine-scan`, saw both at zero, called it a complete pass, and skipped this

skill entirely without noticing. An agent always gravitates to what closes at

zero. Now this closes too:

```bash

K=~/.claude/skills/visant-killer/scripts/killer-scan.mjs

node $K --init-report AUDIT.md <target> # one pre-filled row per route

# fill the table, THEN fix anything

node $K --report AUDIT.md <target>

```

`killer-scan` refuses to print "portão aberto" without that table, and rejects a

row whose business-variable column is blank, `-`, or "TBD" — filling it with

nothing is the bureaucratic version of skipping the step. Classifying *after*

you've edited isn't classifying, it's justifying.

**Se o script não estiver nesse caminho, o passo continua obrigatório.** Ele é

uma conveniência, não a razão do passo. Sem script:

```bash

ls ~/.claude/skills/visant-killer/scripts/killer-scan.mjs # existe?

```

Se não existir — repo não linkado, skill instalada solta, ambiente de cliente —

**escreva a tabela à mão** no `.md` do projeto, com as mesmas colunas: rota,

classe, variável de negócio, o que a persuasão é ali. Uma linha por rota, coluna

de variável nunca vazia. Depois siga o resto da skill normalmente.

O que não vale é o que já aconteceu: não achar o script e tratar o passo como

pulado. Gate cuja ferramenta sumiu não vira licença — vira trabalho manual.

Applying one surface's instincts to another is the most expensive frontend error

Visant makes. Classify first; the rules follow from the class.

| Class | Revenue variable | Examples | Persuasion is | Read |

|---|---|---|---|---|

| **A. Acquisition** | conversion rate | client sites, landing, pricing, onboarding, upgrade prompts | **the job** — a hero has work to do | [acquisition-surface.md](references/acquisition-surface.md) |

| **B. Work** | throughput × decision quality | lead queues, kanban, editors, session runners, admin | **noise** — every px of chrome is one less item on screen | [work-surface.md](references/work-surface.md) |

| **C. Trust** | retention / money not lost | billing, destructive actions, data writes, settings | **irrelevant** — reversibility and correctness rule | [trust-surface.md](references/trust-surface.md) |

Classic failure: a gradient hero band on a work queue. It is right on `/pricing`

and wrong on `/leads` — same component, opposite verdict.

When a screen mixes classes, classify **per region**, not per page. A billing row

inside a settings page is C even though the page is B.

## The spine

Twelve principles. Each names its variable. RCD lineage marked where it exists.

1. **Classify before you design.** The surface class determines which rules

apply. Skipping this produces confident, wrong work. → *all*

2. **Neutrality is omission — inside too.** One primary action per surface. The

datum that drives the decision gets the most typographic weight. **A disabled

primary button is a lie** — replace it with quiet text or a different

affordance. *(RCD 1)* → *conversion, throughput*

3. **Weight is contextual, not intrinsic.** The same datum earns different weight

on different surfaces, depending on whether the user is **choosing** or

**processing**. A score is the scan axis in a grid and mere context in an

already-ordered queue. → *decision quality*

4. **The default is the strategy you shipped.** A default sort, filter, or plan

is a recommendation with your name on it. Make it good, and make its rule

legible in one line where the user picks it. *(RCD 6)* → *decision quality*

5. **Zero is not information.** A metric reading zero does not render. Neither

does a status badge that 100% of rows carry. → *density*

6. **Chrome is a budget.** Count vertical pixels before the first item of real

content. Spend generously inside the content; pay for it by cutting chrome,

not by cutting content. → *throughput*

7. **Hover reveals; hover never relayouts.** Reserve the space permanently, float

the revealed control over it. Nothing revealed only on hover may be the sole

path to an action — `focus-visible` reaches everything. → *throughput, a11y*

8. **Retention is built in the interior.** *(RCD 7)* RCD stops at the cancellation

flow; retention is actually earned on the screen the user stares at daily.

Keyboard, latency, and rhythm are retention features. → *retention*

9. **Your UI must not lie to your database.** An optimistic write that records an

action which did not happen corrupts the metric you steer by. Data integrity

is a revenue rule, not a correctness footnote — you cannot optimize a number

you are falsifying. → *every variable*

10. **Absence is an argument.** An empty state can be the pitch. Before adding a

visual element, ask **where it will be missing**, not what it costs —

coverage beats cost. An element absent exactly on your best records is worse

than no element. *(RCD 4)* → *conversion*

11. **Find the optimal play.** Model the user's best move and check whether it

pays you. *(A real case of this shape: a product whose optimal user play was

zero revenue — every rule worked, the combination leaked. See

acquisition-surface.md.)* → *monetization*

12. **Four layers, one sentence.** Landing, onboarding, product, and pricing must

say the same thing. Misalignment here makes every downstream design decision

unwinnable. → *all*

### The cut test

Before shipping a rule, a component, or a pixel, name its variable. No variable

named → it does not ship. Apply this to your own recommendations too.

## Non-negotiables

- **No new design-system components without explicit approval.** Reuse and

- **Optional field starts collapsed, behind a button.** Always. A field drawn in

full — label, border, height — *says* "fill me in". When it is optional that

claim is false, and the cost is paid in reading time by every person who has to

decide and then decline. Render a ghost `+ <Noun>` button; expand on click.

Two rules make it safe: it **auto-expands when it already has content** (a

filled field hidden reads as data loss), and the button names the *noun*, not

the action. This is the same cut as "dead controls don't render", one step

earlier — the form should show exactly what it demands. *(spine 2, 5)* →

*completion rate*

- **Verify before acting on a claim.** Read the code and confirm a reported defect

is real before refactoring around it. Diagnose with `file:line` — evidence, not

opinion.

- **Typecheck and build must pass before calling anything done.** See

[verification.md](references/verification.md).

- **Run the design detector before opening the screen.** `npx impeccable detect

components/ app/` front-loads the generic-AI tells (gradient text, purple

gradients, bounce easing, accent-on-rounded, broken images). Triage findings at

`file:line` — it is a curator, not an oracle. It complements `npm run

audit:design`, not replaces it. See [verification.md](references/verification.md).

- **Measure the narrow viewport; never judge it by eye.** Any surface a phone can

reach gets `documentElement.scrollWidth − innerWidth` measured at 390px with

real data. Positive is a defect, and **re-measure after each fix** — responsive

changes trade one overflow for another. See [verification.md](references/verification.md).

- **Report faithfully.** Say what was not verified. A screen that compiles is not

a screen anyone has seen.

### O caminho padrão no visantlabs-os (DS 2026-10)

Peças que a rodada de 2026-10 achou reescritas à mão em dezenas de lugares.

Usar a peça é a regra; escrever de novo à mão é o defeito que o killer procura

(`slop-catalog` 24 a 26 e 33). **Contrato inteiro, tokens de cromo e a regra do

editor escuro: [ds-visantlabs-os.md](references/ds-visantlabs-os.md).**

| Precisa de… | Use | Não escreva |

|---|---|---|

| card de mídia | `MediaTile` (`ui/MediaTile.tsx`) | `<img>` + degradê + `scale` no hover + ações `opacity-0`, nem `div` em volta pra drag/`data-*` |

| escolha única entre 2 e 5 opções | `SegmentedControl` (`size="xs" scrollable` em painel estreito) | linha de botões com ativo pintado à mão |

| dialog | `Modal` (`bodyClassName` pra conteúdo de borda a borda) | portal à mão, margem negativa contra o padding |

| a ação principal de ferramenta ou painel | `Button variant="primary"` | `bg-brand-cyan/10 border-brand-cyan/30` à mão. Ciano cheio é `brand`, só em vitrine, nunca no mesmo painel |

| área de upload | `Dropzone` | `div` com `onDrop` |

Três regras que mais quebram:

- **Raio tem três nomes:** `md` controle, `xl` superfície, `full` pílula.

`node scripts/codemod-radius-scale.mjs --apply` converte o resto sem mudar

pixel (só o `3xl` muda de valor).

- **Peso:** `semibold` só no título principal da região e em número de

destaque; o resto do chrome é `medium`. Opacidade crua (`white/NN`) vira

token pelo mapa do reference.

- **Editor sempre escuro declara `dark` no root e usa tokens.** Neutro fixo

(`bg-neutral-950`, `neutral-800`) com token dentro quebra no tema claro.

### Verificado em produção

Casos reais que confirmam as espinhas, cada um com a variável que protege:

**[19 casos em references/producao-verificada.md](references/producao-verificada.md)**.

Os quatro que mais se repetem: preço escrito na copy é afirmação sobre o banco;

papel diz *pode ver*, posse diz *de quem é a ação*; vazio-silencioso é a mentira

dominante e ela quase sempre é contada uma camada abaixo; e dois números de

unidades diferentes lado a lado sem rótulo corrompem a leitura.

## Navigation

| Working on… | Read |

|---|---|

| Queues, lists, editors, dashboards, admin, keyboard flow | [work-surface.md](references/work-surface.md) |

| Formulários e dialogs: despoluir campos, o que fazer quando a tela recusa | [work-surface.md](references/work-surface.md) — seções "Formulário: campo vazio não é campo" e "O que a tela diz quando recusa" |

| Client sites, landing, onboarding, pricing, upgrade paths | [acquisition-surface.md](references/acquisition-surface.md) |

| Billing, destructive actions, data writes, confirmations | [trust-surface.md](references/trust-surface.md) |

| Component library / registry showcase / demo of a piece / kits de peças (a peça É o produto) | [vitrine-de-componentes.md](references/vitrine-de-componentes.md) |

| Implementation in Tailwind v4 + React + Radix | [stack-tailwind-react.md](references/stack-tailwind-react.md) |

| visantlabs-os: MediaTile, SegmentedControl, Modal, Button, Dropzone, tokens de cromo, editor escuro | [ds-visantlabs-os.md](references/ds-visantlabs-os.md) |

| Charts, limit meters, simulation sliders, crafted elements, motion on a data change | load the **`visant-refine`** skill |

| Checking the work; height budget; keyboard audit; design detector | [verification.md](references/verification.md) |

| Running or writing a design critique | [critique.md](references/critique.md) |

For persuasion mechanics on acquisition surfaces — awareness levels, decoy

effect, GBB pricing, social proof, trial design — load the

`revenue-centric-design` skill and cite the named lever.