bastien f80f83ee77 feat(animation): auto-install motion lib + detection across init/onboard/advisor

Add lib/animation-lib-check.sh with detect_anim_eligibility,
is_anim_lib_installed and recommend_anim_install_cmd helpers.
Wire it into the framework:
- init-project STEP 5e: silent auto-install after scaffold validated
- onboard STEP 2.5: propose + wait for user confirmation (opt-in on
  existing projects)
- plugin-advisor PHASE 1/2/3: read-only detection only, never installs
- scaffolder PHASE 4: clarifies boundary (orchestrator owns motion install)
- design-gate filesystem signals: motion / motion-v / framer-motion /
  gsap / lottie-react / react-spring / popmotion / auto-animate

Recommends `motion` (rebranded from framer-motion in Nov 2024) for
React-family and Svelte stacks, `motion-v` for Vue 3 / Nuxt. Excludes
React Native (use react-native-reanimated), backend, embedded, Flutter.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-27 15:32:46 +02:00

2.3 KiB

Raw Blame History

DESIGN GATE — Auto-detect design tasks, activate ui-ux-pro-max

Inline snippet. Include in any agent STEP 0 that may touch UI/design.

WHEN TO RUN

Run this gate when the task description OR target files match design signals.

DETECTION

Check BOTH the task description AND the filesystem:

Task description signals (case-insensitive match on $ARGUMENTS):

UI keywords: component, button, card, modal, dialog, tooltip, dropdown, sidebar, navbar, header, footer, layout, grid, form, input, table
Style keywords: css, style, theme, color, font, spacing, margin, padding, border, shadow, animation, transition, hover, responsive, dark mode, light mode
Design keywords: design, ui, ux, visual, polish, pixel, figma, mockup, wireframe, prototype
Framework UI: tailwind, styled-component, emotion, chakra, radix, shadcn, headless

Filesystem signals (quick check, no deep scan):

Target files have .tsx, .jsx, .css, .scss, .less, or .module.css extension
tailwind.config or postcss.config present in project root
tokens/, theme/, or design-system/ directory exists
Storybook config (.storybook/) present
Animation lib in package.json deps: motion, motion-v, framer-motion (legacy), gsap, @gsap/react, lottie-react, react-spring, popmotion, @formkit/auto-animate

DECISION

If at least one signal is detected:

Check if ui-ux-pro-max is active:

source "$HOME/.claude/lib/detect-plugins.sh"
detect_uiux_pro_max && echo "ACTIVE" || echo "INACTIVE"

If ACTIVE → proceed silently. The plugin context is already available.
If INACTIVE → ask the user:
```
🎨 DESIGN DETECTED — task touches UI/styling.
ui-ux-pro-max is not active. Activate it for design-aware guidance?
(yes / no)
```
- On yes → print ⚡ Activating ui-ux-pro-max... and proceed with design context.
- On no → print Proceeding without design plugin. and continue normally.

IMPORTANT

This gate adds ~5 seconds overhead. Worth it for design quality.
Do NOT run this gate on pure backend/API/CLI tasks (no signals = no gate).
If no signal detected → skip entirely, zero overhead.

2.3 KiB Raw Blame History