diff --git a/plugins/design-skills/README.md b/plugins/design-skills/README.md index e663d67..be7dc58 100644 --- a/plugins/design-skills/README.md +++ b/plugins/design-skills/README.md @@ -4,15 +4,15 @@ Third-party design skills, copied here so they install with the rest of lippstac | Skill | Source | What it does | | :- | :- | :- | -| `apple-design` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/apple-design) @ `5206a95` | Apple's approach to interface design and physical motion, for the web: springs, gestures, sheets, materials, type. | -| `review-animations` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/review-animations) @ `5206a95` | Reviews motion code against a high bar. Flags by default; approval is earned. | -| `break-ui` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/break-ui) @ `5206a95` | Feeds a component worst-case data (long names, empty lists, huge numbers, emoji) behind a toggle and reports what broke, with fixes. | -| `prototype` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/prototype) @ `5206a95` | Builds several genuinely different versions of a UI piece behind a live picker so you choose one. Only runs when called by name. | -| `animation-performance` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/animation-performance) @ `5206a95` | Finds why an animation drops frames and fixes it: composite-only properties, CSS vs WAAPI vs rAF, Framer Motion's accelerated path, React re-renders per frame, `will-change`. | -| `animate` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/animate) @ `5206a95` | Builds one animation in the order that decides whether it feels right: should it move at all, purpose, easing, duration, origin. The other motion skills hand easing and timing to it. | -| `choreograph` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/choreograph) @ `5206a95` | Coordinates several elements moving together: order, overlap, stagger and what stays still, so a group reads as one motion. | -| `gestures` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/gestures) @ `5206a95` | Drag, swipe and sheet interactions that follow the finger 1:1 and can be caught mid-animation. Points to Vaul for drawers. | -| `remove-animations` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/remove-animations) @ `5206a95` | Finds motion the interface doesn't need (keyboard actions, high-frequency surfaces, decoration) and deletes it. Only subtracts. | +| `apple-design` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/apple-design) @ `715c180` | Apple's approach to interface design and physical motion, for the web: springs, gestures, sheets, materials, type. | +| `review-animations` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/review-animations) @ `715c180` | Reviews motion code against a high bar. Flags by default; approval is earned. | +| `break-ui` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/break-ui) @ `715c180` | Feeds a component worst-case data (long names, empty lists, huge numbers, emoji) behind a toggle and reports what broke, with fixes. | +| `prototype` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/prototype) @ `715c180` | Builds several genuinely different versions of a UI piece behind a live picker so you choose one. Only runs when called by name. | +| `animation-performance` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/animation-performance) @ `715c180` | Finds why an animation drops frames and fixes it: composite-only properties, CSS vs WAAPI vs rAF, Framer Motion's accelerated path, React re-renders per frame, `will-change`. | +| `animate` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/animate) @ `715c180` | Builds one animation in the order that decides whether it feels right: should it move at all, purpose, easing, duration, origin. The other motion skills hand easing and timing to it. | +| `choreograph` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/choreograph) @ `715c180` | Coordinates several elements moving together: order, overlap, stagger and what stays still, so a group reads as one motion. | +| `gestures` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/gestures) @ `715c180` | Drag, swipe and sheet interactions that follow the finger 1:1 and can be caught mid-animation. Points to Vaul for drawers. | +| `remove-animations` | [emilkowalski/skills](https://github.com/emilkowalski/skills/tree/main/skills/remove-animations) @ `715c180` | Finds motion the interface doesn't need (keyboard actions, high-frequency surfaces, decoration) and deletes it. Only subtracts. | | `hallmark` | [nutlope/hallmark](https://github.com/nutlope/hallmark) @ `407fa68` (2.0.0) | Pushes generated pages away from the generic AI look: a fixed floor of rules, a dealt theme, and a lint script (`sloplint`, needs Node) that must pass before it hands back. Builds from the real product when it can capture it. Verbs `audit` and `redesign`. | ## Install diff --git a/plugins/design-skills/skills/gestures/SKILL.md b/plugins/design-skills/skills/gestures/SKILL.md index ab82fed..23e6562 100644 --- a/plugins/design-skills/skills/gestures/SKILL.md +++ b/plugins/design-skills/skills/gestures/SKILL.md @@ -99,8 +99,8 @@ Run through this for every gesture you ship: ## Reduced motion -Tracking is direct manipulation — the user is producing the motion — so it stays. What reduces: momentum flings, bounce, and any decorative motion around the gesture. On release under `prefers-reduced-motion`, settle with a short opacity/position change instead of a bouncy spring. See the `animation-accessibility` skill for the full two-variant workflow. +Tracking is direct manipulation — the user is producing the motion — so it stays. What reduces: momentum flings, bounce, and any decorative motion around the gesture. On release under `prefers-reduced-motion`, settle with a short opacity/position change instead of a bouncy spring. ## When it still feels wrong -A "weird" spring is usually fixed by increasing `damping`. A gesture that stutters is a performance problem — check the track-phase rules above first, then use the `animation-performance` skill. To diagnose a feeling you can't name, use the `debug-animation` skill: record the gesture and scrub it frame by frame. +A "weird" spring is usually fixed by increasing `damping`. A gesture that stutters is a performance problem — check the track-phase rules above first, then use the `animation-performance` skill. To diagnose a feeling you can't name, record the gesture and scrub it frame by frame.