zeekayandHanzo Dev
01dc7b5306
Swapping the forked token layer for the inherited one silently orphaned two names. The fork declared --border-hairline (a solid #262626) and --border-card; the substrate draws every one of those boundaries with a single alpha --border, and explains at length why alpha beats a solid hex there — a solid edge reads on the page and vanishes the moment it lands on a lifted surface. Nineteen shipped files still asked for the old names: Card, Avatar, Badge, Table, Accordion, Dialog, DropdownMenu, Sheet, Toaster, seven specimen cards, and the generation prompts. An undefined custom property in `border:1px solid var(--gone)` does not fail. The declaration is invalid at computed-value time, border-color falls back to currentColor, and every one of those surfaces draws its edge in the INK colour — a stark near-white hairline on black that reads as a bold design choice rather than as nineteen broken files. They are not re-declared as aliases. Both mapped to the substrate's --border, so keeping them would be two names for one thing — exactly the duplication this package exists to remove. The components now speak the substrate's vocabulary. check-tokens gains the check that would have caught it. Check 4 proves the STYLESHEET is internally consistent and says nothing about the components, kits, specimen cards and prompts shipped beside it — which are the files a consumer actually renders. Now every var() in all 78 of them must resolve against the sheet. Mutation-proven: pointing one card back at --border-hairline fails the build. Co-authored-by: Hanzo Dev <[email protected]>
2.4 KiB
Page prompts
Drop-in prompts for whole sections. Each already carries the brand constraints,
so you can hand one to a model with only the specifics filled in. They assume the
system prompt (system.md) is already loaded and styles.css is imported.
Hero
Build a hero section for {product}. Dark,
--background. Centered column,--container-prose, vertical rhythm--hero-y/--hero-y-lg. One--type-heroh1(≤ 7 words, scaling to--text-7xlon lg), one--type-leadsubline (≤ 140 chars), one primary<Button pill>plus oneoutlinesecondary. Behind the column, a single--glow-heroradial — nothing else. Entry:lux-fade-up,--duration-slow,--staggerbetween the three elements.
Feature grid
Build a 3-column feature grid (1 column on mobile). Each cell: a
lucide-reacticon at h-6 in--foregroundat 80%, a--type-h3title, a--type-body--text-secondarydescription. Cells use--surface-card,--radius-lg,--border. No shadows. Constrain to--container-max, gutters--gutter*. Stagger the cells in on scroll withlux-slide-up-fade.
Pricing
Build a 3-tier pricing row. Monochrome cards,
--surface-card; emphasize the recommended tier with--surface-card-emphasisand a--brandhairline — not a colored fill. Price in--type-h2, cadence in--text-helper. "Free" and "Save N%" are the only colored text,--state-success. One primary CTA per card, the restoutline.
CTA / resources block (every product page ends with this)
Build the closing section: a top hairline (
--border), centered--container-prose, a--type-h2"Get started", and a row of two or three links — "Read the docs", "View on GitHub", "Talk to us" — as--text-primarywith underline-on-hover. No new color, no new component.
Navigation + footer
Build a fixed header:
--surface-headerwith backdrop blur,--header-heighttall,--z-header. Left: the H mark fromassets/logo.svg. Right: text nav links at--text-secondary, hover--text-primary, and one primary<Button pill size="sm">. Footer:--container-max, columns of quiet--text-tertiarylinks over--background, a hairline on top.
Rules that still apply
- One primary action per view.
- No hue outside the reserved semantics.
- Everything Tab-reachable, focus visible, reduced-motion honored.
After generating, run prompts/rules.md against the output.