Applies Tailwind CSS v4 browser-runtime patterns to HyperFrames composition HTML.
npx skills add https://github.com/gmolike/Claude-Template --skill tailwind-gmolike
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/tailwind Command: npx skills add https://github.com/gmolike/Claude-Template --skill tailwind-gmolike
@theme and custom utilities with @utility inside text/tailwindcss style blocks instead of a tailwind.config.js. - Render-safe styling rules: Enforce static class names, explicit border colors, stable dimensions, and transform/opacity animations so frames render deterministically. - Validation workflow: Run npx hyperframes lint, validate, inspect, and a draft render proof to confirm no missing-style flashes on frame 0. - Use Case: After scaffolding a project with hyperframes init --tailwind, you need brand colors and a headline layout that renders identically in preview and final MP4 output. This Skill guides you to declare tokens in @theme, use complete static class tokens, and verify window.__tailwindReady resolves before capture. ## Quick Start Ask the assistant to add Tailwind v4 theme tokens and utility classes to my HyperFrames composition and validate the render output.High-intent search queries and answers about installing and using this skill.
Scaffold the project with hyperframes init --tailwind, which injects the pinned @tailwindcss/[email protected] runtime script. Define tokens and utilities in a style block with type text/tailwindcss using @theme and @utility, then use static utility classes in your composition HTML.
Tailwind v4 is CSS-first: it replaces @tailwind base/components/utilities directives and tailwind.config.js with @theme and @utility blocks inside text/tailwindcss style tags. The v4 browser runtime also renames utilities like shadow-xs, rounded-xs, and outline-hidden.
Missing styles usually mean the browser runtime had not finished generating CSS before frame capture. Confirm window.__tailwindReady exists and resolves before capture, that the script points to @tailwindcss/[email protected], and that all class names appear statically in the HTML.
Dynamically assembled class names like template literals are risky because the browser runtime only generates CSS for classes it can see in the document. Use complete static class tokens, data attributes with variant selectors, or CSS custom properties instead.
Compile Tailwind to a static stylesheet for offline, locked-down, or production-stable renders where runtime network fetches are unacceptable. Include the compiled CSS directly in the composition rather than relying on the @tailwindcss/browser script.
hugotownImplements Tailwind CSS v4 browser-runtime patterns for HyperFrames video compositions.
EmasoftRenders HTML compositions to MP4 video via the external Hyperframes CLI.
big4council-progRender GSAP-driven HTML compositions into MP4/WebM videos with FFmpeg.
hoanghd218Style HyperFrames compositions with Tailwind v4 browser-runtime patterns.