Skills tailwind

📦

tailwind

Name: tailwind
Author: heygen-com

Content revision r1 Safe ⚙️ External commands🌐 Network access

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.

Supports: Claude Codex Code(CC)

🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "tailwind" from https://skillstore.io/skills/heygen-com-tailwind.md and its manifest at https://skillstore.io/api/skills/heygen-com-tailwind/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/heygen-com-tailwind.md Signed manifest GET /api/skills/heygen-com-tailwind/manifest Signed lockfile GET /api/skills/heygen-com-tailwind/lockfile

Test it

Using "tailwind". A HyperFrames scene has custom colors in a Tailwind config file.

Expected outcome:

The skill recommends moving custom tokens into a CSS-first Tailwind v4 theme block for browser-runtime compositions.

Using "tailwind". A render has styles in preview but missing styles at frame zero.

Expected outcome:

The skill checks Tailwind readiness, visible class tokens, and validation steps before recommending a render proof.

Using "tailwind". A composition builds class names from variables during animation.

Expected outcome:

The skill recommends complete class tokens, data attributes, or explicit CSS so Tailwind can generate styles before capture.

Security Audit

Safe

v4 • 7/6/2026 Open versioned report

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.

Files scanned

149

Lines analyzed

Review items

False positives ignored

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/heygen-com-tailwind/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/heygen-com-tailwind/security.svg)](https://skillstore.io/skills/heygen-com-tailwind?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/heygen-com-tailwind?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-tailwind/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/heygen-com-tailwind.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

heygen-com. (2026). tailwind security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-tailwind/audits/4

BibTeX citation

@techreport{heygen-com-heygen-com-tailwind-2026,
  author = {heygen-com},
  title = {tailwind security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/heygen-com-tailwind/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "tailwind security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "heygen-com"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/heygen-com-tailwind/audits/4"
identifiers:
  - type: other
    value: "skillstore:heygen-com-tailwind:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

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.

Try These Prompts

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.

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.

Avoid

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.

Frequently Asked Questions

Does this skill target Tailwind v4 or v3?

It targets Tailwind v4.2 browser-runtime usage for HyperFrames compositions.

Can it help with HyperFrames Studio internals?

No. The skill says Studio still uses Tailwind v3 patterns and is outside this scope.

Does it require internet access?

No for the guidance itself. It references Tailwind documentation and discusses the pinned browser runtime.

Can it generate production CSS builds?

It can plan when compiled CSS is better, but it does not provide a full build system.

Why avoid dynamic Tailwind class names?

Tailwind must see full class tokens before capture to generate stable styles.

Which AI tools can use this skill?

The report marks support for Claude, Codex, and Claude Code.

Developer Details

Author

heygen-com

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/heygen-com/hyperframes/tree/main/skills/tailwind/

Ref

a06681402992ceae98ba04d54cfd4ab004862696

Maintenance freshness

7/18/2026

Usage

1 downloads · 56 views

File structure

📄 SKILL.md

tailwind

Install with my Agent

Agent-readable resources

Test it

Security Audit

Risk Factors

Copy report link

Markdown badge

HTML badge

Embed card

APA citation

BibTeX citation

CITATION.cff

Skillstore Score

What You Can Build

Scaffold Tailwind Compositions

Migrate v3 Styling Habits

Debug Render Styling

Try These Prompts

Best Practices

Avoid

Frequently Asked Questions

Developer Details