implementing-token-bridge
CommunityAnimate with tokens, not magic numbers.
Authoralexejluft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the use of hardcoded numbers and strings in GSAP animations, ensuring all motion values are derived from a single, consistent design token system.
Core Features & Use Cases
- Token-Driven Animations: All GSAP durations, easings, and distances are managed via TypeScript constants.
- Reusable Animation Hooks: Provides hooks like
useScrollRevealanduseStaggerEntranceto abstract common animation patterns and eliminate boilerplate. - Automated Enforcement: Includes gate scripts and pre-commit hooks to prevent the introduction of hardcoded animation values.
- Use Case: When building a new UI component with animations, use the provided hooks and token constants to ensure animations are consistent, performant, and easily updatable globally.
Quick Start
Use the implementing-token-bridge skill to animate elements using predefined duration and easing tokens.
Dependency Matrix
Required Modules
None requiredComponents
referencesscripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: implementing-token-bridge Download link: https://github.com/alexejluft/brudi/archive/main.zip#implementing-token-bridge Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.