@etus/seven-skill 0.1.0-beta.3 → 0.1.0-beta.4

package/.cursor/skills/seven/reference/adapt.md

@@ -0,0 +1,34 @@
+# Adapt — rethink for another web context
+
+Adapt an existing React 19 interface to another viewport, input mode, orientation, density, connection, or usage context. This workflow is web-only; native iOS, Android, Svelte, and other framework adapters are intentionally outside Seven's contract.
+
+## Compare contexts
+
+Document the source and target for:
+
+- user job and urgency;
+- available width/height and orientation;
+- pointer, touch, keyboard, and hover capabilities;
+- information density and content extremes;
+- connectivity and device performance;
+- which behaviors must remain identical.
+
+Adaptation is not proportional scaling. Preserve information architecture unless product evidence requires a change, but recompose how it is exposed.
+
+## Apply with Seven
+
+- Start from narrow, content-driven layout rules and add complexity with container or `min-width` queries.
+- Use existing responsive behavior and props on Seven components before custom CSS.
+- Reflow side-by-side regions, keep reading and DOM order logical, and prevent horizontal page scroll.
+- Keep primary functionality available on every supported width; use disclosure, not deletion.
+- Provide at least 44×44 CSS px touch targets for coarse pointers without forcing all desktop density to match.
+- Never rely on hover for meaning or access. Use `(hover: hover)` only for enhancements.
+- Bound wide desktop content; do not stretch forms or prose across a 4K canvas.
+- Handle safe areas and the on-screen keyboard when the target includes mobile web.
+- Use responsive images with correct dimensions, `srcset`/`sizes`, and art direction only when crops genuinely differ.
+
+Do not hardcode device names or fork separate mobile/desktop component trees without a demonstrated semantic need.
+
+## Verify
+
+Test the actual supported breakpoint boundaries, 320 px, zoomed desktop, portrait/landscape, keyboard-only, coarse/fine pointer, long pt-BR strings, reduced motion, and at least one real lower-performance device when risk warrants it. Run Seven checks on all changed files and browser checks against the rendered target.

package/.cursor/skills/seven/reference/animate.md

@@ -0,0 +1,31 @@
+# Animate — motion with a job
+
+Add motion only when it explains feedback, state, hierarchy, or spatial continuity. Read [motion-design.md](motion-design.md) completely before editing.
+
+## Motion thesis
+
+Before implementation, identify:
+
+- the state or relationship that is currently hard to understand;
+- the smallest motion that would clarify it;
+- frequency, interruption behavior, and performance budget;
+- reduced-motion equivalent;
+- the existing Seven component or motion token that owns the behavior.
+
+If removing the animation would lose no meaning or confidence, do not add it.
+
+## Seven constraints
+
+- Routine feedback uses `var(--duration-fast)`; normal transitions use `var(--duration-normal)`; bounded surface entries may use `var(--duration-slow)`.
+- Use `var(--ease-default)` or the documented Seven exit/entry easing. No bounce, spring, elastic, wiggle, marquee, pulsing chrome, or decorative looping.
+- Animate transform and opacity by default. Do not animate width, height, top, left, margin, or other layout-driving properties.
+- Preserve content visibility in the non-enhanced state.
+- Use the existing tactile micro-press. Do not layer a second hover-lift language over it.
+- Loading is a Seven Skeleton or Spinner appropriate to the region, not a bespoke animation.
+- Reduced motion must keep state changes perceivable with near-instant transitions.
+
+Do not add a motion dependency for behavior the current stack or Seven component already provides. Any new dependency or browser API with partial support requires explicit user approval and a functional fallback.
+
+## Verify
+
+Exercise repeated triggers, interruption, rapid reversal, keyboard activation, reduced motion, background-tab behavior, and a representative mid-range device. Confirm no layout shift, hidden-at-rest content, or long-task illusion. Run Seven checks and relevant interaction tests.

package/.cursor/skills/seven/reference/app-shell.md

