vskill: Skill for Claude Code

Tailwind CSS for HyperFrames

HyperFrames init --tailwind uses the Tailwind browser runtime pinned to @tailwindcss/[email protected]. Treat that as Tailwind v4, not v3.

This skill is for composition HTML generated by the CLI. It is not for packages/studio, which still uses Tailwind v3 internally with tailwind.config.js, PostCSS, and @tailwind directives.

When To Use

• The user asks for Tailwind in a HyperFrames composition.
• A project was created with hyperframes init --tailwind.
• You see window.__tailwindReady in index.html.
• You need utility classes, CSS-first theme tokens, custom utilities, or v3-to-v4 migration guidance.
• The render has missing styles and the project is relying on the browser runtime.

Version Contract

• Pinned runtime: @tailwindcss/[email protected].
• Browser runtime script is injected by the CLI. Do not replace it with cdn.tailwindcss.com.
• HyperFrames waits for window.__tailwindReady before frame capture starts.
• The readiness shim must stay deterministic: no render-loop polling APIs, no clock-based retries, no runtime network fetches beyond the pinned Tailwind runtime script.
• For offline, locked-down, or production-stable renders, compile Tailwind to CSS and include the stylesheet directly instead of relying on the browser runtime.

v4 Rules

Tailwind v4 is CSS-first:

<style type="text/tailwindcss">
  @theme {
    --color-brand: oklch(0.68 0.2 252);
    --font-display: "Inter", sans-serif;
  }

  @utility headline-balance {
    text-wrap: balance;
    letter-spacing: 0;
  }
</style>

Avoid v3 setup patterns in browser-runtime compositions:

/* Do not use these in Tailwind v4 browser-runtime compositions. */
@tailwind base;
@tailwind components;
@tailwind utilities;

Do not add a tailwind.config.js just to define colors, fonts, spacing, or utilities for a v4 browser-runtime composition. Use @theme and @utility in a text/tailwindcss style block.

If you truly need an existing JavaScript config for a compiled v4 build, load it explicitly from CSS with @config, then validate in the browser. Do not assume v4 auto-detects v3 config files.