Gmira
A library for building web surfaces nobody can tell were generated.
The problem this solves is not skill, it is decision avoidance. An agent that has not decided
reaches for the median, and the median rendered to HTML is the card grid, the gradient headline,
the eyebrow over every section, the centered hero with two buttons. Installing more impressive
components does not fix it, it relocates it: the rainbow WebGL blob now sits exactly where the
purple CSS gradient sat in 2021.
So this library forces the decision first, then supplies the material.
Read this first, always
references/DOCTRINE.md is the shared law. Load it before any other file here. Everything below
assumes it. Do not restate it back to the user; act on it.
The one sequence that matters
Direction before elements. Every time, including on "just fix the hero".
1 BRIEF what is true, who it is for, what the content actually is
2 DIRECTION the 5-block contract, written down, before anything is placed
3 BUILD surfaces, using the arsenal, repaired and tamed
4 GATE slop, a11y, perf, then eyes on real screenshots
Skipping step 2 is how pages come out generic. If the user asks for a build and no direction
exists, write the direction first and show it. It costs 150 words.
Commands
Invoke a sub-skill directly, or let this router pick.
Decide
| Skill |
Use when |
gmira-brief |
Starting anything. Extracts product truth, mode, and the real content model. |
gmira-direction |
The 5-block direction contract, with the anti-default mechanics. Nothing gets built before this. |
gmira-palette |
The color world. Committed strategy, 30 to 60% surface coverage, measured contrast. |
gmira-typeset |
The typographic voice. Measure, scale, tracking, what mono is allowed to mean. |
Build
| Skill |
Use when |
gmira-hero |
The first viewport. Owns the effect budget and the frame-zero problem. |
gmira-scroll |
Scroll choreography: pinned sections, scrub, tilt, reveal. One authored moment. |
gmira-catalog |
Any set of things: inventory, products, courses, creative walls. The anti-card-grid skill. |
gmira-detail |
A single thing in depth: PDP, vehicle detail, course page. Spec tables and variant state. |
gmira-flow |
Multi-step: checkout, enrollment, finance calculator, booking, application. |
gmira-proof |
Testimonials, results, logos, case studies. Without inventing any of them. |
gmira-nav |
Header, command menu, footer, and the chrome that carries the world. |
Craft
| Skill |
Use when |
gmira-arsenal |
Installing any registry component. Runs the repair and taming pass. Not optional. |
gmira-canvas |
Authoring or auditing canvas and WebGL work. Owns the GPU floor. |
gmira-motion |
Choosing and building the one authored moment. |
gmira-states |
Hover, focus, disabled, loading, error, empty. The six that get skipped. |
Gate
| Skill |
Use when |
gmira-slop |
Auditing for the visual tells no detector catches. Run before showing the user. |
gmira-a11y |
Contrast, focus order, semantics, canvas fallback readability. |
gmira-perf |
Frame budget, bundle weight, DPR caps, GPU teardown. |
gmira-verify |
Playwright at five viewports, then read the screenshots with your own eyes. |
gmira-ship |
Build, stage, publish. Never deploys without an explicit go. |
Playbooks
Loaded by the build skills, not invoked directly. references/playbooks/:
car-shop.md, ecommerce.md, ai-school.md, gtm-ugc-school.md, and worlds.md
(the material-world catalog the direction skill draws from).
Routing
- A vague ask ("build me a site", "make this better") means start at
gmira-brief.
- A named surface with a direction already committed goes straight to the matching build skill.
- "It looks generic / bland / AI" is
gmira-slop first, to name what is wrong, then almost
always gmira-direction, because the cause is upstream of the pixels.
- "This component looks broken / wrong colors / nothing renders" is
gmira-arsenal.
- Anything touching a canvas or shader also loads
gmira-canvas.
- Before handing anything back:
gmira-verify. No exceptions, and read the images.
Stack
Next 16 + React 19 + Tailwind v4 + shadcn v4. Seven registries are wired in components.json
(514 components): @componentry, @canvas-ui, @bklit, @ncdai, @kibo-ui, @react-bits,
@soundcn. The shadcn MCP is connected; shadcn search and shadcn view work against all seven.
Default install stays cheap: framer-motion, lenis, lucide-react. That reaches every
non-three.js component including all four raw-WebGL heroes. three.js costs roughly 600 KB and is
only justified when one specific component earns it.
Three laws that override any component's own defaults
Proven by build, written up in references/DOCTRINE.md Part 1.
- A registry component is an engine, not a design. Its defaults are tuned to win a five-second
gallery GIF. Install then tame, in the same breath.
- The arsenal is broken on arrival. 12 of 56 componentry components ship unresolvable
cn
imports and 10 have undeclared dependencies. Repair before writing any page.
- An effect must earn its place at frame 0, with no input. Pointer-driven effects are invisible
in the state most visitors see.
Prose
Everything this library writes for a user to read, including page copy: no dashes as pause,
sachlich tone, no performative warmth. Compound hyphens are fine. Denylist and the structural
AI-tells are in the doctrine, Part 7.5.
1---2name: gmira3description: Use when building, redesigning, or reviewing a website or web surface that must not look generated. Covers landing pages, e-commerce (PLP, PDP, cart, checkout), car and vehicle inventory sites, course and cohort school pages, portfolios, dashboards, and marketing sites. Handles visual direction, WebGL and canvas effects, shadcn registry components, scroll choreography, typography, color, motion, empty and error states, accessibility, performance budgets, and multi-viewport visual verification. Also use when a page came out bland, templated, or "AI-looking" and needs a real direction, or when an installed registry component renders wrong.4---56# Gmira78A library for building web surfaces nobody can tell were generated.910The problem this solves is not skill, it is **decision avoidance**. An agent that has not decided11reaches for the median, and the median rendered to HTML is the card grid, the gradient headline,12the eyebrow over every section, the centered hero with two buttons. Installing more impressive13components does not fix it, it relocates it: the rainbow WebGL blob now sits exactly where the14purple CSS gradient sat in 2021.1516So this library forces the decision first, then supplies the material.1718## Read this first, always1920`references/DOCTRINE.md` is the shared law. Load it before any other file here. Everything below21assumes it. Do not restate it back to the user; act on it.2223## The one sequence that matters2425Direction before elements. Every time, including on "just fix the hero".2627```281 BRIEF what is true, who it is for, what the content actually is292 DIRECTION the 5-block contract, written down, before anything is placed303 BUILD surfaces, using the arsenal, repaired and tamed314 GATE slop, a11y, perf, then eyes on real screenshots32```3334Skipping step 2 is how pages come out generic. If the user asks for a build and no direction35exists, write the direction first and show it. It costs 150 words.3637## Commands3839Invoke a sub-skill directly, or let this router pick.4041### Decide4243| Skill | Use when |44|---|---|45| `gmira-brief` | Starting anything. Extracts product truth, mode, and the real content model. |46| `gmira-direction` | The 5-block direction contract, with the anti-default mechanics. Nothing gets built before this. |47| `gmira-palette` | The color world. Committed strategy, 30 to 60% surface coverage, measured contrast. |48| `gmira-typeset` | The typographic voice. Measure, scale, tracking, what mono is allowed to mean. |4950### Build5152| Skill | Use when |53|---|---|54| `gmira-hero` | The first viewport. Owns the effect budget and the frame-zero problem. |55| `gmira-scroll` | Scroll choreography: pinned sections, scrub, tilt, reveal. One authored moment. |56| `gmira-catalog` | Any set of things: inventory, products, courses, creative walls. The anti-card-grid skill. |57| `gmira-detail` | A single thing in depth: PDP, vehicle detail, course page. Spec tables and variant state. |58| `gmira-flow` | Multi-step: checkout, enrollment, finance calculator, booking, application. |59| `gmira-proof` | Testimonials, results, logos, case studies. Without inventing any of them. |60| `gmira-nav` | Header, command menu, footer, and the chrome that carries the world. |6162### Craft6364| Skill | Use when |65|---|---|66| `gmira-arsenal` | Installing any registry component. Runs the repair and taming pass. Not optional. |67| `gmira-canvas` | Authoring or auditing canvas and WebGL work. Owns the GPU floor. |68| `gmira-motion` | Choosing and building the one authored moment. |69| `gmira-states` | Hover, focus, disabled, loading, error, empty. The six that get skipped. |7071### Gate7273| Skill | Use when |74|---|---|75| `gmira-slop` | Auditing for the visual tells no detector catches. Run before showing the user. |76| `gmira-a11y` | Contrast, focus order, semantics, canvas fallback readability. |77| `gmira-perf` | Frame budget, bundle weight, DPR caps, GPU teardown. |78| `gmira-verify` | Playwright at five viewports, then read the screenshots with your own eyes. |79| `gmira-ship` | Build, stage, publish. Never deploys without an explicit go. |8081### Playbooks8283Loaded by the build skills, not invoked directly. `references/playbooks/`:84`car-shop.md`, `ecommerce.md`, `ai-school.md`, `gtm-ugc-school.md`, and `worlds.md`85(the material-world catalog the direction skill draws from).8687## Routing8889- A vague ask ("build me a site", "make this better") means start at `gmira-brief`.90- A named surface with a direction already committed goes straight to the matching build skill.91- "It looks generic / bland / AI" is `gmira-slop` first, to name what is wrong, then almost92 always `gmira-direction`, because the cause is upstream of the pixels.93- "This component looks broken / wrong colors / nothing renders" is `gmira-arsenal`.94- Anything touching a canvas or shader also loads `gmira-canvas`.95- Before handing anything back: `gmira-verify`. No exceptions, and read the images.9697## Stack9899Next 16 + React 19 + Tailwind v4 + shadcn v4. Seven registries are wired in `components.json`100(514 components): `@componentry`, `@canvas-ui`, `@bklit`, `@ncdai`, `@kibo-ui`, `@react-bits`,101`@soundcn`. The shadcn MCP is connected; `shadcn search` and `shadcn view` work against all seven.102103Default install stays cheap: `framer-motion`, `lenis`, `lucide-react`. That reaches every104non-three.js component including all four raw-WebGL heroes. three.js costs roughly 600 KB and is105only justified when one specific component earns it.106107## Three laws that override any component's own defaults108109Proven by build, written up in `references/DOCTRINE.md` Part 1.1101111. **A registry component is an engine, not a design.** Its defaults are tuned to win a five-second112 gallery GIF. Install then tame, in the same breath.1132. **The arsenal is broken on arrival.** 12 of 56 componentry components ship unresolvable `cn`114 imports and 10 have undeclared dependencies. Repair before writing any page.1153. **An effect must earn its place at frame 0, with no input.** Pointer-driven effects are invisible116 in the state most visitors see.117118## Prose119120Everything this library writes for a user to read, including page copy: no dashes as pause,121sachlich tone, no performative warmth. Compound hyphens are fine. Denylist and the structural122AI-tells are in the doctrine, Part 7.5.
othmanadi