Css interaction tips
Public skill library, workflows, tools, and references for AI-assisted development.
npx -y skills add tommylower/cortex --skill css-interaction-tipsAssembled 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.
What its author says it does
Copied from the file, not written here
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.
SKILL.md
2.5 KB, 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);
}