Instant 0 100ms

Skill t4sh/dotfiles/agents/skills/instant-0-100ms

Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsiveFrom its SKILL.md

Install

npx -y skills add t4sh/dotfiles --skill instant-0-100ms

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.3 KB, 483 tokens by cl100k_base, as published. Nobody here has run it

Instant Animations (0-100ms)

Animations under 100ms feel instantaneous to users. This duration is for immediate feedback that confirms actions without perceived delay.

Disney Principles at Instant Speed

Works Well

Squash & Stretch: Subtle - 2-5% compression on button press creates tactile feel without visible deformation.

Anticipation: Skip entirely - no time for preparation at this speed.

Staging: Minimal - rely on position/color change, not movement.

Straight Ahead/Pose to Pose: Straight ahead only - too fast for keyframe complexity.

Follow Through: None - motion completes before follow-through registers.

Slow In/Slow Out: Use ease-out only - starts at full speed, slight deceleration.

Arcs: Linear paths only - curves don't register at this speed.

Secondary Action: Skip - brain can't process multiple simultaneous instant changes.

Timing: 1-3 frames maximum. 60fps = 16.67ms per frame.

Exaggeration: Minimal - subtle scale (0.95-1.05) or opacity changes.

Solid Drawing: Focus on color/opacity shifts, not spatial transformation.

Appeal: Crisp, immediate response builds trust and perceived performance.

Doesn't Work

Complex multi-step sequences
Visible travel distance
Rotation beyond 15 degrees
Multiple property changes
Staged reveals

Easing Recommendations

/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;

/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;

/* Button press feedback */
transition: transform 50ms ease-out;

Best Use Cases

Button active/pressed states
Toggle switches
Checkbox/radio selections
Focus ring appearance
Hover color shifts
Touch ripple initiation

Implementation Pattern

.button:active {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

.toggle-on {
  background: var(--active);
  transition: background 80ms ease-out;
}

Key Insight

At instant speeds, animation serves confirmation, not communication. Users shouldn't consciously perceive the animation - they should feel the interface responding.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.