Gmira direction
21 Claude Code skills for building web interfaces that do not look AI-generated. Forces a written visual direction before any element is placed, wires 7 shadcn registries (514 components), sets a GPU performance floor for WebGL and canvas work, and gates every build with Playwright at 5 viewports. Next.js, React, Tailwind v4.
npx -y skills add OthmanAdi/gmira --skill gmira-directionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 11 days oldThe repository was created 11 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use before building or redesigning any web surface, and whenever a page has come out bland, templated, safe, or "AI-looking". Produces the written visual direction that everything else is built against: the material world, the thesis, the structural form, and what is on screen in the first viewport. Also use when a design review keeps producing small fixes that do not add up, when two people disagree about a page without being able to say why, or when output looks competent but interchangeable with any competitor.
SKILL.md
5.8 KB, as published. Nobody here has run it
Direction
Nothing gets built before this. It costs 150 words.
Load ../gmira/references/DOCTRINE.md (Part 2 is this skill's law).
World catalog: ../gmira/references/playbooks/worlds.md.
Why generic happens
Not a talent problem. A model's ranking of design options is a deterministic function of its priors, so instructing it to "be original", "avoid generic", or "rank harder" cannot beat the prior. The instruction is evaluated by the thing it is trying to correct.
Only an external assignment defeats a prior. That is the whole mechanism of this skill.
Step 1: name the rut, and its opposite
Write both down. Two sentences each, concrete enough to be excluded.
THE RUT what every site in this category already looks like
THE COUNTER the obvious move away from it
For a car dealership the rut is: full-bleed hero photo of the car at golden hour, dark UI, red or blue accent, a stats row, cards of vehicles with a heart icon. The counter is: brutalist, all-mono, black and white, oversized type. Both are excluded.
If someone could guess the aesthetic from the category alone, or from category-plus-avoidance, rework until neither answer is obvious.
Most anti-slop work misses the second half. Predictable contrarianism is also a prior.
Step 2: draw the world, do not pick it
worlds.md holds 40 real material worlds. Draw by an external index. Never pick a favorite.
index = (hash of the project slug + today's date) mod 40
Any outside source works: a user-supplied number, a date, a hash. What matters is that the selection is not the model's own preference, because the model's own preference is the prior.
Draw seven candidates spanning at least three material families. Discard any that collide with the rut or the counter. From what survives, fuse the two strongest and judge the fusion on exactly two axes:
- Does it carry the product's actual truth, or does it fight it?
- Is the TELL buildable on the web, in CSS or canvas, this week?
Fewer than seven candidates and the prior wins by default.
Step 3: write the contract
Five blocks. 150 words total. Committed to .gmira/surfaces/<slug>.md and emitted as an HTML
comment in the built markup so the finishing review can audit it promise by promise.
THESIS one sentence: what this surface argues
OWN-WORLD the material world, named specifically, with its TELL
STORY what changes between the first viewport and the last
FIRST VIEWPORT what is on screen before any scroll, in nouns
FORM the structural decision: how the page is built, not how it feels
The falsifiability test
If a block reads like a mood, the direction is not decided yet.
INCORRECT OWN-WORLD: premium, modern, trustworthy, with a technical edge
CORRECT OWN-WORLD: a 1970s Porsche parts catalogue. Newsprint-weight paper, part
numbers in mono, hairline rules between every row, photographs printed
small on a neutral card, no rounded corners anywhere.
TELL: every vehicle carries a fabricated 6-digit stock number set in mono,
and the rules between spec rows are 0.5px, not 1px.
The second one can be checked against a screenshot. The first one cannot be checked against anything, which is why it always survives review and always produces a generic page.
Same test on FORM:
INCORRECT FORM: clean, spacious, with clear hierarchy
CORRECT FORM: a single 12-column index that never becomes cards. Vehicles are rows.
One vehicle per screen gets promoted to a full-bleed plate. No section is
centered. The page has exactly one horizontal rule weight.
Step 4: the specificity test
Could an unrelated product use this page unchanged?
Apply it per section, not once per page. A hero can be specific while the three sections under it are interchangeable, and that page still reads as generic, because most of it is.
The standing exit
The safe conventional option is always available to the user. You may never recommend it or weigh it in. Present it as available, then argue for the committed direction. This preserves the user's agency without letting agent risk aversion decide the design.
When there is already a direction
Do not rewrite it. Read .gmira/surfaces/<slug>.md and build against it. A direction that
changes per session is not a direction. If it genuinely needs replacing, say why in one line, then
run this skill fully rather than drifting.
Torn between refined and committed
Commit. Refined-and-safe is the median with better spacing, and the median is what this whole library exists to escape.
Checks before this skill is done
- The rut and the counter are both written down, concretely, and both excluded
- Seven candidates were drawn by an external index, spanning three material families
- The world is a real artifact someone could hold or visit, not an adjective
- All five blocks written, 150 words total, none of them a mood
- The TELL is buildable in CSS or canvas and named specifically
- The contract is committed to
.gmira/surfaces/<slug>.md - The contract is emitted as an HTML comment in the built markup
- The specificity test applied to every planned section, not just the hero