| name | tailwind |
| description | Tailwind CSS v4 browser-runtime patterns for HyperFrames compositions. Use only for HyperFrames Tailwind scaffolds, utility classes, CSS-first theme tokens, v3-to-v4 issues, and deterministic render styling. |
Tailwind CSS for HyperFrames
Use this specialist skill after HyperFrames routing. hyperframes init --tailwind uses the pinned Tailwind v4 browser runtime; do not treat it like a v3 PostCSS project or the Studio app.
Contract
- Keep the CLI-injected runtime and
window.__tailwindReady readiness contract intact.
- Tailwind v4 is CSS-first. Put tokens in
@theme and custom utilities in @utility inside type="text/tailwindcss".
- Do not add v3
@tailwind directives or a JavaScript config merely to define normal tokens.
- Use Tailwind for static layout/style and a seekable animation adapter for render timing.
- Keep render-critical class names complete and visible before capture; do not assemble them dynamically only at seek time.
- Use stable dimensions, transforms, opacity, explicit border colors, and deterministic variants. Avoid hover, scroll, focus, and pointer state for required video content.
- For offline or production-stable renders, compile CSS and include it locally instead of relying on a browser runtime fetch.
Read the detailed guide for v4 examples, class-safety patterns, composition markup, migration notes, and debugging.
Validate the composition with current HyperFrames lint/check commands, inspect frame zero for missing-style flashes, capture representative snapshots, and render a short proof when styles affect delivery.
