oh-my-design: Skill for Claude Code

omd-shader-hero — one scene, two brand inks

A launch hero gets one look from someone who owes you nothing. Mesh gradients are the most generic shader look on the web, and blending two complementary brand hues turns them brown. This skill does the opposite: two flat inks, the base color and one brand color, printed as an ordered-dither field that folds slowly like light through a screen print. Every pixel is one ink or the other, so nothing blends and nothing goes muddy. The copy sits on a hard-edged knockout in the base ink, like a cut-out panel on a riso poster.

The script picks both inks, the text color and the contrast from DESIGN.md. No color is chosen by taste.

Working example: examples/hero.html, filled from the fictional examples/DESIGN.example.md. Scripts: scripts/tokens.mjs (inks + contrast), scripts/verify.mjs (real-render proof).

1. When to use / when not

Use when:

• a launch, product, waitlist, event or rebrand page needs one first screen with motion;
• the project has a DESIGN.md with a brand color and a dark (or light) base (Core v2 Foundations tokens, Foundations prose pairs, or Google-compatible colors: frontmatter);
• a graphic, printed, confident look fits the brand.

Don't use when:

• there is no DESIGN.md or no brand color. tokens.mjs exits 3 and you stop; run omd-init or ask. Never pick "nice" colors to fill the gap (unknown means absent);
• the brand is soft, photographic or luxury-quiet. A dither field is loud. Use the brief's photography instead (tf-shaders "photo first");
• the page needs several shader scenes. One scene, plus at most one small accent elsewhere (tf-shaders rule). For a whole scroll story use omd-landing.

2. Procedure

1. Read tokens, don't choose them.

   node <skill>/scripts/tokens.mjs DESIGN.md                 # prints the decision as JSON
   node <skill>/scripts/tokens.mjs DESIGN.md --scheme light  # light base instead of dark
   

   The script reads three formats, in this order: - **color.<role>**: \#hex`tokens,Name (`#hex`)pairs inside the Foundations section, then frontmattercolors:`. Then it:
   • drops state and utility roles (danger, error, warning, success, info, border, divider, focus, disabled, overlay, shadow, hover, pressed, active);
   • takes the darkest token as the base ink (the lightest for light);
   • takes one brand ink: the role named primary/brand if there is one, else the most saturated brand color, skipping any too close to the base.
2. Text color is computed. The script checks the text candidates (ink/neutral tokens at the opposite end of the scheme) against both inks and their midpoint and picks the best one. The copy then sits on an opaque base-ink knockout, so the bar it must clear is the text token on the base ink. With the fixture that is 18.8:1. If even that is under 4.5:1, the script warns: pick another text token.
3. Write the hero. Copy examples/hero.html (or port it, see §6) and fill it:

   node <skill>/scripts/tokens.mjs DESIGN.md --write path/to/hero.html
   

   That rewrites the #hero-vars CSS block (--hero-c0 base, --hero-c1 brand, --hero-text, --hero-scrim, --hero-scrim-a) and the #hero-tokens JSON.
4. Copy is real. Headline + one sentence + one CTA. Use the user's actual product line. Never invent metrics, customers or investors (tf-shaders §0).
5. Verify on a real GPU (§5) and look at the frames at full size.