create-dstack 0.1.1 → 0.1.2

package/templates/.cursor/skills/create-pr/SKILL.md

@@ -1,138 +0,0 @@
----
-name: create-pr
-description: Turn current workspace changes into a published GitHub pull request by creating or reusing a branch, committing the changes, pushing the branch, and opening a PR with gh.
----
-
-## 1. Trigger this skill
-
-- Use when the user asks to run end-to-end PR publishing for current local changes.
-- Use when the user asks for branch creation + commit + push + PR in one command.
-
-## 2. Required tooling
-
-- `git` and `gh` are available and authenticated.
-- `scripts/create-pr.sh` exists at repo root.
-- Git remote `origin` is configured.
-
-## 3. Inputs you can pass
-
-- `TARGET_BRANCH`: desired branch name.
-- `COMMIT_MESSAGE`: commit message used for the commit.
-- `PR_TITLE`: PR title shown in GitHub.
-- `PR_BODY_FILE`: optional markdown file path for PR body.
-- `BASE_BRANCH`: PR base branch (default `main`).
-- `GIT_REMOTE`: git remote name (default `origin`).
-
-## 4. Process
-
-Run the workflow via script:
-
-```bash
-TARGET_BRANCH=<branch-name> \
-COMMIT_MESSAGE="<message>" \
-PR_TITLE="<PR title>" \
-BASE_BRANCH=<base branch> \
-scripts/create-pr.sh
-```
-
-Workflow order:
-
-- Create or checkout `TARGET_BRANCH`.
-- Add all local changes and create one commit with `COMMIT_MESSAGE`.
-- Push branch with upstream tracking to `GIT_REMOTE`.
-- Open a PR from `TARGET_BRANCH` to `BASE_BRANCH`.
-- Print PR URL on success.
-
-## 5. Safety and failure behavior
-
-- Abort with clear error when no changes are present.
-- Abort when required commands are unavailable.
-- If PR creation fails after push, return a message with the pushed remote branch and stop cleanly.
-
-## 6. PR description guidelines
-
-# Pull Request Guide
-
-This document describes how we write PRs for this project. The goal is for a reviewer — or anyone reading the PR months later — to understand what problem existed, what decision was made, and why, without having to read the code.
-
----
-
-## Structure
-
-Every non-trivial PR should follow this structure:
-
-### 1. Summary
-
-One short paragraph stating what this PR does and why it matters. No bullet lists here — write in prose.
-
-### 2. Before vs After
-
-For architectural or flow changes, show the old and new as ASCII diagrams or code blocks. Label the problems with the old approach explicitly. The diagram should make the improvement self-evident.
-
-```
-# Example
-Before:
-  raw snapshot (~50K tokens)
-    └─ agent A → agent B → agent C (sequential)
-
-After:
-  formatted input (~1.5K tokens)
-    ├─ agent A
-    ├─ agent B  (parallel)
-    └─ agent C
-```
-
-### 3. Key Improvements
-
-Bullet list of the specific wins. Be concrete — use numbers.
-
-- "~97% token reduction" not "significant token reduction"
-- "MAE dropped from 3.5 to 2.1" not "improved accuracy"
-- "removed one sequential LLM hop" not "made it faster"
-
-### 4. Deep-dive Sections
-
-For anything non-obvious — evaluation methodology, format design, data shape changes, model selection — give it its own titled section. Reviewers who want detail can read it; others can skip.
-
-### 5. New Data Shape
-
-Whenever the output schema of a service or database record changes, show the new shape as a TypeScript snippet or JSON example.
-
-### 6. Open TODOs
-
-Explicitly list what is **not** in this PR but should be done. Bold the item name, one sentence of context. This prevents follow-up questions and captures intent before it gets lost.
-
-- **Item name** — why it matters and what needs to happen
-
-### 7. Test Plan
-
-Checkboxes with specific commands and specific things to verify. Not "test it works" but:
-
-- [ ] Run `doppler run -- npx tsx scripts/foo.ts` — verify output X
-- [ ] Process a new profile end-to-end — confirm data shape matches Y
-- [ ] Retry a partially-failed job — confirm only failed steps re-run
-
----
-
-## Tone and Style
-
-- No emojis
-- No tool attribution footers (e.g. "Generated with X")
-- Write in plain declarative sentences: "Personality runs in parallel" not "We made personality run in parallel"
-- Use exact numbers where available
-- For model or approach comparisons, use a table
-- Don't hedge: say what happened
-
-## Title Format
-
-Use [Conventional Commits](https://www.conventionalcommits.org/). Use title case for PR titles (capitalize principal words; lowercase short conjunctions like `and`, `or`, `for` unless they start the title). Preserve identifiers as they appear in code (`Cluster.AgentId`, API names, etc.).
-
-Keep titles under 72 characters. Use the description/body for details, not the title.
-
----
-
-## PR Size
-
-- Prefer one focused PR over several small ones for tightly coupled changes
-- If a PR touches both a refactor and a new feature, split them unless they are inseparable
-- Infrastructure changes (schema, DB migrations) should be their own PR

package/templates/.cursor/skills/frontend-design/SKILL.md

@@ -1,45 +0,0 @@
----
-name: frontend-design
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-license: Complete terms in LICENSE.txt
----
-
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
-
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
-
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: You is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/templates/.cursor/skills/make-interfaces-feel-better/SKILL.md

@@ -1,122 +0,0 @@
----
-name: make-interfaces-feel-better
-description: Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
----
-
-# Details that make interfaces feel better
-
-Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.
-
-## Quick Reference
-
-| Category                      | When to Use                                                                       |
-| ----------------------------- | --------------------------------------------------------------------------------- |
-| [Typography](typography.md)   | Text wrapping, font smoothing, tabular numbers                                    |
-| [Surfaces](surfaces.md)       | Border radius, optical alignment, shadows, image outlines, hit areas              |
-| [Animations](animations.md)   | Interruptible animations, enter/exit transitions, icon animations, scale on press |
-| [Performance](performance.md) | Transition specificity, `will-change` usage                                       |
-
-## Core Principles
-
-### 1. Concentric Border Radius
-
-Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off.
-
-### 2. Optical Over Geometric Alignment
-
-When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment.
-
-### 3. Shadows Over Borders
-
-Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to any background; solid borders don't.
-
-### 4. Interruptible Animations
-
-Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once.
-
-### 5. Split and Stagger Enter Animations
-
-Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay.
-
-### 6. Subtle Exit Animations
-
-Use a small fixed `translateY` instead of full height. Exits should be softer than enters.
-
-### 7. Contextual Icon Animations
-
-Animate icons with `opacity`, `scale`, and `blur` instead of toggling visibility. Use exactly these values: scale from `0.25` to `1`, opacity from `0` to `1`, blur from `4px` to `0px`. If the project has `motion` or `framer-motion` in `package.json`, use `transition: { type: "spring", duration: 0.3, bounce: 0 }` — bounce must always be `0`. If no motion library is installed, keep both icons in the DOM (one absolute-positioned) and cross-fade with CSS transitions using `cubic-bezier(0.2, 0, 0, 1)` — this gives both enter and exit animations without any dependency.
-
-### 8. Font Smoothing
-
-Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text.
-
-### 9. Tabular Numbers
-
-Use `font-variant-numeric: tabular-nums` for any dynamically updating numbers to prevent layout shift.
-
-### 10. Text Wrapping
-
-Use `text-wrap: balance` on headings. Use `text-wrap: pretty` for body text to avoid orphans.
-
-### 11. Image Outlines
-
-Add a subtle `1px` outline with low opacity to images for consistent depth.
-
-### 12. Scale on Press
-
-A subtle `scale(0.96)` on click gives buttons tactile feedback. Always use `0.96`. Never use a value smaller than `0.95` — anything below feels exaggerated. Add a `static` prop to disable it when motion would be distracting.
-
-### 13. Skip Animation on Page Load
-
-Use `initial={false}` on `AnimatePresence` to prevent enter animations on first render. Verify it doesn't break intentional entrance animations.
-
-### 14. Never Use `transition: all`
-
-Always specify exact properties: `transition-property: scale, opacity`. Tailwind's `transition-transform` covers `transform, translate, scale, rotate`.
-
-### 15. Use `will-change` Sparingly
-
-Only for `transform`, `opacity`, `filter` — properties the GPU can composite. Never use `will-change: all`. Only add when you notice first-frame stutter.
-
-### 16. Minimum Hit Area
-
-Interactive elements need at least 40×40px hit area. Extend with a pseudo-element if the visible element is smaller. Never let hit areas of two elements overlap.
-
-## Common Mistakes
-
-| Mistake                                | Fix                                               |
-| -------------------------------------- | ------------------------------------------------- |
-| Same border radius on parent and child | Calculate `outerRadius = innerRadius + padding`   |
-| Icons look off-center                  | Adjust optically with padding or fix SVG directly |
-| Hard borders between sections          | Use layered `box-shadow` with transparency        |
-| Jarring enter/exit animations          | Split, stagger, and keep exits subtle             |
-| Numbers cause layout shift             | Apply `tabular-nums`                              |
-| Heavy text on macOS                    | Apply `antialiased` to root                       |
-| Animation plays on page load           | Add `initial={false}` to `AnimatePresence`        |
-| `transition: all` on elements          | Specify exact properties                          |
-| First-frame animation stutter          | Add `will-change: transform` (sparingly)          |
-| Tiny hit areas on small controls       | Extend with pseudo-element to 40×40px             |
-
-## Review Checklist
-
-- [ ] Nested rounded elements use concentric border radius
-- [ ] Icons are optically centered, not just geometrically
-- [ ] Shadows used instead of borders where appropriate
-- [ ] Enter animations are split and staggered
-- [ ] Exit animations are subtle
-- [ ] Dynamic numbers use tabular-nums
-- [ ] Font smoothing is applied
-- [ ] Headings use text-wrap: balance
-- [ ] Images have subtle outlines
-- [ ] Buttons use scale on press where appropriate
-- [ ] AnimatePresence uses `initial={false}` for default-state elements
-- [ ] No `transition: all` — only specific properties
-- [ ] `will-change` only on transform/opacity/filter, never `all`
-- [ ] Interactive elements have at least 40×40px hit area
-
-## Reference Files
-
-- [typography.md](typography.md) — Text wrapping, font smoothing, tabular numbers
-- [surfaces.md](surfaces.md) — Border radius, optical alignment, shadows, image outlines
-- [animations.md](animations.md) — Interruptible animations, enter/exit transitions, icon animations, scale on press
-- [performance.md](performance.md) — Transition specificity, `will-change` usage

package/templates/.cursor/skills/make-interfaces-feel-better/animations.md

@@ -1,381 +0,0 @@
-# Animations
-
-Interruptible animations, enter/exit transitions, and contextual icon animations.
-
-## Interruptible Animations
-
-Users change intent mid-interaction. If animations aren't interruptible, the interface feels broken.
-
-### CSS Transitions vs. Keyframes
-
-|                   | CSS Transitions                                       | CSS Keyframe Animations                                    |
-| ----------------- | ----------------------------------------------------- | ---------------------------------------------------------- |
-| **Behavior**      | Interpolate toward latest state                       | Run on a fixed timeline                                    |
-| **Interruptible** | Yes — retargets mid-animation                         | No — restarts from beginning                               |
-| **Use for**       | Interactive state changes (hover, toggle, open/close) | Staged sequences that run once (enter animations, loading) |
-| **Duration**      | Adapts to remaining distance                          | Fixed regardless of state                                  |
-
-```css
-/* Good — interruptible transition for a toggle */
-.drawer {
-  transform: translateX(-100%);
-  transition: transform 200ms ease-out;
-}
-.drawer.open {
-  transform: translateX(0);
-}
-
-/* Clicking again mid-animation smoothly reverses — no jank */
-```
-
-```css
-/* Bad — keyframe animation for interactive element */
-.drawer.open {
-  animation: slideIn 200ms ease-out forwards;
-}
-
-/* Closing mid-animation snaps or restarts — feels broken */
-```
-
-**Rule:** Always prefer CSS transitions for interactive elements. Reserve keyframes for one-shot sequences.
-
-## Enter Animations: Split and Stagger
-
-Don't animate a single large container. Break content into semantic chunks and animate each individually.
-
-### Step by Step
-
-1. **Split** into logical groups (title, description, buttons)
-2. **Stagger** with ~100ms delay between groups
-3. **For titles**, consider splitting into individual words with ~80ms stagger
-4. **Combine** `opacity`, `blur`, and `translateY` for the enter effect
-
-### Code Example
-
-```tsx
-// Motion (Framer Motion) — staggered enter
-function PageHeader() {
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      variants={{
-        visible: { transition: { staggerChildren: 0.1 } }
-      }}
-    >
-      <motion.h1
-        variants={{
-          hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
-          visible: { opacity: 1, y: 0, filter: "blur(0px)" }
-        }}
-      >
-        Welcome
-      </motion.h1>
-
-      <motion.p
-        variants={{
-          hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
-          visible: { opacity: 1, y: 0, filter: "blur(0px)" }
-        }}
-      >
-        A description of the page.
-      </motion.p>
-
-      <motion.div
-        variants={{
-          hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
-          visible: { opacity: 1, y: 0, filter: "blur(0px)" }
-        }}
-      >
-        <Button>Get started</Button>
-      </motion.div>
-    </motion.div>
-  );
-}
-```
-
-### CSS-Only Stagger
-
-```css
-.stagger-item {
-  opacity: 0;
-  transform: translateY(12px);
-  filter: blur(4px);
-  animation: fadeInUp 400ms ease-out forwards;
-}
-
-.stagger-item:nth-child(1) {
-  animation-delay: 0ms;
-}
-.stagger-item:nth-child(2) {
-  animation-delay: 100ms;
-}
-.stagger-item:nth-child(3) {
-  animation-delay: 200ms;
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0);
-  }
-}
-```
-
-## Exit Animations
-
-Exit animations should be softer and less attention-grabbing than enter animations. The user's focus is moving to the next thing — don't fight for attention.
-
-### Subtle Exit (Recommended)
-
-```tsx
-// Small fixed translateY — indicates direction without drama
-<motion.div
-  exit={{
-    opacity: 0,
-    y: -12,
-    filter: "blur(4px)",
-    transition: { duration: 0.15, ease: "easeIn" }
-  }}
->
-  {content}
-</motion.div>
-```
-
-### Full Exit (When Context Matters)
-
-```tsx
-// Slide fully out — use when spatial context is important
-// (e.g., a card returning to a list, a drawer closing)
-<motion.div
-  exit={{
-    opacity: 0,
-    x: "-100%",
-    transition: { duration: 0.2, ease: "easeIn" }
-  }}
->
-  {content}
-</motion.div>
-```
-
-### Good vs. Bad
-
-```css
-/* Good — subtle exit */
-.item-exit {
-  opacity: 0;
-  transform: translateY(-12px);
-  transition:
-    opacity 150ms ease-in,
-    transform 150ms ease-in;
-}
-
-/* Bad — dramatic exit that steals focus */
-.item-exit {
-  opacity: 0;
-  transform: translateY(-100%) scale(0.5);
-  transition: all 400ms ease-in;
-}
-
-/* Bad — no exit animation at all (element just vanishes) */
-.item-exit {
-  display: none;
-}
-```
-
-**Key points:**
-
-- Use a small fixed `translateY` (e.g., `-12px`) instead of the full container height
-- Keep some directional movement to indicate where the element went
-- Exit duration should be shorter than enter duration (150ms vs 300ms)
-- Don't remove exit animations entirely — subtle motion preserves context
-
-## Contextual Icon Animations
-
-When icons appear or disappear contextually (on hover, on state change), animate them with `opacity`, `scale`, and `blur` rather than just toggling visibility.
-
-### Motion Example
-
-```tsx
-import { AnimatePresence, motion } from "motion/react";
-
-function IconButton({ isActive, icon: Icon }) {
-  return (
-    <button>
-      <AnimatePresence mode="popLayout">
-        <motion.span
-          key={isActive ? "active" : "inactive"}
-          initial={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
-          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-          exit={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
-          transition={{ type: "spring", duration: 0.3, bounce: 0 }}
-        >
-          <Icon />
-        </motion.span>
-      </AnimatePresence>
-    </button>
-  );
-}
-```
-
-### CSS Transition Approach (No Motion)
-
-If the project doesn't use Motion (Framer Motion), keep both icons in the DOM and cross-fade them with CSS transitions. Because neither icon unmounts, both enter and exit animate smoothly.
-
-The trick: one icon is absolutely positioned on top of the other. Toggling state cross-fades them — the entering icon scales up from `0.25` while the exiting icon scales down to `0.25`, both with opacity and blur.
-
-```tsx
-function IconButton({ isActive, ActiveIcon, InactiveIcon }) {
-  return (
-    <button>
-      <div className="relative">
-        <div
-          className={cn(
-            "absolute inset-0 flex items-center justify-center",
-            "transition-[opacity,filter,scale] duration-300",
-            "cubic-bezier(0.2, 0, 0, 1)",
-            isActive ? "scale-100 opacity-100 blur-0" : "scale-[0.25] opacity-0 blur-xs"
-          )}
-        >
-          <ActiveIcon />
-        </div>
-        <div
-          className={cn(
-            "transition-[opacity,filter,scale] duration-300",
-            "cubic-bezier(0.2, 0, 0, 1)",
-            isActive ? "scale-[0.25] opacity-0 blur-xs" : "scale-100 opacity-100 blur-0"
-          )}
-        >
-          <InactiveIcon />
-        </div>
-      </div>
-    </button>
-  );
-}
-```
-
-The non-absolute icon (InactiveIcon) defines the layout size. The absolute icon (ActiveIcon) overlays it without affecting flow.
-
-### Choosing Between Motion and CSS
-
-|                     | Motion (Framer Motion)              | CSS transitions (both icons in DOM)                    |
-| ------------------- | ----------------------------------- | ------------------------------------------------------ |
-| **Enter animation** | Yes                                 | Yes                                                    |
-| **Exit animation**  | Yes (via `AnimatePresence`)         | Yes (cross-fade — icon never unmounts)                 |
-| **Spring physics**  | Yes                                 | No — use `cubic-bezier(0.2, 0, 0, 1)` as approximation |
-| **When to use**     | Project already uses `motion/react` | No motion dependency, or keeping bundle small          |
-
-**Rule:** Check the project's `package.json` for `motion` or `framer-motion`. If present, use the Motion approach. If not, use the CSS cross-fade pattern — don't add a dependency just for icon transitions.
-
-### When to Animate Icons
-
-| Animate                                         | Don't animate                   |
-| ----------------------------------------------- | ------------------------------- |
-| Icons that appear on hover (action buttons)     | Static navigation icons         |
-| State change icons (play → pause, like → liked) | Decorative icons                |
-| Icons in contextual toolbars                    | Icons that are always visible   |
-| Loading/success state indicators                | Icon labels (text next to icon) |
-
-**Important:** Always use exactly these values for contextual icon animations — do not deviate:
-
-- `scale`: `0.25` → `1` (never use `0.5` or `0.6`)
-- `opacity`: `0` → `1`
-- `filter`: `"blur(4px)"` → `"blur(0px)"`
-- `transition`: `{ type: "spring", duration: 0.3, bounce: 0 }` — **bounce must always be `0`**, never `0.1` or any other value
-
-## Scale on Press
-
-A subtle scale-down on click gives buttons tactile feedback. Always use `scale(0.96)`. Never use a value smaller than `0.95` — anything below feels exaggerated. Use CSS transitions for interruptibility — if the user releases mid-press, it should smoothly return.
-
-Not every button needs this. Add a `static` prop to your button component that disables the scale effect when the motion would be distracting.
-
-### CSS Example
-
-```css
-.button {
-  transition-property: scale;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-
-.button:active {
-  scale: 0.96;
-}
-```
-
-### Tailwind Example
-
-```tsx
-<button className="transition-transform duration-150 ease-out active:scale-[0.96]">Click me</button>
-```
-
-### Motion Example
-
-```tsx
-<motion.button whileTap={{ scale: 0.96 }}>Click me</motion.button>
-```
-
-### Static Prop Pattern
-
-Extract the scale class into a variable and conditionally apply it based on a `static` prop:
-
-```tsx
-const tapScale = "active:not-disabled:scale-[0.96]";
-
-function Button({ static: isStatic, className, children, ...props }) {
-  return (
-    <button
-      className={cn(
-        "transition-transform duration-150 ease-out",
-        !isStatic && tapScale,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-
-// Usage
-<Button>Click me</Button>           {/* scales on press */}
-<Button static>Submit</Button>       {/* no scale */}
-```
-
-## Skip Animation on Page Load
-
-Use `initial={false}` on `AnimatePresence` to prevent enter animations from firing on first render. Elements that are already in their default state shouldn't animate in on page load — only on subsequent state changes.
-
-### When It Works
-
-```tsx
-// Good — icon doesn't animate in on mount, only on state change
-<AnimatePresence initial={false} mode="popLayout">
-  <motion.span
-    key={isActive ? "active" : "inactive"}
-    initial={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
-    animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-    exit={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
-  >
-    <Icon />
-  </motion.span>
-</AnimatePresence>
-```
-
-Works well for: icon swaps, toggles, tabs, segmented controls — anything that has a default state on page load.
-
-### When It Breaks
-
-Don't use `initial={false}` when the component relies on its `initial` prop to set up a first-time enter animation, like a staggered page hero or a loading state. In those cases, removing the initial animation skips the entire entrance.
-
-```tsx
-// Bad — initial={false} would skip the staggered page enter entirely
-<AnimatePresence initial={false}>
-  <motion.div initial="hidden" animate="visible" variants={...}>
-    ...
-  </motion.div>
-</AnimatePresence>
-```
-
-Verify the component still looks right on a full page refresh before applying this.