@@ -0,0 +1,152 @@
+# App shell — Sidebar + Topbar (Figma-faithful)
+
+The Seven application shell. Source of truth: Figma "Core Components — Seven", Sidebar set `2472:372` and Topbar set `1403:15038`. When the project has `@etus/ui`, compose `<Sidebar>` / `<Topbar>` from the package — never reimplement. When prototyping without the package, reproduce the nominal values below exactly.
+
+## The three laws that kill most drift
+
+1. **Chrome has no outline.** Sidebar and topbar have **no border and no shadow** — they sit on the same `var(--surface)` (#fafafa) plane. The ONLY divider in the shell is the **`border-left` of the secondary panel** (1 px `var(--border)`), owned by the panel, not the rail. Never add `border-r` to the sidebar or `border-b` to the topbar.
+2. **Chrome is surface, controls are white cards.** The shell background is `var(--surface)`, never white. Interactive controls INSIDE the chrome (selects, search, account switch, toggles) are white cards: `bg-[color:var(--background)]` + 1 px `var(--input)`/`var(--border)` + `rounded-[var(--radius-md)]` (8 px). That contrast — flat grey chrome, bordered white controls — is the Seven shell signature.
+3. **The shell is L-shaped, never T-shaped.** `Sidebar` and `SidebarInset` are siblings inside one `SidebarProvider`; `Topbar` is the first chrome child inside `SidebarInset`, so it starts at the sidebar's right edge instead of spanning above it. Never place `Topbar` outside the provider/inset, wrap it above both columns, or recreate the sidebar offset with `ml-*`, `pl-*`, `left-*`, `width: calc(...)`, or duplicated layout state.
+
+```text
+┌──────────┬──────────────────────────────┐
+│ Sidebar  │ Topbar                      │
+│ full     ├──────────────────────────────┤
+│ height   │ Content                     │
+└──────────┴──────────────────────────────┘
+```
+
+## Sidebar state model
+
+All states: `bg-[color:var(--surface)]`, padding `12px` horizontal / `24px` vertical, column layout with `justify-between` (top group / bottom group). No border, no shadow.
+
+The provider has three independent state owners. Do not mirror or derive one
+from another:
+
+| State          | Owns              | Required behavior                                                                                    |
+| -------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
+| `open`         | Desktop panel     | `single`: 200↔64px by default. `dual`: shows/hides only the 216px secondary panel.                   |
+| `openMobile`   | Sheet below 768px | Starts closed. `SidebarTrigger.aria-expanded` must read this state on mobile, never `open`.          |
+| `railExpanded` | Dual Rail overlay | Transient. Effective state is hover **OR** focus-within; Escape dismisses it. It is never persisted. |
+
+`mode` defaults to `single`. `collapsible` defaults to `icon`; `offcanvas` is
+explicit opt-in and `none` is static. There is no undefined "legacy" third mode.
+
+| State                | Width                                 | Notes                                                                                      |
+| -------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------ |
+| Collapsed (rail)     | **64 px**                             | icons only                                                                                 |
+| Expanded             | **200 px**                            | labels visible                                                                             |
+| Secondary            | **280 px** total                      | rail 64 + panel 216, panel carries `border-l`                                              |
+| Expanded + Secondary | rail expands 64→200 **as an overlay** | panel does not move (footprint stays 280); the expanded rail covers the panel's `border-l` |
+
+Rail contents (top→bottom): Logo 32×32 (icon 24) · AccountSwitch · nav items (gap 20) · … · color-mode toggle (pill 36×24, track `var(--muted)`, white 20 px knob, 12 px icon) · settings item · Avatar 32.
+
+- **Rail item**: 36×36 (20 px Lucide icon + 8 px padding), radius **4 px** (component `sm`). Active/hover colors come from `--sidebar-rail-item-bg-hover` and `--sidebar-rail-item-fg-active`. Expanded item fills the rail width (176 px inside the 200 px rail).
+- Every `SidebarRailButton` has a non-empty `label`. The primitive emits it as
+  `aria-label` + `data-label`, shows it as text only while expanded, and hides
+  the tooltip while expanded. An icon-only button without `label` is invalid.
+- Navigation is one interactive element:
+  `<SidebarRailButton asChild label="Relatórios"><Link … /></SidebarRailButton>`.
+  Never render `<Link><SidebarRailButton /></Link>`.
+- Hover and keyboard focus are simultaneous sources. `mouseleave` does not
+  collapse while focus remains inside; `focusout` does not collapse while the
+  pointer remains over the Rail.
+- `SidebarRail` (without `Content`) is the thin click target that toggles the
+  panel. It is not draggable and does not resize.
+- **AccountSwitch**: white card, 1 px `var(--input)`, radius 8; brand logo 24×24 radius 4. Collapsed: logo only (px 8). Expanded: logo + account name (16 px, `var(--muted-foreground)`) + ChevronsUpDown 16.
+
+### Secondary panel (216 px)
+
+`bg-[color:var(--surface)]` + **`border-l` 1 px `var(--border)`** + padding top 28 / bottom 80 / x 8.
+
+- Page title: 16 px Inter Bold, `var(--foreground)`.
+- Group label: 12 px `var(--muted-foreground)` + 12 px chevron (collapsible). Groups separated by 1 px dividers.
+- **Panel item**: height **30 px**, radius 4, text 14 px. Active: `bg-[color:var(--primary-subtle)]` (#d1faeb) with `#052e1f` foreground — NOT full mint (mint fill is rail-only).
+- Indent by level: primary `px-8` · secondary `pl-28` · tertiary `pl-48`. Dropdown items lead with a 12 px chevron.
+
+## Topbar (3 states)
+
+Root: `bg-[color:var(--surface)]`, padding `32px` horizontal / `8px` vertical, full width, items centered with space-between. **No border, no radius, no shadow on the root.**
+
+- **Leading**: Breadcrumb — Home icon 15 px, ChevronRight separators, items 14 px `var(--muted-foreground)`, current page 14 px `var(--foreground)`.
+- **Trailing** (gap 16): DatePicker + Selects as white inputs (1 px `var(--input)`, radius 8, `px-12 py-8`, 14 px text) · Search and Bell as **36×36 outline toggles**: white bg, 1 px `var(--border)`, radius 8, 16 px icon. These bordered rounded controls are what makes the topbar read correctly — a borderless ghost icon row is off-system.
+- **Scrolled** state: adds a 1×17 divider + ghost refresh chip ("Atualizado há 1 min", disabled foreground, RefreshCw 16).
+- **Search focused**: search expands to a 208 px input with mint focus ring (`var(--ring)` border + 4 px `rgba(25,230,153,0.3)` shadow); filters compact to fixed 208 px.
+
+## Content area
+
+The page content sits next to/below the chrome as **cards on the canvas** — white `var(--background)` surfaces with the workhorse 1 px `var(--border)` (see [product.md](product.md)). The shell never separates itself from content with its own border; the content cards' borders do that work.
+
+## @etus/ui mapping
+
+```tsx
+import { LayoutDashboard } from "lucide-react";
+import {
+  Sidebar,
+  SidebarProvider,
+  SidebarRailContent,
+  SidebarRailButton,
+  SidebarPanelContent,
+  SidebarPanelItem,
+  SidebarPanelGroup,
+  SidebarInset,
+  SidebarTrigger,
+  Topbar,
+  TopbarLeading,
+  TopbarTrailing,
+} from "@etus/ui";
+
+<SidebarProvider mode="dual">
+  {" "}
+  {/* rail + secondary panel */}
+  <Sidebar>
+    <SidebarRailContent>
+      {" "}
+      {/* borderless; expands on hover/focus as overlay */}
+      <SidebarRailButton asChild label="Visão geral" tooltip="Visão geral">
+        <a href="/">
+          <LayoutDashboard />
+        </a>
+      </SidebarRailButton>
+    </SidebarRailContent>
+    <SidebarPanelContent>…</SidebarPanelContent>{" "}
+    {/* carries the border-l divider */}
+  </Sidebar>
+  <SidebarInset>
+    <Topbar variant="default">
+      {" "}
+      {/* or "filters"; never border/shadow */}
+      <TopbarLeading>
+        <SidebarTrigger className="md:hidden" />{" "}
+        {/* opens the Sheet below 768px */}
+        {/* Breadcrumb */}
+      </TopbarLeading>
+      <TopbarTrailing>{/* filters + search/bell toggles */}</TopbarTrailing>
+    </Topbar>
+    <main>{/* bordered/rounded content surface */}</main>
+  </SidebarInset>
+</SidebarProvider>;
+```
+
+`mode="single"` renders the classic one-panel sidebar (also borderless), and is
+the runtime default. Its default collapse is `icon` (200→64px).
+`collapsible="none"` is the only case that does not need a trigger because the
+sidebar never becomes hidden. In every collapsible shell, the mobile trigger
+belongs in `TopbarLeading`; a trigger trapped inside the closed mobile Sheet
+cannot open it.
+
+Below 768 px, keep the trigger visible and collapse long breadcrumbs/actions to
+a current-page label or responsive menu. In `dual`, hide
+`SidebarRailContent`; render `SidebarPanelContent` expanded at 100% of the
+Sheet width regardless of desktop `open`. `TopbarLeading` must not overflow
+underneath `TopbarTrailing`; hiding the Sidebar while leaving desktop-only
+chrome wider than its slot still produces a broken mobile shell.
+
+The local detector rule `sidebar-topbar-shell` rejects a Topbar outside
+`SidebarInset`, a bordered/shadowed shell Topbar, the T-shaped rendered
+geometry, a collapsible mobile shell with no visible Topbar trigger, and
+overflowing mobile leading chrome. `sidebar-rail-behavior` rejects unlabeled
+Rail buttons, nested Link/button markup, mobile ARIA drift, and a collapsed or
+narrow panel inside an open mobile Sheet.
+
+Copy in pt-BR: `Visão Geral`, `Configurações`, `Buscar...`, `Tema Claro`.

package/.cursor/skills/seven/reference/audit.md

@@ -0,0 +1,122 @@
+# Audit
+
+Run systematic technical quality checks on a Seven surface or component and generate a report. The audit documents issues; it does not fix them. Hand findings to `polish` or to direct implementation.
+
+## Scope
+
+Code-level audit, not design critique. Check what is measurable and verifiable against `@etus/ui`, `@etus/tokens`, and Seven's documented rules.
+
+## Five-dimension diagnostic scan
+
+Score each dimension 0-4 using the criteria below. The detector ships rule IDs you can cite directly.
+
+### 1. Accessibility (a11y)
+
+Check for:
+
+- Text contrast ratios below 4.5:1 (or 3:1 for large text). Verify against the OKLCH math from `@etus/tokens`, not eyeballed.
+- Missing ARIA roles, labels, or states on interactive elements built from non-semantic primitives.
+- Keyboard traps, missing focus indicators, illogical tab order.
+- Improper heading hierarchy, missing landmarks, `<div onClick>` instead of `<button>`.
+- Image and icon-only buttons without accessible names.
+- Forms with inputs missing labels, error messages missing `aria-describedby`, required state not announced.
+- `prefers-reduced-motion` not honored.
+
+Scoring: 0 = fails WCAG A, 1 = major gaps, 2 = partial, 3 = WCAG AA mostly met, 4 = AA fully met and approaching AAA.
+
+### 2. Performance
+
+Check for:
+
+- Layout thrashing in loops.
+- Animation on CSS layout properties (`width`, `height`, `top`, `left`). Transform and opacity only.
+- Unbounded blur, filter, shadow effects that visibly drop frames.
+- Images without `loading="lazy"`, unoptimized assets, missing dimensions.
+- Unnecessary re-renders, missing `useMemo` or `React.memo` where measurement shows benefit (do not memoize speculatively).
+- Heavy imports pulled in eagerly when a dynamic import would do.
+
+Scoring: 0 = severe issues, 1 = major problems, 2 = partial optimization, 3 = mostly optimized, 4 = lean and fast.
+
+### 3. Theming
+
+Check for:
+
+- Hardcoded color literals in runtime code. Hex inside `packages/tokens/sources/` is fine; anywhere else is drift. Detector rule: `hardcoded-color-not-token`.
+- Pure `#000` and `#fff`. Detector rule: `pure-black-or-white`.
+- Tailwind v4 arbitrary values referencing color tokens without the `color:` hint. Detector rule: `missing-color-type-hint`.
+- Font-size or line-height arbitrary values without `length:`. Detector rule: `missing-length-type-hint`.
+- `leading-none` combined with a typed length-variable text utility. Detector rule: `leading-none-with-length-var`.
+- Wrong token used: `var(--background)` where `var(--muted)` would have read better; mixing token families.
+- Dark mode visually broken: tokens that look fine in light fail at AAA contrast in dark, or vice versa.
+
+Scoring: 0 = no token usage, 1 = minimal tokens, 2 = partial token coverage with gaps, 3 = good token usage with minor literals, 4 = full token system with verified dark mode.
+
+### 4. Responsive design
+
+Check for:
+
+- Fixed widths that break on narrow viewports.
+- Touch targets below 44 x 44.
+- Horizontal scroll on mobile.
+- Text scaling: layout breaks when the user bumps base font size.
+- Missing or wrong-direction breakpoints (mobile-first vs desktop-first inconsistency in the same component).
+
+Scoring: 0 = desktop-only, 1 = major issues, 2 = partial, 3 = good with minor issues, 4 = fluid across viewports.
+
+### 5. Anti-patterns
+
+Run the deterministic detector against the surface or component:
+
+```bash
+seven check --file <path>
+```
+
+Then check the report against the Seven rule set:
+
+| Detector rule ID               | Catches                                                                 |
+| ------------------------------ | ----------------------------------------------------------------------- |
+| `non-inter-font`               | Font family other than Inter or JetBrains Mono in consumer code         |
+| `hardcoded-color-not-token`    | Hex, rgb, hsl, OKLCH literal where a token exists                       |
+| `missing-color-type-hint`      | Tailwind v4 arbitrary color value missing the `color:` hint             |
+| `missing-length-type-hint`     | Tailwind v4 arbitrary length value missing the `length:` hint           |
+| `leading-none-with-length-var` | `leading-none` combined with a typed length-variable text utility       |
+| `fuchsia-in-ui-chrome`         | Fuchsia color on UI chrome (allowed on `data-role="chart"` and `<svg>`) |
+| `pt-pt-vocab`                  | European Portuguese vocabulary in pt-BR surfaces                        |
+| `pure-black-or-white`          | `#000`, `#fff`, `rgb(0,0,0)`, `rgb(255,255,255)` in consumer code       |
+
+Deep detector rules also include `missing-tactile-press`, `radius-mixed-scales`, `pill-on-button`, `forbidden-em-dash`, `gradient-text-decorative`, `side-stripe-border`, `non-lucide-icon`, `emoji-in-chrome`, `sidebar-topbar-shell`, and `sidebar-rail-behavior`.
+
+Scoring: 0 = five or more findings, 1 = three or four findings, 2 = one or two findings, 3 = clean detector pass, 4 = clean detector pass plus no additional manual issues evident in review.
+
+When a trusted development page is available, add rendered evidence with `seven check <url>`. URL checks require the optional Puppeteer dependency and a compatible Chrome binary. If the package manager blocked Puppeteer's browser install script, report that activation requirement instead of pretending the rendered audit ran. Static file checks and the local pre-commit gate remain available without a browser.
+
+## Report shape
+
+For each dimension, write:
+
+```
+### <Dimension> — <score>/4
+
+**Findings**
+- <Finding 1 with file:line reference and detector rule ID when available>
+- <Finding 2>
+
+**Suggested fixes**
+- <Concrete next step keyed to the finding>
+```
+
+End with:
+
+```
+### Overall — <average>/4
+
+Top 3 actions:
+1. ...
+2. ...
+3. ...
+```
+
+## Refusals
+
+- "Just fix the issues you find" — Audit documents, polish fixes. Surface this boundary and offer to invoke `polish` after the audit closes.
+- "Skip the anti-patterns dimension, it always fires" — If anti-patterns always fire on a surface, the surface needs polish, not a softer audit. Run the dimension; record the findings.

package/.cursor/skills/seven/reference/bolder.md

@@ -0,0 +1,34 @@
+# Bolder — stronger hierarchy, same Seven
+
+Increase the conviction of one named target without redesigning its neighbors or adding a visual language the installed Seven release does not own.
+
+## Diagnose first
+
+Identify why the target reads weak:
+
+- competing primary actions;
+- every element using the same text role, surface, or density;
+- the target using a weaker variant than its job requires;
+- insufficient contrast between section, content, and supporting metadata;
+- the strongest Seven composition already used elsewhere but omitted here.
+
+State what must remain unchanged. If the scope is ambiguous, ask before editing.
+
+## Amplify with existing authority
+
+- Promote one element through an existing component variant, Text role, semantic token, or spatial role.
+- Reduce surrounding competition instead of making everything louder.
+- Use mint primary only for the true primary action or selected state; do not spread brand fill across unrelated surfaces.
+- Strengthen structure with grouping, alignment, scale, weight, and deliberate whitespace before adding decoration.
+- Preserve copy claims, interactions, accessible names, and state behavior.
+
+Never add a new color, font, shadow, radius, illustration style, variant, or arbitrary scale value. If the current Seven contract cannot express the needed hierarchy, stop and report the precise design-system gap.
+
+## Verification
+
+- Everything outside the agreed target is byte-for-byte or visually unchanged.
+- The primary job is recognizable in five seconds and keyboard order remains logical.
+- The target is unmistakably Seven, not a new visual identity.
+- `seven check --file` passes for every changed UI file.
+
+Finish with `polish` only when the user asks for the broader final pass.

package/.cursor/skills/seven/reference/brand.md

@@ -0,0 +1,31 @@
+# Brand register
+
+Use for public-facing ETUS/Seven marketing, launch, campaign, and storytelling surfaces. The installed Seven release remains the visual authority; this register changes composition and emphasis, not tokens or component contracts.
+
+## Bar
+
+The surface should feel recognizably ETUS before the logo is read: direct, technically confident, energetic through mint/lime contrast, and disciplined enough that the product remains credible. Avoid the generic AI-marketing formula of eyebrow chip, oversized slogan, radial glow, gradient text, three equal feature cards, and repeated centered sections.
+
+## Composition
+
+- Build a specific narrative: problem, concrete evidence, product mechanism, proof, action.
+- Use asymmetry or editorial pacing only when it improves the story and responsive reading order.
+- One focal visual idea is enough. Repeat a structural motif deliberately instead of adding unrelated decoration per section.
+- Use real product UI, data, customer evidence, or authored imagery. Do not ship placeholder browser mockups, abstract orb gradients, or icon-tile stacks as proof.
+- Keep calls to action scarce and hierarchical. One primary action per decision region.
+
+## Seven identity
+
+- Mint and lime are the brand pair. Use semantic Seven token roles; never hardcode the swatches or create campaign-local ramps.
+- Inter remains the typeface. Use the shipped display/heading roles where they exist; a campaign does not justify a new font.
+- Product screenshots and embedded controls retain product component styling. Do not repaint Seven UI to match a hero effect.
+- Motion may author one focal moment, but it obeys Seven tokens, reduced motion, performance budgets, and no bounce/looping-chrome rules.
+- Generated or third-party assets require provenance, appropriate license, alt text, responsive sizes, and explicit user approval before being added.
+
+## Copy
+
+Lead with concrete outcomes and evidence. Avoid vague superlatives, aphoristic sentence fragments, marketing buzzwords, theater phrases, and unsupported claims. Public copy may be more expressive than product chrome but remains Brazilian Portuguese unless product context says otherwise.
+
+## Verification
+
+Critique the narrative and rendered composition separately from the deterministic scan. Test mobile reading order, real content, dark/light behavior where supported, reduced motion, asset loading, SEO semantics, and conversion actions. Any needed visual primitive missing from Seven is a design-system proposal, not a local override.

package/.cursor/skills/seven/reference/clarify.md

@@ -0,0 +1,76 @@
+# Clarify
+
+Improve UX copy in Seven surfaces. Brazilian Portuguese, sentence case, no trailing periods, imperative leads, plain language. The voice is direct, decisive, brazilian.
+
+## Scope
+
+Clarify rewrites chrome copy: button text, labels, empty states, validation errors, toast messages, menu items, navigation, table column headers, breadcrumbs, tabs, badges, tooltips, dialog titles and descriptions.
+
+Clarify does not rewrite body prose, long-form content, or marketing copy unless the user explicitly includes them. Public-facing copy must also load the brand register.
+
+## Rewrite rules
+
+### Voice
+
+- Direct. The label says what the action does. `Adicionar conta`, not `Clique aqui para adicionar uma nova conta`.
+- Decisive. No `talvez`, `poderia`, `seria possível`. If the system suggests an action, it commits.
+- Concrete. Specific over abstract. `Salvo às 14:32` beats `Alterações salvas com sucesso`.
+
+### Case
+
+Sentence case across every chrome surface. Capitalize only the first word and proper nouns. Acronyms (KPI, OTP, OAuth, SSO) stay uppercase.
+
+### Punctuation
+
+- No trailing periods on chrome labels (buttons, menu items, breadcrumbs, table headers, badges, tabs, captions).
+- Periods stay in body prose inside paragraphs.
+- No em-dashes in prose voice. Use periods, commas, or restructure the sentence.
+
+### Language
+
+- Pt-BR for chrome. No pt-PT vocabulary (`ficheiro`, `telemóvel`, `ecrã`, `tu` as pronoun).
+- English only for code identifiers, file paths, API names, and developer-facing technical docs.
+
+## Pattern library
+
+| Surface             | Before (drift)                          | After (Seven)                                      |
+| ------------------- | --------------------------------------- | -------------------------------------------------- |
+| Primary button      | `Clique aqui para salvar.`              | `Salvar`                                           |
+| Primary button      | `Adicionar nova conta`                  | `Adicionar conta`                                  |
+| Destructive button  | `Por favor, excluir esta conta`         | `Excluir conta`                                    |
+| Cancel button       | `Cancelar operação`                     | `Cancelar`                                         |
+| Toast (success)     | `Alterações salvas com sucesso!`        | `Conta atualizada`                                 |
+| Toast (error)       | `Algo deu errado`                       | `Não foi possível salvar. Tente novamente.`        |
+| Empty state         | `Nenhum dado disponível no momento`     | `Nenhuma conta. Adicione a primeira para começar.` |
+| Placeholder         | `Digite o seu email aqui`               | `nome@email.com`                                   |
+| Validation error    | `O campo email é um campo obrigatório.` | `Email obrigatório`                                |
+| Menu item           | `Editar este item.`                     | `Editar`                                           |
+| Table column header | `Nome do usuário.`                      | `Nome`                                             |
+| Tab                 | `Configurações gerais`                  | `Geral`                                            |
+| Badge (status)      | `Ativo no momento`                      | `Ativo`                                            |
+| Breadcrumb          | `Página inicial > Contas`               | `Início › Contas`                                  |
+
+## Numbers, dates, currency
+
+- Numbers: `1.234,56` (Brazilian convention).
+- Dates: `dd/mm/yyyy` in chrome (`12/03/2026`). ISO `2026-03-12` in data tables and logs.
+- Currency: `R$ 1.234,56` with non-breaking space.
+- Relative time for recent events: `há 2 minutos`, `há 1 hora`. Absolute date past 24 hours.
+
+## Workflow
+
+1. List the chrome surfaces in scope (buttons, labels, empty states, errors, toasts).
+2. For each surface, apply the pattern library. Surface anything that does not fit the pattern.
+3. Verify the rewrites against the detector's `pt-pt-vocab` rule:
+
+   ```bash
+   seven check --file <path>
+   ```
+
+4. Write the rewrites as a diff or table; do not commit until the user confirms.
+
+## Refusals
+
+- "Add 'por favor' to every button to be polite" — Seven voice is direct. Politeness reads as hedging. Buttons are imperatives. Decline politely and explain.
+- "Use English buttons because the team is bilingual" — Pt-BR is the default for chrome. Surface this as a register-layer decision; do not silently switch languages.
+- "Add an em-dash for emphasis in the empty state" — No em-dashes in Seven prose. Restructure the sentence.

package/.cursor/skills/seven/reference/color-and-contrast.md

@@ -0,0 +1,84 @@
+# Color and contrast
+
+Seven's color truth lives in `packages/tokens/dist/tokens.css`. Every runtime value is a CSS custom property derived from OKLCH math, never a hex literal.
+
+## Brand colors
+
+- **Mint** — `var(--brand-primary-500)`. The primary brand. Used for primary buttons, active states, focus rings, brand surfaces.
+- **Lime** — `var(--brand-secondary-500)`. The secondary brand. Used for secondary buttons, highlight bars, supporting accents.
+
+Mint and lime are the only brand colors. Do not introduce a third, do not substitute, do not blend.
+
+## Status ramps
+
+Status colors come from the semantic ramps only:
+
+- `var(--destructive)` for errors, destructive actions, deletion confirmations.
+- `var(--warning)` for caution, expiring tokens, soft warnings.
+- `var(--success)` for confirmation, completion, healthy state.
+- `var(--info)` for neutral information.
+
+Do not improvise red, yellow, green, blue values outside these tokens.
+
+## Fuchsia
+
+`#d946ef` style fuchsia is reserved for charts. Never UI chrome. The detector flags fuchsia chroma on buttons, inputs, borders, and other chrome elements; the only allowed habitat is inside `<svg>` and elements tagged `data-role="chart"`.
+
+## Neutrals
+
+Seven neutrals are true grey on the OKLCH ramp. No warm tint, no cool tint, no `oklch(... 0.005 280)` blue-shifted greys that ship as default in some libraries. The ramp goes from `var(--background)` at the top to `var(--foreground)` at the bottom; `var(--muted)`, `var(--muted-foreground)`, `var(--border)` populate the middle.
+
+Pure `#000` and `#fff` are banned. Use the tinted tokens.
+
+## Raw Tailwind palette utilities
+
+Do not use raw Tailwind color utilities in runtime UI (`text-neutral-900`, `bg-green-500`, `border-red-200`, `ring-blue-500`). They bypass the semantic token layer exactly like hex literals do. Use Seven semantic variables instead:
+
+```tsx
+// Correct
+bg-[color:var(--primary)]
+text-[color:var(--primary-foreground)]
+border-[color:var(--border)]
+ring-[color:var(--ring)]
+```
+
+## Tailwind v4 type hints (mandatory)
+
+Tailwind v4 uses Lightning CSS. Lightning requires type hints for ambiguous arbitrary values referencing CSS custom properties. OKLCH colors look like function calls; without a hint, Lightning drops them silently.
+
+```tsx
+// Correct: color: hint on color tokens
+bg-[color:var(--primary)]
+text-[color:var(--primary-foreground)]
+border-[color:var(--border)]
+ring-[color:var(--ring)]
+
+// Correct: length: hint on font-size and line-height tokens
+text-[length:var(--tabs-trigger-base-text)]
+
+// Correct: dimensions, radius, spacing need no hint
+rounded-[var(--radius-md)]
+h-[var(--button-size-md-h)]
+p-[var(--spacing-4)]
+
+// Wrong: no hint, hsl wrapper, or color literal — all drift back to no-op
+bg-[var(--primary)]
+bg-[hsl(var(--primary))]
+bg-[#19e699]
+```
+
+The detector ships `missing-color-type-hint` and `missing-length-type-hint` rules to catch these at scan time.
+
+## Contrast
+
+WCAG 2.1 AA on every component is the baseline. Body text against background hits 4.5:1 minimum; large text 3:1. Verify against the OKLCH math, not by eyeballing the rendered swatch. Pairs to double-check:
+
+- `var(--muted-foreground)` on `var(--background)` — sits on the edge; never use for body copy.
+- `var(--primary-foreground)` on `var(--primary)` — passes for default Seven mint; verify for any brand-layer override.
+- Focus ring color on canvas — must hit 3:1.
+
+## Refusals
+
+- "Make this button orange to draw attention" — Orange is not in the Seven palette. Suggest emphasizing via primary mint plus surrounding lower-contrast siblings, or using `var(--warning)` if the intent is caution.
+- "Use a fuchsia primary for this admin panel" — Fuchsia is chart-only in Seven. Surface the conflict and recommend mint.
+- "Hardcode `#19e699` here because the variable is not loaded" — Variables are always loaded in the consumer; the failure is upstream. Resolve the missing import rather than working around it.

package/.cursor/skills/seven/reference/colorize.md

@@ -0,0 +1,31 @@
+# Colorize — semantic color, not a new palette
+
+Improve hierarchy and meaning with the semantic roles already shipped in the installed Seven release. Read [color-and-contrast.md](color-and-contrast.md) first.
+
+## Audit roles
+
+Map the target's current uses to:
+
+- canvas, surface, elevated surface, and muted regions;
+- primary/secondary foreground and border;
+- action, focus, selection, and active navigation;
+- destructive, warning, success, and information states;
+- chart-only series colors.
+
+Identify where grayscale obscures state, color has no meaning, status relies on color alone, or raw literals bypass Seven.
+
+## Apply
+
+- Use only known Seven CSS variables and declared component variants.
+- Reserve mint primary for the true action/selection hierarchy and lime for the existing secondary brand role.
+- Use semantic status tokens only for their meaning; do not use warning as decoration or destructive to manufacture urgency.
+- Pair color with text, icon, pattern, or accessible state where meaning would otherwise be color-only.
+- Keep body contrast at 4.5:1 and non-text/focus indicators at 3:1 in every supported theme.
+- Treat fuchsia as chart-only and keep chart color out of chrome.
+- Validate dark mode through computed values rather than copying a light-mode token into a local override.
+
+Never create a project palette, hardcode a Seven swatch, redefine a token, introduce a gradient, or use raw Tailwind palette utilities. If a semantic role is absent, report a Seven token gap.
+
+## Verify
+
+Run checks, inspect computed light/dark values, simulate common color-vision deficiencies where status is dense, and confirm all meaning remains available without color. Report which semantic roles changed and why.