# 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…

- **Type:** Skill
- **Install:** `agentstack add skill-tommylower-cortex-css-interaction-tips`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tommylower](https://agentstack.voostack.com/s/tommylower)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tommylower](https://github.com/tommylower)
- **Source:** https://github.com/tommylower/cortex/tree/main/design/craft/css-interaction-tips

## Install

```sh
agentstack add skill-tommylower-cortex-css-interaction-tips
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
```css
button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
```

### Smooth element entrance (not jarring)
```css
.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
```css
.animated {
  will-change: transform;
}
```

### Large tap target via pseudo-element
```css
button {
  position: relative;
}
button::after {
  content: '';
  position: absolute;
  inset: -10px; /* expands hit area by 10px on all sides */
}
```

### Hover-only on desktop
```css
@media (hover: hover) and (pointer: fine) {
  .element:hover {
    /* hover styles here */
  }
}
```

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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [tommylower](https://github.com/tommylower)
- **Source:** [tommylower/cortex](https://github.com/tommylower/cortex)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tommylower-cortex-css-interaction-tips
- Seller: https://agentstack.voostack.com/s/tommylower
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.