# Build Tailwind v4 HyperFrames Scenes

Tailwind v4 browser-runtime projects can fail when teams apply older v3 patterns. This skill gives Claude, Codex, and Claude Code precise HyperFrames guidance for stable styling.

## Install

```bash
npx skillstore add heygen-com/tailwind
```

## Metadata

- Status: approved
- Slug: heygen-com-tailwind
- Skillstore revision: r1
- Version status: missing
- Tree hash: 2c7195f94947d60fa872472386428a762a3f0b8794692089d314ec6580ed3588
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/tailwind/
- Ref: a06681402992ceae98ba04d54cfd4ab004862696
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/heygen-com-tailwind
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-tailwind/manifest

## Capabilities

- Explains when to use Tailwind v4 browser runtime in HyperFrames compositions.
- Documents the pinned Tailwind browser runtime and readiness expectations.
- Shows CSS-first theme token and custom utility patterns for Tailwind v4.
- Guides deterministic class usage for frame capture and video rendering.
- Lists validation and render proof commands for HyperFrames projects.

## Use Cases

- Scaffold Tailwind Compositions: Create HyperFrames composition HTML that uses Tailwind v4 browser-runtime patterns from the start.
- Migrate v3 Styling Habits: Replace older config and directive patterns with CSS-first Tailwind v4 theme and utility guidance.
- Debug Render Styling: Find missing styles, dynamic class issues, and readiness problems before frame capture.

## Prompt Templates

### Start A Tailwind Scene

```
Create a HyperFrames composition plan that uses Tailwind v4 browser-runtime styling. Include stable layout choices and theme token guidance.
```

### Review Existing Classes

```
Review this HyperFrames composition for Tailwind v4 browser-runtime issues. Check dynamic classes, readiness assumptions, and v3-only patterns.
```

### Fix Render Style Flashes

```
Help diagnose missing Tailwind styles during HyperFrames rendering. Focus on runtime readiness, visible class tokens, and deterministic first-frame output.
```

### Plan Compiled CSS Migration

```
Design a migration path from Tailwind browser runtime to compiled CSS for a HyperFrames composition that must render offline.
```

## Limitations

- Does not install Tailwind, HyperFrames, or project dependencies.
- Does not replace official Tailwind documentation for full API coverage.
- Focuses on HyperFrames composition HTML, not the Studio package internals.
- Browser-runtime guidance may not fit production builds that require compiled CSS.

## Best Practices

- Keep render-critical Tailwind class tokens visible before validation.
- Use CSS-first theme tokens and custom utilities for Tailwind v4 browser-runtime work.
- Run HyperFrames validation and a short render proof after styling changes.

## Anti Patterns

- Adding v3 Tailwind directives to browser-runtime composition CSS.
- Generating important class names only during seek-time animation.
- Using browser runtime for locked-down production renders that need compiled CSS.

## Security Audit

- Audited at: 2026-07-06T14:48:02.185\+00:00
- Summary: The static findings are false positives caused by Markdown inline code, code fences, Tailwind documentation links, and CSS wording. I found no prompt injection, exfiltration intent, hidden command execution, or malicious network behavior in SKILL.md.

## Stats

- Views: 56
- Downloads: 6
- Favorites: 0
- Popularity score: 0