Css interaction tips

Skill tommylower/cortex/design/craft/css-interaction-tips

Quick-reference recipes for common CSS interaction and animation problems: button press feedback, smooth element entrances, hover flicker fixes, popover transform-origin, sequential tooltip timing, mobile tap targets, hover-on-touch issues, and subtle blur masking. Use when polishing UI interactions, fixing janky animations, making buttons feel responsive, addressing hover bugs on mobile, or any micro-interaction tuning. Triggers: hover, transition, button feel, tap target, tooltip, popover, animation jitter, interaction polish, micro-interaction.From its SKILL.md

Install

npx -y skills add tommylower/cortex --skill css-interaction-tips

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

One thing to look at

1 stars1 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.5 KB, 504 tokens by cl100k_base, as published. Nobody here has run it

CSS Interaction Tips

Quick-reference for common CSS interaction and animation scenarios. Use when working on hover effects, transitions, button states, tooltips, popovers, tap targets, or any UI interaction polish.

Practical Tips

Scenario	Solution
Make buttons feel responsive	Add `transform: scale(0.97)` on `:active`
Element appears from nowhere	Start from `scale(0.95)`, not `scale(0)`
Shaky/jittery animations	Add `will-change: transform`
Hover causes flicker	Animate child element, not parent
Popover scales from wrong point	Set `transform-origin` to trigger location
Sequential tooltips feel slow	Skip delay/animation after first tooltip
Small buttons hard to tap	Use 44px minimum hit area (pseudo-element)
Something still feels off	Add subtle blur (under 20px) to mask it
Hover triggers on mobile	Use `@media (hover: hover) and (pointer: fine)`

Code Snippets

Responsive button press

button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

Smooth element entrance (not jarring)

.element {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.element.visible {
  transform: scale(1);
  opacity: 1;
}

Fix jittery animation

.animated {
  will-change: transform;
}

Large tap target via pseudo-element

button {
  position: relative;
}
button::after {
  content: '';
  position: absolute;
  inset: -10px; /* expands hit area by 10px on all sides */
}

Hover-only on desktop

@media (hover: hover) and (pointer: fine) {
  .element:hover {
    /* hover styles here */
  }
}

Popover from correct origin

.popover {
  transform-origin: top left; /* match to trigger position */
  transform: scale(0.95);
  transition: transform 0.15s ease;
}
.popover.open {
  transform: scale(1);
}

What ships with it

Read from the repository

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