example-tailwind-animation
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
Best use case
example-tailwind-animation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
Teams using example-tailwind-animation should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/tailwind/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How example-tailwind-animation Compares
| Feature / Agent | example-tailwind-animation | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Tailwind CSS Animation
Use Tailwind CSS to style and animate Helios compositions. Combine standard Tailwind utility classes with Helios's `autoSyncAnimations` feature.
## Quick Start
1. **Configure Helios:**
```typescript
const helios = new Helios({
// ...
autoSyncAnimations: true, // Enable CSS synchronization
animationScope: document.getElementById('app')
});
```
2. **Use Tailwind Classes:**
```html
<div class="w-full h-full bg-slate-900 flex items-center justify-center">
<div class="animate-bounce text-6xl text-white font-bold">
Hello Helios
</div>
</div>
```
3. **Custom Keyframes (`tailwind.config.js`):**
```javascript
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
}
}
}
}
```
## Key Patterns
### Scoped Styles
When working in a monorepo or example folder, ensure your `tailwind.config.js` `content` array correctly targets your files to avoid global style leakage or missing styles.
### Auto-Sync
With `autoSyncAnimations: true`, standard CSS animations (like `animate-bounce`, `animate-spin`) are automatically hijacked by Helios. `helios.seek()` will scrub the CSS animation to the correct point in time.
## Source
- Example: `examples/tailwind-animation/`Related Skills
example-vue
Patterns for using Helios with Vue. Use when building compositions in a Vue environment.
example-vanilla
Patterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.
example-threejs
Patterns for using Helios with Three.js and React Three Fiber. Use when creating 3D animations or integrating WebGL scenes.
example-svelte
Patterns for using Helios with Svelte. Use when building compositions in a Svelte environment, utilizing Svelte stores for reactive frame updates.
example-solid
Patterns for using Helios with SolidJS. Use when building compositions in a SolidJS environment, utilizing signals for fine-grained reactivity.
example-signals-animation
Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.
example-react
Patterns for using Helios with React. Use when building compositions in a React environment.
example-podcast-visualizer
Workflow for creating a podcast visualizer with multi-track audio mixing and DOM-based synchronization. Use when building audio-reactive compositions.
example-pixi
PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.
example-p5-animation
Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.
example-lottie
Lottie integration patterns for Helios. Use when rendering Lottie (Bodymovin) JSON animations synchronously with Helios.
example-gsap
Patterns for using Helios with GSAP (GreenSock). Use when integrating GSAP timelines with the Helios timeline for precise scrubbing and rendering.