[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-minimax-frontend-dev":3,"mdc-c4z3r3-key":40,"related-repo-minimax-frontend-dev":4236,"related-org-minimax-frontend-dev":4352},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":29,"repoUrl":30,"updatedAt":31,"license":32,"forks":33,"topics":34,"repo":35,"sourceUrl":38,"mdContent":39},"frontend-dev","build visually striking frontend web pages","Full-stack frontend development combining premium UI design, cinematic animations,\nAI-generated media assets, persuasive copywriting, and visual art. Builds complete,\nvisually striking web pages with real media, advanced motion, and compelling copy.\nUse when: building landing pages, marketing sites, product pages, dashboards,\ngenerating media assets (image\u002Fvideo\u002Faudio\u002Fmusic), writing conversion copy,\ncreating generative art, or implementing cinematic scroll animations.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"minimax","MiniMax","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fminimax.jpg","MiniMax-AI",[13,17,20,23,26],{"name":14,"slug":15,"type":16},"Creative","creative","tag",{"name":18,"slug":19,"type":16},"Web Development","web-development",{"name":21,"slug":22,"type":16},"Animation","animation",{"name":24,"slug":25,"type":16},"Frontend","frontend",{"name":27,"slug":28,"type":16},"Design","design",13030,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills","2026-07-13T06:16:39.108827","MIT",1118,[],{"repoUrl":30,"stars":29,"forks":33,"topics":36,"description":37},[],null,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Ffrontend-dev","---\nname: frontend-dev\ndescription: |\n  Full-stack frontend development combining premium UI design, cinematic animations,\n  AI-generated media assets, persuasive copywriting, and visual art. Builds complete,\n  visually striking web pages with real media, advanced motion, and compelling copy.\n  Use when: building landing pages, marketing sites, product pages, dashboards,\n  generating media assets (image\u002Fvideo\u002Faudio\u002Fmusic), writing conversion copy,\n  creating generative art, or implementing cinematic scroll animations.\nlicense: MIT\nmetadata:\n  version: \"1.0.0\"\n  category: frontend\n  sources:\n    - taste-skill by Leonxlnx (https:\u002F\u002Fgithub.com\u002FLeonxlnx\u002Ftaste-skill) — Design engineering framework\n    - canvas-design by Anthropic (https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fcanvas-design) — Static visual art workflow\n    - algorithmic-art by Anthropic (https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Falgorithmic-art) — Generative art workflow\n    - Framer Motion documentation\n    - GSAP \u002F GreenSock documentation\n    - Three.js documentation\n    - Tailwind CSS documentation\n    - React \u002F Next.js documentation\n    - AIDA Framework (Elmo Lewis)\n    - p5.js documentation\n---\n\n# Frontend Studio\n\nBuild complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.\n\n## Invocation\n\n```\n\u002Ffrontend-dev \u003Crequest>\n```\n\nThe user provides their request as natural language (e.g. \"build a landing page for a music streaming app\").\n\n## Skill Structure\n\n```\nfrontend-dev\u002F\n├── SKILL.md                      # Core skill (this file)\n├── scripts\u002F                      # Asset generation scripts\n│   ├── minimax_tts.py            # Text-to-speech\n│   ├── minimax_music.py          # Music generation\n│   ├── minimax_video.py          # Video generation (async)\n│   └── minimax_image.py          # Image generation\n├── references\u002F                   # Detailed guides (read as needed)\n│   ├── minimax-cli-reference.md  # CLI flags quick reference\n│   ├── asset-prompt-guide.md     # Asset prompt engineering rules\n│   ├── minimax-tts-guide.md      # TTS usage & voices\n│   ├── minimax-music-guide.md    # Music prompts & lyrics format\n│   ├── minimax-video-guide.md    # Camera commands & models\n│   ├── minimax-image-guide.md    # Ratios & batch generation\n│   ├── minimax-voice-catalog.md  # All voice IDs\n│   ├── motion-recipes.md         # Animation code snippets\n│   ├── env-setup.md              # Environment setup\n│   └── troubleshooting.md        # Common issues\n├── templates\u002F                    # Visual art templates\n│   ├── viewer.html               # p5.js interactive art base\n│   └── generator_template.js     # p5.js code reference\n└── canvas-fonts\u002F                 # Static art fonts (TTF + licenses)\n```\n\n## Project Structure\n\n### Assets (Universal)\n\nAll frameworks use the same asset organization:\n\n```\nassets\u002F\n├── images\u002F\n│   ├── hero-landing-1710xxx.webp\n│   ├── icon-feature-01.webp\n│   └── bg-pattern.svg\n├── videos\u002F\n│   ├── hero-bg-1710xxx.mp4\n│   └── demo-preview.mp4\n└── audio\u002F\n    ├── bgm-ambient-1710xxx.mp3\n    └── tts-intro-1710xxx.mp3\n```\n\n**Asset naming:** `{type}-{descriptor}-{timestamp}.{ext}`\n\n### By Framework\n\n| Framework | Asset Location | Component Location |\n|-----------|---------------|-------------------|\n| **Pure HTML** | `.\u002Fassets\u002F` | N\u002FA (inline or `.\u002Fjs\u002F`) |\n| **React\u002FNext.js** | `public\u002Fassets\u002F` | `src\u002Fcomponents\u002F` |\n| **Vue\u002FNuxt** | `public\u002Fassets\u002F` | `src\u002Fcomponents\u002F` |\n| **Svelte\u002FSvelteKit** | `static\u002Fassets\u002F` | `src\u002Flib\u002Fcomponents\u002F` |\n| **Astro** | `public\u002Fassets\u002F` | `src\u002Fcomponents\u002F` |\n\n### Pure HTML\n\n```\nproject\u002F\n├── index.html\n├── assets\u002F\n│   ├── images\u002F\n│   ├── videos\u002F\n│   └── audio\u002F\n├── css\u002F\n│   └── styles.css\n└── js\u002F\n    └── main.js           # Animations (GSAP\u002Fvanilla)\n```\n\n### React \u002F Next.js\n\n```\nproject\u002F\n├── public\u002Fassets\u002F        # Static assets\n├── src\u002F\n│   ├── components\u002F\n│   │   ├── ui\u002F           # Button, Card, Input\n│   │   ├── sections\u002F     # Hero, Features, CTA\n│   │   └── motion\u002F       # RevealSection, StaggerGrid\n│   ├── lib\u002F\n│   ├── styles\u002F\n│   └── app\u002F              # Pages\n└── package.json\n```\n\n### Vue \u002F Nuxt\n\n```\nproject\u002F\n├── public\u002Fassets\u002F\n├── src\u002F                  # or root for Nuxt\n│   ├── components\u002F\n│   │   ├── ui\u002F\n│   │   ├── sections\u002F\n│   │   └── motion\u002F\n│   ├── composables\u002F      # Shared logic\n│   ├── pages\u002F\n│   └── assets\u002F           # Processed assets (optional)\n└── package.json\n```\n\n### Astro\n\n```\nproject\u002F\n├── public\u002Fassets\u002F\n├── src\u002F\n│   ├── components\u002F       # .astro, .tsx, .vue, .svelte\n│   ├── layouts\u002F\n│   ├── pages\u002F\n│   └── styles\u002F\n└── package.json\n```\n\n**Component naming:** PascalCase (`HeroSection.tsx`, `HeroSection.vue`, `HeroSection.astro`)\n\n---\n\n## Compliance\n\n**All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering.**\n\n---\n\n## Workflow\n### Phase 1: Design Architecture\n1. Analyze the request — determine page type and context\n2. Set design dials based on page type\n3. Plan layout sections and identify asset needs\n\n### Phase 2: Motion Architecture\n1. Select animation tools per section (see Tool Selection Matrix)\n2. Plan motion sequences following performance guardrails\n\n### Phase 3: Asset Generation\nGenerate all image\u002Fvideo\u002Faudio assets using `scripts\u002F`. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.\n\n1. Parse asset requirements (type, style, spec, usage)\n2. Craft optimized prompts, show to user, confirm before generating\n3. Execute via scripts, save to project — do NOT proceed to Phase 5 until all assets are saved locally\n\n### Phase 4: Copywriting & Content\nFollow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use \"Lorem ipsum\" — write real copy.\n\n### Phase 5: Build UI\nScaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All `\u003Cimg>`, `\u003Cvideo>`, `\u003Csource>`, and CSS `background-image` MUST reference local assets from Phase 3.\n\n### Phase 6: Quality Gates\nRun final checklist (see Quality Gates section).\n\n---\n\n# 1. Design Engineering\n\n## 1.1 Baseline Configuration\n\n| Dial | Default | Range |\n|------|---------|-------|\n| DESIGN_VARIANCE | 8 | 1=Symmetry, 10=Asymmetric |\n| MOTION_INTENSITY | 6 | 1=Static, 10=Cinematic |\n| VISUAL_DENSITY | 4 | 1=Airy, 10=Packed |\n\nAdapt dynamically based on user requests.\n\n## 1.2 Architecture Conventions\n- **DEPENDENCY VERIFICATION:** Check `package.json` before importing any library. Output install command if missing.\n- **Framework:** React\u002FNext.js. Default to Server Components. Interactive components must be isolated `\"use client\"` leaf components.\n- **Styling:** Tailwind CSS. Check version in `package.json` — NEVER mix v3\u002Fv4 syntax.\n- **ANTI-EMOJI POLICY:** NEVER use emojis anywhere. Use Phosphor or Radix icons only.\n- **Viewport:** Use `min-h-[100dvh]` not `h-screen`. Use CSS Grid not flex percentage math.\n- **Layout:** `max-w-[1400px] mx-auto` or `max-w-7xl`.\n\n## 1.3 Design Rules\n| Rule | Directive |\n|------|-----------|\n| Typography | Headlines: `text-4xl md:text-6xl tracking-tighter`. Body: `text-base leading-relaxed max-w-[65ch]`. **NEVER** use Inter — use Geist\u002FOutfit\u002FSatoshi. **NEVER** use Serif on dashboards. |\n| Color | Max 1 accent, saturation \u003C 80%. **NEVER** use AI purple\u002Fblue. Stick to one palette. |\n| Layout | **NEVER** use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts. |\n| Cards | **NEVER** use generic cards when DENSITY > 7. Use `border-t`, `divide-y`, or spacing. |\n| States | **ALWAYS** implement: Loading (skeleton), Empty, Error, Tactile feedback (`scale-[0.98]`). |\n| Forms | Label above input. Error below. `gap-2` for input blocks. |\n\n## 1.4 Anti-Slop Techniques\n\n- **Liquid Glass:** `backdrop-blur` + `border-white\u002F10` + `shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`\n- **Magnetic Buttons:** Use `useMotionValue`\u002F`useTransform` — never `useState` for continuous animations\n- **Perpetual Motion:** When INTENSITY > 5, add infinite micro-animations (Pulse, Float, Shimmer)\n- **Layout Transitions:** Use Framer `layout` and `layoutId` props\n- **Stagger:** Use `staggerChildren` or CSS `animation-delay: calc(var(--index) * 100ms)`\n\n## 1.5 Forbidden Patterns\n| Category | Banned |\n|----------|--------|\n| Visual | Neon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors |\n| Typography | Inter font, oversized H1s, Serif on dashboards |\n| Layout | 3-column equal card rows, floating elements with awkward gaps |\n| Components | Default shadcn\u002Fui without customization |\n\n## 1.6 Creative Arsenal\n\n| Category | Patterns |\n|----------|----------|\n| Navigation | Dock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu |\n| Layout | Bento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal |\n| Cards | Parallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal |\n| Scroll | Sticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe |\n| Gallery | Dome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect |\n| Text | Kinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid |\n| Micro | Particle explosion, Pull-to-refresh, Skeleton shimmer, Directional hover, Ripple click, SVG draw, Mesh gradient, Lens blur |\n\n## 1.7 Bento Paradigm\n\n- **Palette:** Background `#f9fafb`, cards pure white with `border-slate-200\u002F50`\n- **Surfaces:** `rounded-[2.5rem]`, diffusion shadow\n- **Typography:** Geist\u002FSatoshi, `tracking-tight` headers\n- **Labels:** Outside and below cards\n- **Animation:** Spring physics (`stiffness: 100, damping: 20`), infinite loops, `React.memo` isolation\n\n**5-Card Archetypes:**\n1. Intelligent List — auto-sorting with `layoutId`\n2. Command Input — typewriter + blinking cursor\n3. Live Status — breathing indicators\n4. Wide Data Stream — infinite horizontal carousel\n5. Contextual UI — staggered highlight + float-in toolbar\n\n## 1.8 Brand Override\n\nWhen brand styling is active:\n- Dark: `#141413`, Light: `#faf9f5`, Mid: `#b0aea5`, Subtle: `#e8e6dc`\n- Accents: Orange `#d97757`, Blue `#6a9bcc`, Green `#788c5d`\n- Fonts: Poppins (headings), Lora (body)\n\n---\n\n# 2. Motion Engine\n\n## 2.1 Tool Selection Matrix\n\n| Need | Tool |\n|------|------|\n| UI enter\u002Fexit\u002Flayout | **Framer Motion** — `AnimatePresence`, `layoutId`, springs |\n| Scroll storytelling (pin, scrub) | **GSAP + ScrollTrigger** — frame-accurate control |\n| Looping icons | **Lottie** — lazy-load (~50KB) |\n| 3D\u002FWebGL | **Three.js \u002F R3F** — isolated `\u003CCanvas>`, own `\"use client\"` boundary |\n| Hover\u002Ffocus states | **CSS only** — zero JS cost |\n| Native scroll-driven | **CSS** — `animation-timeline: scroll()` |\n\n**Conflict Rules [MANDATORY]:**\n- NEVER mix GSAP + Framer Motion in same component\n- R3F MUST live in isolated Canvas wrapper\n- ALWAYS lazy-load Lottie, GSAP, Three.js\n\n## 2.2 Intensity Scale\n\n| Level | Techniques |\n|-------|------------|\n| 1-2 Subtle | CSS transitions only, 150-300ms |\n| 3-4 Smooth | CSS keyframes + Framer animate, stagger ≤3 items |\n| 5-6 Fluid | `whileInView`, magnetic hover, parallax tilt |\n| 7-8 Cinematic | GSAP ScrollTrigger, pinned sections, horizontal hijack |\n| 9-10 Immersive | Full scroll sequences, Three.js particles, WebGL shaders |\n\n## 2.3 Animation Recipes\n\nSee `references\u002Fmotion-recipes.md` for full code. Summary:\n\n| Recipe | Tool | Use For |\n|--------|------|---------|\n| Scroll Reveal | Framer | Fade+slide on viewport entry |\n| Stagger Grid | Framer | Sequential list animations |\n| Pinned Timeline | GSAP | Horizontal scroll with pinning |\n| Tilt Card | Framer | Mouse-tracking 3D perspective |\n| Magnetic Button | Framer | Cursor-attracted buttons |\n| Text Scramble | Vanilla | Matrix-style decode effect |\n| SVG Path Draw | CSS | Scroll-linked path animation |\n| Horizontal Scroll | GSAP | Vertical-to-horizontal hijack |\n| Particle Background | R3F | Decorative WebGL particles |\n| Layout Morph | Framer | Card-to-modal expansion |\n\n## 2.4 Performance Rules\n**GPU-only properties (ONLY animate these):** `transform`, `opacity`, `filter`, `clip-path`\n\n**NEVER animate:** `width`, `height`, `top`, `left`, `margin`, `padding`, `font-size` — if you need these effects, use `transform: scale()` or `clip-path` instead.\n\n**Isolation:**\n- Perpetual animations MUST be in `React.memo` leaf components\n- `will-change: transform` ONLY during animation\n- `contain: layout style paint` on heavy containers\n\n**Mobile:**\n- ALWAYS respect `prefers-reduced-motion`\n- ALWAYS disable parallax\u002F3D on `pointer: coarse`\n- Cap particles: desktop 800, tablet 300, mobile 100\n- Disable GSAP pin on mobile \u003C 768px\n\n**Cleanup:** Every `useEffect` with GSAP\u002Fobservers MUST `return () => ctx.revert()`\n\n## 2.5 Springs & Easings\n\n| Feel | Framer Config |\n|------|---------------|\n| Snappy | `stiffness: 300, damping: 30` |\n| Smooth | `stiffness: 150, damping: 20` |\n| Bouncy | `stiffness: 100, damping: 10` |\n| Heavy | `stiffness: 60, damping: 20` |\n\n| CSS Easing | Value |\n|------------|-------|\n| Smooth decel | `cubic-bezier(0.16, 1, 0.3, 1)` |\n| Smooth accel | `cubic-bezier(0.7, 0, 0.84, 0)` |\n| Elastic | `cubic-bezier(0.34, 1.56, 0.64, 1)` |\n\n## 2.6 Accessibility\n- ALWAYS wrap motion in `prefers-reduced-motion` check\n- NEVER flash content > 3 times\u002Fsecond (seizure risk)\n- ALWAYS provide visible focus rings (use `outline` not `box-shadow`)\n- ALWAYS add `aria-live=\"polite\"` for dynamically revealed content\n- ALWAYS include pause button for auto-playing animations\n\n## 2.7 Dependencies\n\n```bash\nnpm install framer-motion           # UI (keep at top level)\nnpm install gsap                    # Scroll (lazy-load)\nnpm install lottie-react            # Icons (lazy-load)\nnpm install three @react-three\u002Ffiber @react-three\u002Fdrei  # 3D (lazy-load)\n```\n\n---\n\n# 3. Asset Generation\n\n## 3.1 Scripts\n\n| Type | Script | Pattern |\n|------|--------|---------|\n| TTS | `scripts\u002Fminimax_tts.py` | Sync |\n| Music | `scripts\u002Fminimax_music.py` | Sync |\n| Video | `scripts\u002Fminimax_video.py` | Async (create → poll → download) |\n| Image | `scripts\u002Fminimax_image.py` | Sync |\n\nEnv: `MINIMAX_API_KEY` (required).\n\n## 3.2 Workflow\n1. **Parse:** type, quantity, style, spec, usage\n2. **Craft prompt:** Be specific (composition, lighting, style). **NEVER** include text in image prompts.\n3. **Execute:** Show prompt to user, **MUST confirm before generating**, then run script\n4. **Save:** `\u003Cproject>\u002Fpublic\u002Fassets\u002F{images,videos,audio}\u002F` as `{type}-{descriptor}-{timestamp}.{ext}` — **MUST save locally**\n5. **Post-process:** Images → WebP, Videos → ffmpeg compress, Audio → normalize\n6. **Deliver:** File path + code snippet + CSS suggestion\n\n## 3.3 Preset Shortcuts\n\n| Shortcut | Spec |\n|----------|------|\n| `hero` | 16:9, cinematic, text-safe |\n| `thumb` | 1:1, centered subject |\n| `icon` | 1:1, flat, clean background |\n| `avatar` | 1:1, portrait, circular crop ready |\n| `banner` | 21:9, OG\u002Fsocial |\n| `bg-video` | 768P, 6s, `[Static shot]` |\n| `video-hd` | 1080P, 6s |\n| `bgm` | 30s, no vocals, loopable |\n| `tts` | MiniMax HD, MP3 |\n\n## 3.4 Reference\n\n- `references\u002Fminimax-cli-reference.md` — CLI flags\n- `references\u002Fasset-prompt-guide.md` — Prompt rules\n- `references\u002Fminimax-voice-catalog.md` — Voice IDs\n- `references\u002Fminimax-tts-guide.md` — TTS usage\n- `references\u002Fminimax-music-guide.md` — Music generation (prompts, lyrics, structure tags)\n- `references\u002Fminimax-video-guide.md` — Camera commands\n- `references\u002Fminimax-image-guide.md` — Ratios, batch\n\n---\n\n# 4. Copywriting\n\n## 4.1 Core Job\n\n1. Grab attention → 2. Create desire → 3. Remove friction → 4. Prompt action\n\n## 4.2 Frameworks\n\n**AIDA** (landing pages, emails):\n```\nATTENTION:  Bold headline (promise or pain)\nINTEREST:   Elaborate problem (\"yes, that's me\")\nDESIRE:     Show transformation\nACTION:     Clear CTA\n```\n\n**PAS** (pain-driven products):\n```\nPROBLEM:    State clearly\nAGITATE:    Make urgent\nSOLUTION:   Your product\n```\n\n**FAB** (product differentiation):\n```\nFEATURE:    What it does\nADVANTAGE:  Why it matters\nBENEFIT:    What customer gains\n```\n\n## 4.3 Headlines\n\n| Formula | Example |\n|---------|---------|\n| Promise | \"Double open rates in 30 days\" |\n| Question | \"Still wasting 10 hours\u002Fweek?\" |\n| How-To | \"How to automate your pipeline\" |\n| Number | \"7 mistakes killing conversions\" |\n| Negative | \"Stop losing leads\" |\n| Curiosity | \"The one change that tripled bookings\" |\n| Transformation | \"From 50 to 500 leads\" |\n\nBe specific. Lead with outcome, not method.\n\n## 4.4 CTAs\n\n**Bad:** Submit, Click here, Learn more\n\n**Good:** \"Start my free trial\", \"Get the template now\", \"Book my strategy call\"\n\n**Formula:** [Action Verb] + [What They Get] + [Urgency\u002FEase]\n\nPlace: above fold, after value, multiple on long pages.\n\n## 4.5 Emotional Triggers\n\n| Trigger | Example |\n|---------|---------|\n| FOMO | \"Only 3 spots left\" |\n| Fear of loss | \"Every day without this, you're losing $X\" |\n| Status | \"Join 10,000+ top agencies\" |\n| Ease | \"Set it up once. Forget forever.\" |\n| Frustration | \"Tired of tools that deliver nothing?\" |\n| Hope | \"Yes, you CAN hit $10K MRR\" |\n\n## 4.6 Objection Handling\n\n| Objection | Response |\n|-----------|----------|\n| Too expensive | Show ROI: \"Pays for itself in 2 weeks\" |\n| Won't work for me | Social proof from similar customer |\n| No time | \"Setup takes 10 minutes\" |\n| What if it fails | \"30-day money-back guarantee\" |\n| Need to think | Urgency\u002Fscarcity |\n\nPlace in FAQ, testimonials, near CTA.\n\n## 4.7 Proof Types\n\nTestimonials (with name\u002Ftitle), Case studies, Data\u002Fmetrics, Social proof, Certifications\n\n---\n\n# 5. Visual Art\n\nPhilosophy-first workflow. Two output modes.\n\n## 5.1 Output Modes\n\n| Mode | Output | When |\n|------|--------|------|\n| Static | PDF\u002FPNG | Posters, print, design assets |\n| Interactive | HTML (p5.js) | Generative art, explorable variations |\n\n## 5.2 Workflow\n\n### Step 1: Philosophy Creation\nName the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:\n- Static: space, form, color, scale, rhythm, hierarchy\n- Interactive: computation, emergence, noise, parametric variation\n\n### Step 2: Conceptual Seed\nIdentify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.\n\n### Step 3: Creation\n\n**Static Mode:**\n- Single page, highly visual, design-forward\n- Repeating patterns, perfect shapes\n- Sparse typography from `canvas-fonts\u002F`\n- Nothing overlaps, proper margins\n- Output: `.pdf` or `.png` + philosophy `.md`\n\n**Interactive Mode:**\n1. Read `templates\u002Fviewer.html` first\n2. Keep FIXED sections (header, sidebar, seed controls)\n3. Replace VARIABLE sections (algorithm, parameters)\n4. Seeded randomness: `randomSeed(seed); noiseSeed(seed);`\n5. Output: single self-contained HTML\n\n### Step 4: Refinement\nRefine, don't add. Make it crisp. Polish into masterpiece.\n\n---\n\n# Quality Gates\n**Design:**\n- [ ] Mobile layout collapse (`w-full`, `px-4`) for high-variance designs\n- [ ] `min-h-[100dvh]` not `h-screen`\n- [ ] Empty, loading, error states provided\n- [ ] Cards omitted where spacing suffices\n\n**Motion:**\n- [ ] Correct tool per selection matrix\n- [ ] No GSAP + Framer mixed in same component\n- [ ] All `useEffect` have cleanup returns\n- [ ] `prefers-reduced-motion` respected\n- [ ] Perpetual animations in `React.memo` leaf components\n- [ ] Only GPU properties animated\n- [ ] Heavy libraries lazy-loaded\n\n**General:**\n- [ ] Dependencies verified in `package.json`\n- [ ] **No placeholder URLs** — grep the output for `unsplash`, `picsum`, `placeholder`, `placehold`, `via.placeholder`, `lorem.space`, `dummyimage`. If ANY found, STOP and replace with generated assets before delivering.\n- [ ] **All media assets exist as local files** in the project's assets directory\n- [ ] Asset prompts confirmed with user before generation\n\n---\n\n*React and Next.js are trademarks of Meta Platforms, Inc. and Vercel, Inc., respectively. Vue.js is a trademark of Evan You. Tailwind CSS is a trademark of Tailwind Labs Inc. Svelte and SvelteKit are trademarks of their respective owners. GSAP\u002FGreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.*\n",{"data":41,"body":55},{"name":4,"description":6,"license":32,"metadata":42},{"version":43,"category":25,"sources":44},"1.0.0",[45,46,47,48,49,50,51,52,53,54],"taste-skill by Leonxlnx (https:\u002F\u002Fgithub.com\u002FLeonxlnx\u002Ftaste-skill) — Design engineering framework","canvas-design by Anthropic (https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fcanvas-design) — Static visual art workflow","algorithmic-art by Anthropic (https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Falgorithmic-art) — Generative art workflow","Framer Motion documentation","GSAP \u002F GreenSock documentation","Three.js documentation","Tailwind CSS documentation","React \u002F Next.js documentation","AIDA Framework (Elmo Lewis)","p5.js documentation",{"type":56,"children":57},"root",[58,67,73,80,93,98,104,113,119,126,131,140,157,163,341,346,355,361,370,376,385,390,399,431,435,441,449,452,458,464,484,490,503,509,522,540,546,551,557,592,598,603,606,612,618,699,704,710,828,834,1013,1019,1144,1150,1222,1228,1338,1344,1442,1450,1483,1489,1494,1564,1567,1573,1579,1743,1759,1777,1783,1876,1882,1895,2095,2101,2137,2210,2218,2255,2263,2298,2322,2328,2418,2491,2497,2554,2560,2673,2676,2682,2688,2801,2814,2820,2914,2920,3101,3107,3187,3190,3196,3202,3210,3216,3226,3235,3245,3254,3264,3273,3279,3392,3397,3403,3413,3423,3449,3454,3460,3559,3565,3652,3657,3663,3668,3671,3677,3682,3688,3751,3757,3763,3768,3781,3787,3792,3798,3806,3861,3869,3911,3917,3922,3925,3931,3939,4009,4017,4103,4111,4218,4221,4230],{"type":59,"tag":60,"props":61,"children":63},"element","h1",{"id":62},"frontend-studio",[64],{"type":65,"value":66},"text","Frontend Studio",{"type":59,"tag":68,"props":69,"children":70},"p",{},[71],{"type":65,"value":72},"Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.",{"type":59,"tag":74,"props":75,"children":77},"h2",{"id":76},"invocation",[78],{"type":65,"value":79},"Invocation",{"type":59,"tag":81,"props":82,"children":86},"pre",{"className":83,"code":85,"language":65},[84],"language-text","\u002Ffrontend-dev \u003Crequest>\n",[87],{"type":59,"tag":88,"props":89,"children":91},"code",{"__ignoreMap":90},"",[92],{"type":65,"value":85},{"type":59,"tag":68,"props":94,"children":95},{},[96],{"type":65,"value":97},"The user provides their request as natural language (e.g. \"build a landing page for a music streaming app\").",{"type":59,"tag":74,"props":99,"children":101},{"id":100},"skill-structure",[102],{"type":65,"value":103},"Skill Structure",{"type":59,"tag":81,"props":105,"children":108},{"className":106,"code":107,"language":65},[84],"frontend-dev\u002F\n├── SKILL.md                      # Core skill (this file)\n├── scripts\u002F                      # Asset generation scripts\n│   ├── minimax_tts.py            # Text-to-speech\n│   ├── minimax_music.py          # Music generation\n│   ├── minimax_video.py          # Video generation (async)\n│   └── minimax_image.py          # Image generation\n├── references\u002F                   # Detailed guides (read as needed)\n│   ├── minimax-cli-reference.md  # CLI flags quick reference\n│   ├── asset-prompt-guide.md     # Asset prompt engineering rules\n│   ├── minimax-tts-guide.md      # TTS usage & voices\n│   ├── minimax-music-guide.md    # Music prompts & lyrics format\n│   ├── minimax-video-guide.md    # Camera commands & models\n│   ├── minimax-image-guide.md    # Ratios & batch generation\n│   ├── minimax-voice-catalog.md  # All voice IDs\n│   ├── motion-recipes.md         # Animation code snippets\n│   ├── env-setup.md              # Environment setup\n│   └── troubleshooting.md        # Common issues\n├── templates\u002F                    # Visual art templates\n│   ├── viewer.html               # p5.js interactive art base\n│   └── generator_template.js     # p5.js code reference\n└── canvas-fonts\u002F                 # Static art fonts (TTF + licenses)\n",[109],{"type":59,"tag":88,"props":110,"children":111},{"__ignoreMap":90},[112],{"type":65,"value":107},{"type":59,"tag":74,"props":114,"children":116},{"id":115},"project-structure",[117],{"type":65,"value":118},"Project Structure",{"type":59,"tag":120,"props":121,"children":123},"h3",{"id":122},"assets-universal",[124],{"type":65,"value":125},"Assets (Universal)",{"type":59,"tag":68,"props":127,"children":128},{},[129],{"type":65,"value":130},"All frameworks use the same asset organization:",{"type":59,"tag":81,"props":132,"children":135},{"className":133,"code":134,"language":65},[84],"assets\u002F\n├── images\u002F\n│   ├── hero-landing-1710xxx.webp\n│   ├── icon-feature-01.webp\n│   └── bg-pattern.svg\n├── videos\u002F\n│   ├── hero-bg-1710xxx.mp4\n│   └── demo-preview.mp4\n└── audio\u002F\n    ├── bgm-ambient-1710xxx.mp3\n    └── tts-intro-1710xxx.mp3\n",[136],{"type":59,"tag":88,"props":137,"children":138},{"__ignoreMap":90},[139],{"type":65,"value":134},{"type":59,"tag":68,"props":141,"children":142},{},[143,149,151],{"type":59,"tag":144,"props":145,"children":146},"strong",{},[147],{"type":65,"value":148},"Asset naming:",{"type":65,"value":150}," ",{"type":59,"tag":88,"props":152,"children":154},{"className":153},[],[155],{"type":65,"value":156},"{type}-{descriptor}-{timestamp}.{ext}",{"type":59,"tag":120,"props":158,"children":160},{"id":159},"by-framework",[161],{"type":65,"value":162},"By Framework",{"type":59,"tag":164,"props":165,"children":166},"table",{},[167,191],{"type":59,"tag":168,"props":169,"children":170},"thead",{},[171],{"type":59,"tag":172,"props":173,"children":174},"tr",{},[175,181,186],{"type":59,"tag":176,"props":177,"children":178},"th",{},[179],{"type":65,"value":180},"Framework",{"type":59,"tag":176,"props":182,"children":183},{},[184],{"type":65,"value":185},"Asset Location",{"type":59,"tag":176,"props":187,"children":188},{},[189],{"type":65,"value":190},"Component Location",{"type":59,"tag":192,"props":193,"children":194},"tbody",{},[195,229,258,285,314],{"type":59,"tag":172,"props":196,"children":197},{},[198,207,216],{"type":59,"tag":199,"props":200,"children":201},"td",{},[202],{"type":59,"tag":144,"props":203,"children":204},{},[205],{"type":65,"value":206},"Pure HTML",{"type":59,"tag":199,"props":208,"children":209},{},[210],{"type":59,"tag":88,"props":211,"children":213},{"className":212},[],[214],{"type":65,"value":215},".\u002Fassets\u002F",{"type":59,"tag":199,"props":217,"children":218},{},[219,221,227],{"type":65,"value":220},"N\u002FA (inline or ",{"type":59,"tag":88,"props":222,"children":224},{"className":223},[],[225],{"type":65,"value":226},".\u002Fjs\u002F",{"type":65,"value":228},")",{"type":59,"tag":172,"props":230,"children":231},{},[232,240,249],{"type":59,"tag":199,"props":233,"children":234},{},[235],{"type":59,"tag":144,"props":236,"children":237},{},[238],{"type":65,"value":239},"React\u002FNext.js",{"type":59,"tag":199,"props":241,"children":242},{},[243],{"type":59,"tag":88,"props":244,"children":246},{"className":245},[],[247],{"type":65,"value":248},"public\u002Fassets\u002F",{"type":59,"tag":199,"props":250,"children":251},{},[252],{"type":59,"tag":88,"props":253,"children":255},{"className":254},[],[256],{"type":65,"value":257},"src\u002Fcomponents\u002F",{"type":59,"tag":172,"props":259,"children":260},{},[261,269,277],{"type":59,"tag":199,"props":262,"children":263},{},[264],{"type":59,"tag":144,"props":265,"children":266},{},[267],{"type":65,"value":268},"Vue\u002FNuxt",{"type":59,"tag":199,"props":270,"children":271},{},[272],{"type":59,"tag":88,"props":273,"children":275},{"className":274},[],[276],{"type":65,"value":248},{"type":59,"tag":199,"props":278,"children":279},{},[280],{"type":59,"tag":88,"props":281,"children":283},{"className":282},[],[284],{"type":65,"value":257},{"type":59,"tag":172,"props":286,"children":287},{},[288,296,305],{"type":59,"tag":199,"props":289,"children":290},{},[291],{"type":59,"tag":144,"props":292,"children":293},{},[294],{"type":65,"value":295},"Svelte\u002FSvelteKit",{"type":59,"tag":199,"props":297,"children":298},{},[299],{"type":59,"tag":88,"props":300,"children":302},{"className":301},[],[303],{"type":65,"value":304},"static\u002Fassets\u002F",{"type":59,"tag":199,"props":306,"children":307},{},[308],{"type":59,"tag":88,"props":309,"children":311},{"className":310},[],[312],{"type":65,"value":313},"src\u002Flib\u002Fcomponents\u002F",{"type":59,"tag":172,"props":315,"children":316},{},[317,325,333],{"type":59,"tag":199,"props":318,"children":319},{},[320],{"type":59,"tag":144,"props":321,"children":322},{},[323],{"type":65,"value":324},"Astro",{"type":59,"tag":199,"props":326,"children":327},{},[328],{"type":59,"tag":88,"props":329,"children":331},{"className":330},[],[332],{"type":65,"value":248},{"type":59,"tag":199,"props":334,"children":335},{},[336],{"type":59,"tag":88,"props":337,"children":339},{"className":338},[],[340],{"type":65,"value":257},{"type":59,"tag":120,"props":342,"children":344},{"id":343},"pure-html",[345],{"type":65,"value":206},{"type":59,"tag":81,"props":347,"children":350},{"className":348,"code":349,"language":65},[84],"project\u002F\n├── index.html\n├── assets\u002F\n│   ├── images\u002F\n│   ├── videos\u002F\n│   └── audio\u002F\n├── css\u002F\n│   └── styles.css\n└── js\u002F\n    └── main.js           # Animations (GSAP\u002Fvanilla)\n",[351],{"type":59,"tag":88,"props":352,"children":353},{"__ignoreMap":90},[354],{"type":65,"value":349},{"type":59,"tag":120,"props":356,"children":358},{"id":357},"react-nextjs",[359],{"type":65,"value":360},"React \u002F Next.js",{"type":59,"tag":81,"props":362,"children":365},{"className":363,"code":364,"language":65},[84],"project\u002F\n├── public\u002Fassets\u002F        # Static assets\n├── src\u002F\n│   ├── components\u002F\n│   │   ├── ui\u002F           # Button, Card, Input\n│   │   ├── sections\u002F     # Hero, Features, CTA\n│   │   └── motion\u002F       # RevealSection, StaggerGrid\n│   ├── lib\u002F\n│   ├── styles\u002F\n│   └── app\u002F              # Pages\n└── package.json\n",[366],{"type":59,"tag":88,"props":367,"children":368},{"__ignoreMap":90},[369],{"type":65,"value":364},{"type":59,"tag":120,"props":371,"children":373},{"id":372},"vue-nuxt",[374],{"type":65,"value":375},"Vue \u002F Nuxt",{"type":59,"tag":81,"props":377,"children":380},{"className":378,"code":379,"language":65},[84],"project\u002F\n├── public\u002Fassets\u002F\n├── src\u002F                  # or root for Nuxt\n│   ├── components\u002F\n│   │   ├── ui\u002F\n│   │   ├── sections\u002F\n│   │   └── motion\u002F\n│   ├── composables\u002F      # Shared logic\n│   ├── pages\u002F\n│   └── assets\u002F           # Processed assets (optional)\n└── package.json\n",[381],{"type":59,"tag":88,"props":382,"children":383},{"__ignoreMap":90},[384],{"type":65,"value":379},{"type":59,"tag":120,"props":386,"children":388},{"id":387},"astro",[389],{"type":65,"value":324},{"type":59,"tag":81,"props":391,"children":394},{"className":392,"code":393,"language":65},[84],"project\u002F\n├── public\u002Fassets\u002F\n├── src\u002F\n│   ├── components\u002F       # .astro, .tsx, .vue, .svelte\n│   ├── layouts\u002F\n│   ├── pages\u002F\n│   └── styles\u002F\n└── package.json\n",[395],{"type":59,"tag":88,"props":396,"children":397},{"__ignoreMap":90},[398],{"type":65,"value":393},{"type":59,"tag":68,"props":400,"children":401},{},[402,407,409,415,417,423,424,430],{"type":59,"tag":144,"props":403,"children":404},{},[405],{"type":65,"value":406},"Component naming:",{"type":65,"value":408}," PascalCase (",{"type":59,"tag":88,"props":410,"children":412},{"className":411},[],[413],{"type":65,"value":414},"HeroSection.tsx",{"type":65,"value":416},", ",{"type":59,"tag":88,"props":418,"children":420},{"className":419},[],[421],{"type":65,"value":422},"HeroSection.vue",{"type":65,"value":416},{"type":59,"tag":88,"props":425,"children":427},{"className":426},[],[428],{"type":65,"value":429},"HeroSection.astro",{"type":65,"value":228},{"type":59,"tag":432,"props":433,"children":434},"hr",{},[],{"type":59,"tag":74,"props":436,"children":438},{"id":437},"compliance",[439],{"type":65,"value":440},"Compliance",{"type":59,"tag":68,"props":442,"children":443},{},[444],{"type":59,"tag":144,"props":445,"children":446},{},[447],{"type":65,"value":448},"All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering.",{"type":59,"tag":432,"props":450,"children":451},{},[],{"type":59,"tag":74,"props":453,"children":455},{"id":454},"workflow",[456],{"type":65,"value":457},"Workflow",{"type":59,"tag":120,"props":459,"children":461},{"id":460},"phase-1-design-architecture",[462],{"type":65,"value":463},"Phase 1: Design Architecture",{"type":59,"tag":465,"props":466,"children":467},"ol",{},[468,474,479],{"type":59,"tag":469,"props":470,"children":471},"li",{},[472],{"type":65,"value":473},"Analyze the request — determine page type and context",{"type":59,"tag":469,"props":475,"children":476},{},[477],{"type":65,"value":478},"Set design dials based on page type",{"type":59,"tag":469,"props":480,"children":481},{},[482],{"type":65,"value":483},"Plan layout sections and identify asset needs",{"type":59,"tag":120,"props":485,"children":487},{"id":486},"phase-2-motion-architecture",[488],{"type":65,"value":489},"Phase 2: Motion Architecture",{"type":59,"tag":465,"props":491,"children":492},{},[493,498],{"type":59,"tag":469,"props":494,"children":495},{},[496],{"type":65,"value":497},"Select animation tools per section (see Tool Selection Matrix)",{"type":59,"tag":469,"props":499,"children":500},{},[501],{"type":65,"value":502},"Plan motion sequences following performance guardrails",{"type":59,"tag":120,"props":504,"children":506},{"id":505},"phase-3-asset-generation",[507],{"type":65,"value":508},"Phase 3: Asset Generation",{"type":59,"tag":68,"props":510,"children":511},{},[512,514,520],{"type":65,"value":513},"Generate all image\u002Fvideo\u002Faudio assets using ",{"type":59,"tag":88,"props":515,"children":517},{"className":516},[],[518],{"type":65,"value":519},"scripts\u002F",{"type":65,"value":521},". NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.",{"type":59,"tag":465,"props":523,"children":524},{},[525,530,535],{"type":59,"tag":469,"props":526,"children":527},{},[528],{"type":65,"value":529},"Parse asset requirements (type, style, spec, usage)",{"type":59,"tag":469,"props":531,"children":532},{},[533],{"type":65,"value":534},"Craft optimized prompts, show to user, confirm before generating",{"type":59,"tag":469,"props":536,"children":537},{},[538],{"type":65,"value":539},"Execute via scripts, save to project — do NOT proceed to Phase 5 until all assets are saved locally",{"type":59,"tag":120,"props":541,"children":543},{"id":542},"phase-4-copywriting-content",[544],{"type":65,"value":545},"Phase 4: Copywriting & Content",{"type":59,"tag":68,"props":547,"children":548},{},[549],{"type":65,"value":550},"Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use \"Lorem ipsum\" — write real copy.",{"type":59,"tag":120,"props":552,"children":554},{"id":553},"phase-5-build-ui",[555],{"type":65,"value":556},"Phase 5: Build UI",{"type":59,"tag":68,"props":558,"children":559},{},[560,562,568,569,575,576,582,584,590],{"type":65,"value":561},"Scaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All ",{"type":59,"tag":88,"props":563,"children":565},{"className":564},[],[566],{"type":65,"value":567},"\u003Cimg>",{"type":65,"value":416},{"type":59,"tag":88,"props":570,"children":572},{"className":571},[],[573],{"type":65,"value":574},"\u003Cvideo>",{"type":65,"value":416},{"type":59,"tag":88,"props":577,"children":579},{"className":578},[],[580],{"type":65,"value":581},"\u003Csource>",{"type":65,"value":583},", and CSS ",{"type":59,"tag":88,"props":585,"children":587},{"className":586},[],[588],{"type":65,"value":589},"background-image",{"type":65,"value":591}," MUST reference local assets from Phase 3.",{"type":59,"tag":120,"props":593,"children":595},{"id":594},"phase-6-quality-gates",[596],{"type":65,"value":597},"Phase 6: Quality Gates",{"type":59,"tag":68,"props":599,"children":600},{},[601],{"type":65,"value":602},"Run final checklist (see Quality Gates section).",{"type":59,"tag":432,"props":604,"children":605},{},[],{"type":59,"tag":60,"props":607,"children":609},{"id":608},"_1-design-engineering",[610],{"type":65,"value":611},"1. Design Engineering",{"type":59,"tag":74,"props":613,"children":615},{"id":614},"_11-baseline-configuration",[616],{"type":65,"value":617},"1.1 Baseline Configuration",{"type":59,"tag":164,"props":619,"children":620},{},[621,642],{"type":59,"tag":168,"props":622,"children":623},{},[624],{"type":59,"tag":172,"props":625,"children":626},{},[627,632,637],{"type":59,"tag":176,"props":628,"children":629},{},[630],{"type":65,"value":631},"Dial",{"type":59,"tag":176,"props":633,"children":634},{},[635],{"type":65,"value":636},"Default",{"type":59,"tag":176,"props":638,"children":639},{},[640],{"type":65,"value":641},"Range",{"type":59,"tag":192,"props":643,"children":644},{},[645,663,681],{"type":59,"tag":172,"props":646,"children":647},{},[648,653,658],{"type":59,"tag":199,"props":649,"children":650},{},[651],{"type":65,"value":652},"DESIGN_VARIANCE",{"type":59,"tag":199,"props":654,"children":655},{},[656],{"type":65,"value":657},"8",{"type":59,"tag":199,"props":659,"children":660},{},[661],{"type":65,"value":662},"1=Symmetry, 10=Asymmetric",{"type":59,"tag":172,"props":664,"children":665},{},[666,671,676],{"type":59,"tag":199,"props":667,"children":668},{},[669],{"type":65,"value":670},"MOTION_INTENSITY",{"type":59,"tag":199,"props":672,"children":673},{},[674],{"type":65,"value":675},"6",{"type":59,"tag":199,"props":677,"children":678},{},[679],{"type":65,"value":680},"1=Static, 10=Cinematic",{"type":59,"tag":172,"props":682,"children":683},{},[684,689,694],{"type":59,"tag":199,"props":685,"children":686},{},[687],{"type":65,"value":688},"VISUAL_DENSITY",{"type":59,"tag":199,"props":690,"children":691},{},[692],{"type":65,"value":693},"4",{"type":59,"tag":199,"props":695,"children":696},{},[697],{"type":65,"value":698},"1=Airy, 10=Packed",{"type":59,"tag":68,"props":700,"children":701},{},[702],{"type":65,"value":703},"Adapt dynamically based on user requests.",{"type":59,"tag":74,"props":705,"children":707},{"id":706},"_12-architecture-conventions",[708],{"type":65,"value":709},"1.2 Architecture Conventions",{"type":59,"tag":711,"props":712,"children":713},"ul",{},[714,732,750,767,777,803],{"type":59,"tag":469,"props":715,"children":716},{},[717,722,724,730],{"type":59,"tag":144,"props":718,"children":719},{},[720],{"type":65,"value":721},"DEPENDENCY VERIFICATION:",{"type":65,"value":723}," Check ",{"type":59,"tag":88,"props":725,"children":727},{"className":726},[],[728],{"type":65,"value":729},"package.json",{"type":65,"value":731}," before importing any library. Output install command if missing.",{"type":59,"tag":469,"props":733,"children":734},{},[735,740,742,748],{"type":59,"tag":144,"props":736,"children":737},{},[738],{"type":65,"value":739},"Framework:",{"type":65,"value":741}," React\u002FNext.js. Default to Server Components. Interactive components must be isolated ",{"type":59,"tag":88,"props":743,"children":745},{"className":744},[],[746],{"type":65,"value":747},"\"use client\"",{"type":65,"value":749}," leaf components.",{"type":59,"tag":469,"props":751,"children":752},{},[753,758,760,765],{"type":59,"tag":144,"props":754,"children":755},{},[756],{"type":65,"value":757},"Styling:",{"type":65,"value":759}," Tailwind CSS. Check version in ",{"type":59,"tag":88,"props":761,"children":763},{"className":762},[],[764],{"type":65,"value":729},{"type":65,"value":766}," — NEVER mix v3\u002Fv4 syntax.",{"type":59,"tag":469,"props":768,"children":769},{},[770,775],{"type":59,"tag":144,"props":771,"children":772},{},[773],{"type":65,"value":774},"ANTI-EMOJI POLICY:",{"type":65,"value":776}," NEVER use emojis anywhere. Use Phosphor or Radix icons only.",{"type":59,"tag":469,"props":778,"children":779},{},[780,785,787,793,795,801],{"type":59,"tag":144,"props":781,"children":782},{},[783],{"type":65,"value":784},"Viewport:",{"type":65,"value":786}," Use ",{"type":59,"tag":88,"props":788,"children":790},{"className":789},[],[791],{"type":65,"value":792},"min-h-[100dvh]",{"type":65,"value":794}," not ",{"type":59,"tag":88,"props":796,"children":798},{"className":797},[],[799],{"type":65,"value":800},"h-screen",{"type":65,"value":802},". Use CSS Grid not flex percentage math.",{"type":59,"tag":469,"props":804,"children":805},{},[806,811,812,818,820,826],{"type":59,"tag":144,"props":807,"children":808},{},[809],{"type":65,"value":810},"Layout:",{"type":65,"value":150},{"type":59,"tag":88,"props":813,"children":815},{"className":814},[],[816],{"type":65,"value":817},"max-w-[1400px] mx-auto",{"type":65,"value":819}," or ",{"type":59,"tag":88,"props":821,"children":823},{"className":822},[],[824],{"type":65,"value":825},"max-w-7xl",{"type":65,"value":827},".",{"type":59,"tag":74,"props":829,"children":831},{"id":830},"_13-design-rules",[832],{"type":65,"value":833},"1.3 Design Rules",{"type":59,"tag":164,"props":835,"children":836},{},[837,853],{"type":59,"tag":168,"props":838,"children":839},{},[840],{"type":59,"tag":172,"props":841,"children":842},{},[843,848],{"type":59,"tag":176,"props":844,"children":845},{},[846],{"type":65,"value":847},"Rule",{"type":59,"tag":176,"props":849,"children":850},{},[851],{"type":65,"value":852},"Directive",{"type":59,"tag":192,"props":854,"children":855},{},[856,898,917,934,966,992],{"type":59,"tag":172,"props":857,"children":858},{},[859,864],{"type":59,"tag":199,"props":860,"children":861},{},[862],{"type":65,"value":863},"Typography",{"type":59,"tag":199,"props":865,"children":866},{},[867,869,875,877,883,885,890,892,896],{"type":65,"value":868},"Headlines: ",{"type":59,"tag":88,"props":870,"children":872},{"className":871},[],[873],{"type":65,"value":874},"text-4xl md:text-6xl tracking-tighter",{"type":65,"value":876},". Body: ",{"type":59,"tag":88,"props":878,"children":880},{"className":879},[],[881],{"type":65,"value":882},"text-base leading-relaxed max-w-[65ch]",{"type":65,"value":884},". ",{"type":59,"tag":144,"props":886,"children":887},{},[888],{"type":65,"value":889},"NEVER",{"type":65,"value":891}," use Inter — use Geist\u002FOutfit\u002FSatoshi. ",{"type":59,"tag":144,"props":893,"children":894},{},[895],{"type":65,"value":889},{"type":65,"value":897}," use Serif on dashboards.",{"type":59,"tag":172,"props":899,"children":900},{},[901,906],{"type":59,"tag":199,"props":902,"children":903},{},[904],{"type":65,"value":905},"Color",{"type":59,"tag":199,"props":907,"children":908},{},[909,911,915],{"type":65,"value":910},"Max 1 accent, saturation \u003C 80%. ",{"type":59,"tag":144,"props":912,"children":913},{},[914],{"type":65,"value":889},{"type":65,"value":916}," use AI purple\u002Fblue. Stick to one palette.",{"type":59,"tag":172,"props":918,"children":919},{},[920,925],{"type":59,"tag":199,"props":921,"children":922},{},[923],{"type":65,"value":924},"Layout",{"type":59,"tag":199,"props":926,"children":927},{},[928,932],{"type":59,"tag":144,"props":929,"children":930},{},[931],{"type":65,"value":889},{"type":65,"value":933}," use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts.",{"type":59,"tag":172,"props":935,"children":936},{},[937,942],{"type":59,"tag":199,"props":938,"children":939},{},[940],{"type":65,"value":941},"Cards",{"type":59,"tag":199,"props":943,"children":944},{},[945,949,951,957,958,964],{"type":59,"tag":144,"props":946,"children":947},{},[948],{"type":65,"value":889},{"type":65,"value":950}," use generic cards when DENSITY > 7. Use ",{"type":59,"tag":88,"props":952,"children":954},{"className":953},[],[955],{"type":65,"value":956},"border-t",{"type":65,"value":416},{"type":59,"tag":88,"props":959,"children":961},{"className":960},[],[962],{"type":65,"value":963},"divide-y",{"type":65,"value":965},", or spacing.",{"type":59,"tag":172,"props":967,"children":968},{},[969,974],{"type":59,"tag":199,"props":970,"children":971},{},[972],{"type":65,"value":973},"States",{"type":59,"tag":199,"props":975,"children":976},{},[977,982,984,990],{"type":59,"tag":144,"props":978,"children":979},{},[980],{"type":65,"value":981},"ALWAYS",{"type":65,"value":983}," implement: Loading (skeleton), Empty, Error, Tactile feedback (",{"type":59,"tag":88,"props":985,"children":987},{"className":986},[],[988],{"type":65,"value":989},"scale-[0.98]",{"type":65,"value":991},").",{"type":59,"tag":172,"props":993,"children":994},{},[995,1000],{"type":59,"tag":199,"props":996,"children":997},{},[998],{"type":65,"value":999},"Forms",{"type":59,"tag":199,"props":1001,"children":1002},{},[1003,1005,1011],{"type":65,"value":1004},"Label above input. Error below. ",{"type":59,"tag":88,"props":1006,"children":1008},{"className":1007},[],[1009],{"type":65,"value":1010},"gap-2",{"type":65,"value":1012}," for input blocks.",{"type":59,"tag":74,"props":1014,"children":1016},{"id":1015},"_14-anti-slop-techniques",[1017],{"type":65,"value":1018},"1.4 Anti-Slop Techniques",{"type":59,"tag":711,"props":1020,"children":1021},{},[1022,1052,1085,1095,1121],{"type":59,"tag":469,"props":1023,"children":1024},{},[1025,1030,1031,1037,1039,1045,1046],{"type":59,"tag":144,"props":1026,"children":1027},{},[1028],{"type":65,"value":1029},"Liquid Glass:",{"type":65,"value":150},{"type":59,"tag":88,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":65,"value":1036},"backdrop-blur",{"type":65,"value":1038}," + ",{"type":59,"tag":88,"props":1040,"children":1042},{"className":1041},[],[1043],{"type":65,"value":1044},"border-white\u002F10",{"type":65,"value":1038},{"type":59,"tag":88,"props":1047,"children":1049},{"className":1048},[],[1050],{"type":65,"value":1051},"shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]",{"type":59,"tag":469,"props":1053,"children":1054},{},[1055,1060,1061,1067,1069,1075,1077,1083],{"type":59,"tag":144,"props":1056,"children":1057},{},[1058],{"type":65,"value":1059},"Magnetic Buttons:",{"type":65,"value":786},{"type":59,"tag":88,"props":1062,"children":1064},{"className":1063},[],[1065],{"type":65,"value":1066},"useMotionValue",{"type":65,"value":1068},"\u002F",{"type":59,"tag":88,"props":1070,"children":1072},{"className":1071},[],[1073],{"type":65,"value":1074},"useTransform",{"type":65,"value":1076}," — never ",{"type":59,"tag":88,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":65,"value":1082},"useState",{"type":65,"value":1084}," for continuous animations",{"type":59,"tag":469,"props":1086,"children":1087},{},[1088,1093],{"type":59,"tag":144,"props":1089,"children":1090},{},[1091],{"type":65,"value":1092},"Perpetual Motion:",{"type":65,"value":1094}," When INTENSITY > 5, add infinite micro-animations (Pulse, Float, Shimmer)",{"type":59,"tag":469,"props":1096,"children":1097},{},[1098,1103,1105,1111,1113,1119],{"type":59,"tag":144,"props":1099,"children":1100},{},[1101],{"type":65,"value":1102},"Layout Transitions:",{"type":65,"value":1104}," Use Framer ",{"type":59,"tag":88,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":65,"value":1110},"layout",{"type":65,"value":1112}," and ",{"type":59,"tag":88,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":65,"value":1118},"layoutId",{"type":65,"value":1120}," props",{"type":59,"tag":469,"props":1122,"children":1123},{},[1124,1129,1130,1136,1138],{"type":59,"tag":144,"props":1125,"children":1126},{},[1127],{"type":65,"value":1128},"Stagger:",{"type":65,"value":786},{"type":59,"tag":88,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":65,"value":1135},"staggerChildren",{"type":65,"value":1137}," or CSS ",{"type":59,"tag":88,"props":1139,"children":1141},{"className":1140},[],[1142],{"type":65,"value":1143},"animation-delay: calc(var(--index) * 100ms)",{"type":59,"tag":74,"props":1145,"children":1147},{"id":1146},"_15-forbidden-patterns",[1148],{"type":65,"value":1149},"1.5 Forbidden Patterns",{"type":59,"tag":164,"props":1151,"children":1152},{},[1153,1169],{"type":59,"tag":168,"props":1154,"children":1155},{},[1156],{"type":59,"tag":172,"props":1157,"children":1158},{},[1159,1164],{"type":59,"tag":176,"props":1160,"children":1161},{},[1162],{"type":65,"value":1163},"Category",{"type":59,"tag":176,"props":1165,"children":1166},{},[1167],{"type":65,"value":1168},"Banned",{"type":59,"tag":192,"props":1170,"children":1171},{},[1172,1185,1197,1209],{"type":59,"tag":172,"props":1173,"children":1174},{},[1175,1180],{"type":59,"tag":199,"props":1176,"children":1177},{},[1178],{"type":65,"value":1179},"Visual",{"type":59,"tag":199,"props":1181,"children":1182},{},[1183],{"type":65,"value":1184},"Neon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors",{"type":59,"tag":172,"props":1186,"children":1187},{},[1188,1192],{"type":59,"tag":199,"props":1189,"children":1190},{},[1191],{"type":65,"value":863},{"type":59,"tag":199,"props":1193,"children":1194},{},[1195],{"type":65,"value":1196},"Inter font, oversized H1s, Serif on dashboards",{"type":59,"tag":172,"props":1198,"children":1199},{},[1200,1204],{"type":59,"tag":199,"props":1201,"children":1202},{},[1203],{"type":65,"value":924},{"type":59,"tag":199,"props":1205,"children":1206},{},[1207],{"type":65,"value":1208},"3-column equal card rows, floating elements with awkward gaps",{"type":59,"tag":172,"props":1210,"children":1211},{},[1212,1217],{"type":59,"tag":199,"props":1213,"children":1214},{},[1215],{"type":65,"value":1216},"Components",{"type":59,"tag":199,"props":1218,"children":1219},{},[1220],{"type":65,"value":1221},"Default shadcn\u002Fui without customization",{"type":59,"tag":74,"props":1223,"children":1225},{"id":1224},"_16-creative-arsenal",[1226],{"type":65,"value":1227},"1.6 Creative Arsenal",{"type":59,"tag":164,"props":1229,"children":1230},{},[1231,1246],{"type":59,"tag":168,"props":1232,"children":1233},{},[1234],{"type":59,"tag":172,"props":1235,"children":1236},{},[1237,1241],{"type":59,"tag":176,"props":1238,"children":1239},{},[1240],{"type":65,"value":1163},{"type":59,"tag":176,"props":1242,"children":1243},{},[1244],{"type":65,"value":1245},"Patterns",{"type":59,"tag":192,"props":1247,"children":1248},{},[1249,1262,1274,1286,1299,1312,1325],{"type":59,"tag":172,"props":1250,"children":1251},{},[1252,1257],{"type":59,"tag":199,"props":1253,"children":1254},{},[1255],{"type":65,"value":1256},"Navigation",{"type":59,"tag":199,"props":1258,"children":1259},{},[1260],{"type":65,"value":1261},"Dock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu",{"type":59,"tag":172,"props":1263,"children":1264},{},[1265,1269],{"type":59,"tag":199,"props":1266,"children":1267},{},[1268],{"type":65,"value":924},{"type":59,"tag":199,"props":1270,"children":1271},{},[1272],{"type":65,"value":1273},"Bento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal",{"type":59,"tag":172,"props":1275,"children":1276},{},[1277,1281],{"type":59,"tag":199,"props":1278,"children":1279},{},[1280],{"type":65,"value":941},{"type":59,"tag":199,"props":1282,"children":1283},{},[1284],{"type":65,"value":1285},"Parallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal",{"type":59,"tag":172,"props":1287,"children":1288},{},[1289,1294],{"type":59,"tag":199,"props":1290,"children":1291},{},[1292],{"type":65,"value":1293},"Scroll",{"type":59,"tag":199,"props":1295,"children":1296},{},[1297],{"type":65,"value":1298},"Sticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe",{"type":59,"tag":172,"props":1300,"children":1301},{},[1302,1307],{"type":59,"tag":199,"props":1303,"children":1304},{},[1305],{"type":65,"value":1306},"Gallery",{"type":59,"tag":199,"props":1308,"children":1309},{},[1310],{"type":65,"value":1311},"Dome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect",{"type":59,"tag":172,"props":1313,"children":1314},{},[1315,1320],{"type":59,"tag":199,"props":1316,"children":1317},{},[1318],{"type":65,"value":1319},"Text",{"type":59,"tag":199,"props":1321,"children":1322},{},[1323],{"type":65,"value":1324},"Kinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid",{"type":59,"tag":172,"props":1326,"children":1327},{},[1328,1333],{"type":59,"tag":199,"props":1329,"children":1330},{},[1331],{"type":65,"value":1332},"Micro",{"type":59,"tag":199,"props":1334,"children":1335},{},[1336],{"type":65,"value":1337},"Particle explosion, Pull-to-refresh, Skeleton shimmer, Directional hover, Ripple click, SVG draw, Mesh gradient, Lens blur",{"type":59,"tag":74,"props":1339,"children":1341},{"id":1340},"_17-bento-paradigm",[1342],{"type":65,"value":1343},"1.7 Bento Paradigm",{"type":59,"tag":711,"props":1345,"children":1346},{},[1347,1371,1388,1406,1416],{"type":59,"tag":469,"props":1348,"children":1349},{},[1350,1355,1357,1363,1365],{"type":59,"tag":144,"props":1351,"children":1352},{},[1353],{"type":65,"value":1354},"Palette:",{"type":65,"value":1356}," Background ",{"type":59,"tag":88,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":65,"value":1362},"#f9fafb",{"type":65,"value":1364},", cards pure white with ",{"type":59,"tag":88,"props":1366,"children":1368},{"className":1367},[],[1369],{"type":65,"value":1370},"border-slate-200\u002F50",{"type":59,"tag":469,"props":1372,"children":1373},{},[1374,1379,1380,1386],{"type":59,"tag":144,"props":1375,"children":1376},{},[1377],{"type":65,"value":1378},"Surfaces:",{"type":65,"value":150},{"type":59,"tag":88,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":65,"value":1385},"rounded-[2.5rem]",{"type":65,"value":1387},", diffusion shadow",{"type":59,"tag":469,"props":1389,"children":1390},{},[1391,1396,1398,1404],{"type":59,"tag":144,"props":1392,"children":1393},{},[1394],{"type":65,"value":1395},"Typography:",{"type":65,"value":1397}," Geist\u002FSatoshi, ",{"type":59,"tag":88,"props":1399,"children":1401},{"className":1400},[],[1402],{"type":65,"value":1403},"tracking-tight",{"type":65,"value":1405}," headers",{"type":59,"tag":469,"props":1407,"children":1408},{},[1409,1414],{"type":59,"tag":144,"props":1410,"children":1411},{},[1412],{"type":65,"value":1413},"Labels:",{"type":65,"value":1415}," Outside and below cards",{"type":59,"tag":469,"props":1417,"children":1418},{},[1419,1424,1426,1432,1434,1440],{"type":59,"tag":144,"props":1420,"children":1421},{},[1422],{"type":65,"value":1423},"Animation:",{"type":65,"value":1425}," Spring physics (",{"type":59,"tag":88,"props":1427,"children":1429},{"className":1428},[],[1430],{"type":65,"value":1431},"stiffness: 100, damping: 20",{"type":65,"value":1433},"), infinite loops, ",{"type":59,"tag":88,"props":1435,"children":1437},{"className":1436},[],[1438],{"type":65,"value":1439},"React.memo",{"type":65,"value":1441}," isolation",{"type":59,"tag":68,"props":1443,"children":1444},{},[1445],{"type":59,"tag":144,"props":1446,"children":1447},{},[1448],{"type":65,"value":1449},"5-Card Archetypes:",{"type":59,"tag":465,"props":1451,"children":1452},{},[1453,1463,1468,1473,1478],{"type":59,"tag":469,"props":1454,"children":1455},{},[1456,1458],{"type":65,"value":1457},"Intelligent List — auto-sorting with ",{"type":59,"tag":88,"props":1459,"children":1461},{"className":1460},[],[1462],{"type":65,"value":1118},{"type":59,"tag":469,"props":1464,"children":1465},{},[1466],{"type":65,"value":1467},"Command Input — typewriter + blinking cursor",{"type":59,"tag":469,"props":1469,"children":1470},{},[1471],{"type":65,"value":1472},"Live Status — breathing indicators",{"type":59,"tag":469,"props":1474,"children":1475},{},[1476],{"type":65,"value":1477},"Wide Data Stream — infinite horizontal carousel",{"type":59,"tag":469,"props":1479,"children":1480},{},[1481],{"type":65,"value":1482},"Contextual UI — staggered highlight + float-in toolbar",{"type":59,"tag":74,"props":1484,"children":1486},{"id":1485},"_18-brand-override",[1487],{"type":65,"value":1488},"1.8 Brand Override",{"type":59,"tag":68,"props":1490,"children":1491},{},[1492],{"type":65,"value":1493},"When brand styling is active:",{"type":59,"tag":711,"props":1495,"children":1496},{},[1497,1532,1559],{"type":59,"tag":469,"props":1498,"children":1499},{},[1500,1502,1508,1510,1516,1518,1524,1526],{"type":65,"value":1501},"Dark: ",{"type":59,"tag":88,"props":1503,"children":1505},{"className":1504},[],[1506],{"type":65,"value":1507},"#141413",{"type":65,"value":1509},", Light: ",{"type":59,"tag":88,"props":1511,"children":1513},{"className":1512},[],[1514],{"type":65,"value":1515},"#faf9f5",{"type":65,"value":1517},", Mid: ",{"type":59,"tag":88,"props":1519,"children":1521},{"className":1520},[],[1522],{"type":65,"value":1523},"#b0aea5",{"type":65,"value":1525},", Subtle: ",{"type":59,"tag":88,"props":1527,"children":1529},{"className":1528},[],[1530],{"type":65,"value":1531},"#e8e6dc",{"type":59,"tag":469,"props":1533,"children":1534},{},[1535,1537,1543,1545,1551,1553],{"type":65,"value":1536},"Accents: Orange ",{"type":59,"tag":88,"props":1538,"children":1540},{"className":1539},[],[1541],{"type":65,"value":1542},"#d97757",{"type":65,"value":1544},", Blue ",{"type":59,"tag":88,"props":1546,"children":1548},{"className":1547},[],[1549],{"type":65,"value":1550},"#6a9bcc",{"type":65,"value":1552},", Green ",{"type":59,"tag":88,"props":1554,"children":1556},{"className":1555},[],[1557],{"type":65,"value":1558},"#788c5d",{"type":59,"tag":469,"props":1560,"children":1561},{},[1562],{"type":65,"value":1563},"Fonts: Poppins (headings), Lora (body)",{"type":59,"tag":432,"props":1565,"children":1566},{},[],{"type":59,"tag":60,"props":1568,"children":1570},{"id":1569},"_2-motion-engine",[1571],{"type":65,"value":1572},"2. Motion Engine",{"type":59,"tag":74,"props":1574,"children":1576},{"id":1575},"_21-tool-selection-matrix",[1577],{"type":65,"value":1578},"2.1 Tool Selection Matrix",{"type":59,"tag":164,"props":1580,"children":1581},{},[1582,1598],{"type":59,"tag":168,"props":1583,"children":1584},{},[1585],{"type":59,"tag":172,"props":1586,"children":1587},{},[1588,1593],{"type":59,"tag":176,"props":1589,"children":1590},{},[1591],{"type":65,"value":1592},"Need",{"type":59,"tag":176,"props":1594,"children":1595},{},[1596],{"type":65,"value":1597},"Tool",{"type":59,"tag":192,"props":1599,"children":1600},{},[1601,1633,1651,1669,1702,1720],{"type":59,"tag":172,"props":1602,"children":1603},{},[1604,1609],{"type":59,"tag":199,"props":1605,"children":1606},{},[1607],{"type":65,"value":1608},"UI enter\u002Fexit\u002Flayout",{"type":59,"tag":199,"props":1610,"children":1611},{},[1612,1617,1619,1625,1626,1631],{"type":59,"tag":144,"props":1613,"children":1614},{},[1615],{"type":65,"value":1616},"Framer Motion",{"type":65,"value":1618}," — ",{"type":59,"tag":88,"props":1620,"children":1622},{"className":1621},[],[1623],{"type":65,"value":1624},"AnimatePresence",{"type":65,"value":416},{"type":59,"tag":88,"props":1627,"children":1629},{"className":1628},[],[1630],{"type":65,"value":1118},{"type":65,"value":1632},", springs",{"type":59,"tag":172,"props":1634,"children":1635},{},[1636,1641],{"type":59,"tag":199,"props":1637,"children":1638},{},[1639],{"type":65,"value":1640},"Scroll storytelling (pin, scrub)",{"type":59,"tag":199,"props":1642,"children":1643},{},[1644,1649],{"type":59,"tag":144,"props":1645,"children":1646},{},[1647],{"type":65,"value":1648},"GSAP + ScrollTrigger",{"type":65,"value":1650}," — frame-accurate control",{"type":59,"tag":172,"props":1652,"children":1653},{},[1654,1659],{"type":59,"tag":199,"props":1655,"children":1656},{},[1657],{"type":65,"value":1658},"Looping icons",{"type":59,"tag":199,"props":1660,"children":1661},{},[1662,1667],{"type":59,"tag":144,"props":1663,"children":1664},{},[1665],{"type":65,"value":1666},"Lottie",{"type":65,"value":1668}," — lazy-load (~50KB)",{"type":59,"tag":172,"props":1670,"children":1671},{},[1672,1677],{"type":59,"tag":199,"props":1673,"children":1674},{},[1675],{"type":65,"value":1676},"3D\u002FWebGL",{"type":59,"tag":199,"props":1678,"children":1679},{},[1680,1685,1687,1693,1695,1700],{"type":59,"tag":144,"props":1681,"children":1682},{},[1683],{"type":65,"value":1684},"Three.js \u002F R3F",{"type":65,"value":1686}," — isolated ",{"type":59,"tag":88,"props":1688,"children":1690},{"className":1689},[],[1691],{"type":65,"value":1692},"\u003CCanvas>",{"type":65,"value":1694},", own ",{"type":59,"tag":88,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":65,"value":747},{"type":65,"value":1701}," boundary",{"type":59,"tag":172,"props":1703,"children":1704},{},[1705,1710],{"type":59,"tag":199,"props":1706,"children":1707},{},[1708],{"type":65,"value":1709},"Hover\u002Ffocus states",{"type":59,"tag":199,"props":1711,"children":1712},{},[1713,1718],{"type":59,"tag":144,"props":1714,"children":1715},{},[1716],{"type":65,"value":1717},"CSS only",{"type":65,"value":1719}," — zero JS cost",{"type":59,"tag":172,"props":1721,"children":1722},{},[1723,1728],{"type":59,"tag":199,"props":1724,"children":1725},{},[1726],{"type":65,"value":1727},"Native scroll-driven",{"type":59,"tag":199,"props":1729,"children":1730},{},[1731,1736,1737],{"type":59,"tag":144,"props":1732,"children":1733},{},[1734],{"type":65,"value":1735},"CSS",{"type":65,"value":1618},{"type":59,"tag":88,"props":1738,"children":1740},{"className":1739},[],[1741],{"type":65,"value":1742},"animation-timeline: scroll()",{"type":59,"tag":68,"props":1744,"children":1745},{},[1746],{"type":59,"tag":144,"props":1747,"children":1748},{},[1749,1751,1757],{"type":65,"value":1750},"Conflict Rules ",{"type":59,"tag":1752,"props":1753,"children":1754},"span",{},[1755],{"type":65,"value":1756},"MANDATORY",{"type":65,"value":1758},":",{"type":59,"tag":711,"props":1760,"children":1761},{},[1762,1767,1772],{"type":59,"tag":469,"props":1763,"children":1764},{},[1765],{"type":65,"value":1766},"NEVER mix GSAP + Framer Motion in same component",{"type":59,"tag":469,"props":1768,"children":1769},{},[1770],{"type":65,"value":1771},"R3F MUST live in isolated Canvas wrapper",{"type":59,"tag":469,"props":1773,"children":1774},{},[1775],{"type":65,"value":1776},"ALWAYS lazy-load Lottie, GSAP, Three.js",{"type":59,"tag":74,"props":1778,"children":1780},{"id":1779},"_22-intensity-scale",[1781],{"type":65,"value":1782},"2.2 Intensity Scale",{"type":59,"tag":164,"props":1784,"children":1785},{},[1786,1802],{"type":59,"tag":168,"props":1787,"children":1788},{},[1789],{"type":59,"tag":172,"props":1790,"children":1791},{},[1792,1797],{"type":59,"tag":176,"props":1793,"children":1794},{},[1795],{"type":65,"value":1796},"Level",{"type":59,"tag":176,"props":1798,"children":1799},{},[1800],{"type":65,"value":1801},"Techniques",{"type":59,"tag":192,"props":1803,"children":1804},{},[1805,1818,1831,1850,1863],{"type":59,"tag":172,"props":1806,"children":1807},{},[1808,1813],{"type":59,"tag":199,"props":1809,"children":1810},{},[1811],{"type":65,"value":1812},"1-2 Subtle",{"type":59,"tag":199,"props":1814,"children":1815},{},[1816],{"type":65,"value":1817},"CSS transitions only, 150-300ms",{"type":59,"tag":172,"props":1819,"children":1820},{},[1821,1826],{"type":59,"tag":199,"props":1822,"children":1823},{},[1824],{"type":65,"value":1825},"3-4 Smooth",{"type":59,"tag":199,"props":1827,"children":1828},{},[1829],{"type":65,"value":1830},"CSS keyframes + Framer animate, stagger ≤3 items",{"type":59,"tag":172,"props":1832,"children":1833},{},[1834,1839],{"type":59,"tag":199,"props":1835,"children":1836},{},[1837],{"type":65,"value":1838},"5-6 Fluid",{"type":59,"tag":199,"props":1840,"children":1841},{},[1842,1848],{"type":59,"tag":88,"props":1843,"children":1845},{"className":1844},[],[1846],{"type":65,"value":1847},"whileInView",{"type":65,"value":1849},", magnetic hover, parallax tilt",{"type":59,"tag":172,"props":1851,"children":1852},{},[1853,1858],{"type":59,"tag":199,"props":1854,"children":1855},{},[1856],{"type":65,"value":1857},"7-8 Cinematic",{"type":59,"tag":199,"props":1859,"children":1860},{},[1861],{"type":65,"value":1862},"GSAP ScrollTrigger, pinned sections, horizontal hijack",{"type":59,"tag":172,"props":1864,"children":1865},{},[1866,1871],{"type":59,"tag":199,"props":1867,"children":1868},{},[1869],{"type":65,"value":1870},"9-10 Immersive",{"type":59,"tag":199,"props":1872,"children":1873},{},[1874],{"type":65,"value":1875},"Full scroll sequences, Three.js particles, WebGL shaders",{"type":59,"tag":74,"props":1877,"children":1879},{"id":1878},"_23-animation-recipes",[1880],{"type":65,"value":1881},"2.3 Animation Recipes",{"type":59,"tag":68,"props":1883,"children":1884},{},[1885,1887,1893],{"type":65,"value":1886},"See ",{"type":59,"tag":88,"props":1888,"children":1890},{"className":1889},[],[1891],{"type":65,"value":1892},"references\u002Fmotion-recipes.md",{"type":65,"value":1894}," for full code. Summary:",{"type":59,"tag":164,"props":1896,"children":1897},{},[1898,1918],{"type":59,"tag":168,"props":1899,"children":1900},{},[1901],{"type":59,"tag":172,"props":1902,"children":1903},{},[1904,1909,1913],{"type":59,"tag":176,"props":1905,"children":1906},{},[1907],{"type":65,"value":1908},"Recipe",{"type":59,"tag":176,"props":1910,"children":1911},{},[1912],{"type":65,"value":1597},{"type":59,"tag":176,"props":1914,"children":1915},{},[1916],{"type":65,"value":1917},"Use For",{"type":59,"tag":192,"props":1919,"children":1920},{},[1921,1939,1956,1974,1991,2008,2026,2043,2060,2078],{"type":59,"tag":172,"props":1922,"children":1923},{},[1924,1929,1934],{"type":59,"tag":199,"props":1925,"children":1926},{},[1927],{"type":65,"value":1928},"Scroll Reveal",{"type":59,"tag":199,"props":1930,"children":1931},{},[1932],{"type":65,"value":1933},"Framer",{"type":59,"tag":199,"props":1935,"children":1936},{},[1937],{"type":65,"value":1938},"Fade+slide on viewport entry",{"type":59,"tag":172,"props":1940,"children":1941},{},[1942,1947,1951],{"type":59,"tag":199,"props":1943,"children":1944},{},[1945],{"type":65,"value":1946},"Stagger Grid",{"type":59,"tag":199,"props":1948,"children":1949},{},[1950],{"type":65,"value":1933},{"type":59,"tag":199,"props":1952,"children":1953},{},[1954],{"type":65,"value":1955},"Sequential list animations",{"type":59,"tag":172,"props":1957,"children":1958},{},[1959,1964,1969],{"type":59,"tag":199,"props":1960,"children":1961},{},[1962],{"type":65,"value":1963},"Pinned Timeline",{"type":59,"tag":199,"props":1965,"children":1966},{},[1967],{"type":65,"value":1968},"GSAP",{"type":59,"tag":199,"props":1970,"children":1971},{},[1972],{"type":65,"value":1973},"Horizontal scroll with pinning",{"type":59,"tag":172,"props":1975,"children":1976},{},[1977,1982,1986],{"type":59,"tag":199,"props":1978,"children":1979},{},[1980],{"type":65,"value":1981},"Tilt Card",{"type":59,"tag":199,"props":1983,"children":1984},{},[1985],{"type":65,"value":1933},{"type":59,"tag":199,"props":1987,"children":1988},{},[1989],{"type":65,"value":1990},"Mouse-tracking 3D perspective",{"type":59,"tag":172,"props":1992,"children":1993},{},[1994,1999,2003],{"type":59,"tag":199,"props":1995,"children":1996},{},[1997],{"type":65,"value":1998},"Magnetic Button",{"type":59,"tag":199,"props":2000,"children":2001},{},[2002],{"type":65,"value":1933},{"type":59,"tag":199,"props":2004,"children":2005},{},[2006],{"type":65,"value":2007},"Cursor-attracted buttons",{"type":59,"tag":172,"props":2009,"children":2010},{},[2011,2016,2021],{"type":59,"tag":199,"props":2012,"children":2013},{},[2014],{"type":65,"value":2015},"Text Scramble",{"type":59,"tag":199,"props":2017,"children":2018},{},[2019],{"type":65,"value":2020},"Vanilla",{"type":59,"tag":199,"props":2022,"children":2023},{},[2024],{"type":65,"value":2025},"Matrix-style decode effect",{"type":59,"tag":172,"props":2027,"children":2028},{},[2029,2034,2038],{"type":59,"tag":199,"props":2030,"children":2031},{},[2032],{"type":65,"value":2033},"SVG Path Draw",{"type":59,"tag":199,"props":2035,"children":2036},{},[2037],{"type":65,"value":1735},{"type":59,"tag":199,"props":2039,"children":2040},{},[2041],{"type":65,"value":2042},"Scroll-linked path animation",{"type":59,"tag":172,"props":2044,"children":2045},{},[2046,2051,2055],{"type":59,"tag":199,"props":2047,"children":2048},{},[2049],{"type":65,"value":2050},"Horizontal Scroll",{"type":59,"tag":199,"props":2052,"children":2053},{},[2054],{"type":65,"value":1968},{"type":59,"tag":199,"props":2056,"children":2057},{},[2058],{"type":65,"value":2059},"Vertical-to-horizontal hijack",{"type":59,"tag":172,"props":2061,"children":2062},{},[2063,2068,2073],{"type":59,"tag":199,"props":2064,"children":2065},{},[2066],{"type":65,"value":2067},"Particle Background",{"type":59,"tag":199,"props":2069,"children":2070},{},[2071],{"type":65,"value":2072},"R3F",{"type":59,"tag":199,"props":2074,"children":2075},{},[2076],{"type":65,"value":2077},"Decorative WebGL particles",{"type":59,"tag":172,"props":2079,"children":2080},{},[2081,2086,2090],{"type":59,"tag":199,"props":2082,"children":2083},{},[2084],{"type":65,"value":2085},"Layout Morph",{"type":59,"tag":199,"props":2087,"children":2088},{},[2089],{"type":65,"value":1933},{"type":59,"tag":199,"props":2091,"children":2092},{},[2093],{"type":65,"value":2094},"Card-to-modal expansion",{"type":59,"tag":74,"props":2096,"children":2098},{"id":2097},"_24-performance-rules",[2099],{"type":65,"value":2100},"2.4 Performance Rules",{"type":59,"tag":68,"props":2102,"children":2103},{},[2104,2109,2110,2116,2117,2123,2124,2130,2131],{"type":59,"tag":144,"props":2105,"children":2106},{},[2107],{"type":65,"value":2108},"GPU-only properties (ONLY animate these):",{"type":65,"value":150},{"type":59,"tag":88,"props":2111,"children":2113},{"className":2112},[],[2114],{"type":65,"value":2115},"transform",{"type":65,"value":416},{"type":59,"tag":88,"props":2118,"children":2120},{"className":2119},[],[2121],{"type":65,"value":2122},"opacity",{"type":65,"value":416},{"type":59,"tag":88,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":65,"value":2129},"filter",{"type":65,"value":416},{"type":59,"tag":88,"props":2132,"children":2134},{"className":2133},[],[2135],{"type":65,"value":2136},"clip-path",{"type":59,"tag":68,"props":2138,"children":2139},{},[2140,2145,2146,2152,2153,2159,2160,2166,2167,2173,2174,2180,2181,2187,2188,2194,2196,2202,2203,2208],{"type":59,"tag":144,"props":2141,"children":2142},{},[2143],{"type":65,"value":2144},"NEVER animate:",{"type":65,"value":150},{"type":59,"tag":88,"props":2147,"children":2149},{"className":2148},[],[2150],{"type":65,"value":2151},"width",{"type":65,"value":416},{"type":59,"tag":88,"props":2154,"children":2156},{"className":2155},[],[2157],{"type":65,"value":2158},"height",{"type":65,"value":416},{"type":59,"tag":88,"props":2161,"children":2163},{"className":2162},[],[2164],{"type":65,"value":2165},"top",{"type":65,"value":416},{"type":59,"tag":88,"props":2168,"children":2170},{"className":2169},[],[2171],{"type":65,"value":2172},"left",{"type":65,"value":416},{"type":59,"tag":88,"props":2175,"children":2177},{"className":2176},[],[2178],{"type":65,"value":2179},"margin",{"type":65,"value":416},{"type":59,"tag":88,"props":2182,"children":2184},{"className":2183},[],[2185],{"type":65,"value":2186},"padding",{"type":65,"value":416},{"type":59,"tag":88,"props":2189,"children":2191},{"className":2190},[],[2192],{"type":65,"value":2193},"font-size",{"type":65,"value":2195}," — if you need these effects, use ",{"type":59,"tag":88,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":65,"value":2201},"transform: scale()",{"type":65,"value":819},{"type":59,"tag":88,"props":2204,"children":2206},{"className":2205},[],[2207],{"type":65,"value":2136},{"type":65,"value":2209}," instead.",{"type":59,"tag":68,"props":2211,"children":2212},{},[2213],{"type":59,"tag":144,"props":2214,"children":2215},{},[2216],{"type":65,"value":2217},"Isolation:",{"type":59,"tag":711,"props":2219,"children":2220},{},[2221,2233,2244],{"type":59,"tag":469,"props":2222,"children":2223},{},[2224,2226,2231],{"type":65,"value":2225},"Perpetual animations MUST be in ",{"type":59,"tag":88,"props":2227,"children":2229},{"className":2228},[],[2230],{"type":65,"value":1439},{"type":65,"value":2232}," leaf components",{"type":59,"tag":469,"props":2234,"children":2235},{},[2236,2242],{"type":59,"tag":88,"props":2237,"children":2239},{"className":2238},[],[2240],{"type":65,"value":2241},"will-change: transform",{"type":65,"value":2243}," ONLY during animation",{"type":59,"tag":469,"props":2245,"children":2246},{},[2247,2253],{"type":59,"tag":88,"props":2248,"children":2250},{"className":2249},[],[2251],{"type":65,"value":2252},"contain: layout style paint",{"type":65,"value":2254}," on heavy containers",{"type":59,"tag":68,"props":2256,"children":2257},{},[2258],{"type":59,"tag":144,"props":2259,"children":2260},{},[2261],{"type":65,"value":2262},"Mobile:",{"type":59,"tag":711,"props":2264,"children":2265},{},[2266,2277,2288,2293],{"type":59,"tag":469,"props":2267,"children":2268},{},[2269,2271],{"type":65,"value":2270},"ALWAYS respect ",{"type":59,"tag":88,"props":2272,"children":2274},{"className":2273},[],[2275],{"type":65,"value":2276},"prefers-reduced-motion",{"type":59,"tag":469,"props":2278,"children":2279},{},[2280,2282],{"type":65,"value":2281},"ALWAYS disable parallax\u002F3D on ",{"type":59,"tag":88,"props":2283,"children":2285},{"className":2284},[],[2286],{"type":65,"value":2287},"pointer: coarse",{"type":59,"tag":469,"props":2289,"children":2290},{},[2291],{"type":65,"value":2292},"Cap particles: desktop 800, tablet 300, mobile 100",{"type":59,"tag":469,"props":2294,"children":2295},{},[2296],{"type":65,"value":2297},"Disable GSAP pin on mobile \u003C 768px",{"type":59,"tag":68,"props":2299,"children":2300},{},[2301,2306,2308,2314,2316],{"type":59,"tag":144,"props":2302,"children":2303},{},[2304],{"type":65,"value":2305},"Cleanup:",{"type":65,"value":2307}," Every ",{"type":59,"tag":88,"props":2309,"children":2311},{"className":2310},[],[2312],{"type":65,"value":2313},"useEffect",{"type":65,"value":2315}," with GSAP\u002Fobservers MUST ",{"type":59,"tag":88,"props":2317,"children":2319},{"className":2318},[],[2320],{"type":65,"value":2321},"return () => ctx.revert()",{"type":59,"tag":74,"props":2323,"children":2325},{"id":2324},"_25-springs-easings",[2326],{"type":65,"value":2327},"2.5 Springs & Easings",{"type":59,"tag":164,"props":2329,"children":2330},{},[2331,2347],{"type":59,"tag":168,"props":2332,"children":2333},{},[2334],{"type":59,"tag":172,"props":2335,"children":2336},{},[2337,2342],{"type":59,"tag":176,"props":2338,"children":2339},{},[2340],{"type":65,"value":2341},"Feel",{"type":59,"tag":176,"props":2343,"children":2344},{},[2345],{"type":65,"value":2346},"Framer Config",{"type":59,"tag":192,"props":2348,"children":2349},{},[2350,2367,2384,2401],{"type":59,"tag":172,"props":2351,"children":2352},{},[2353,2358],{"type":59,"tag":199,"props":2354,"children":2355},{},[2356],{"type":65,"value":2357},"Snappy",{"type":59,"tag":199,"props":2359,"children":2360},{},[2361],{"type":59,"tag":88,"props":2362,"children":2364},{"className":2363},[],[2365],{"type":65,"value":2366},"stiffness: 300, damping: 30",{"type":59,"tag":172,"props":2368,"children":2369},{},[2370,2375],{"type":59,"tag":199,"props":2371,"children":2372},{},[2373],{"type":65,"value":2374},"Smooth",{"type":59,"tag":199,"props":2376,"children":2377},{},[2378],{"type":59,"tag":88,"props":2379,"children":2381},{"className":2380},[],[2382],{"type":65,"value":2383},"stiffness: 150, damping: 20",{"type":59,"tag":172,"props":2385,"children":2386},{},[2387,2392],{"type":59,"tag":199,"props":2388,"children":2389},{},[2390],{"type":65,"value":2391},"Bouncy",{"type":59,"tag":199,"props":2393,"children":2394},{},[2395],{"type":59,"tag":88,"props":2396,"children":2398},{"className":2397},[],[2399],{"type":65,"value":2400},"stiffness: 100, damping: 10",{"type":59,"tag":172,"props":2402,"children":2403},{},[2404,2409],{"type":59,"tag":199,"props":2405,"children":2406},{},[2407],{"type":65,"value":2408},"Heavy",{"type":59,"tag":199,"props":2410,"children":2411},{},[2412],{"type":59,"tag":88,"props":2413,"children":2415},{"className":2414},[],[2416],{"type":65,"value":2417},"stiffness: 60, damping: 20",{"type":59,"tag":164,"props":2419,"children":2420},{},[2421,2437],{"type":59,"tag":168,"props":2422,"children":2423},{},[2424],{"type":59,"tag":172,"props":2425,"children":2426},{},[2427,2432],{"type":59,"tag":176,"props":2428,"children":2429},{},[2430],{"type":65,"value":2431},"CSS Easing",{"type":59,"tag":176,"props":2433,"children":2434},{},[2435],{"type":65,"value":2436},"Value",{"type":59,"tag":192,"props":2438,"children":2439},{},[2440,2457,2474],{"type":59,"tag":172,"props":2441,"children":2442},{},[2443,2448],{"type":59,"tag":199,"props":2444,"children":2445},{},[2446],{"type":65,"value":2447},"Smooth decel",{"type":59,"tag":199,"props":2449,"children":2450},{},[2451],{"type":59,"tag":88,"props":2452,"children":2454},{"className":2453},[],[2455],{"type":65,"value":2456},"cubic-bezier(0.16, 1, 0.3, 1)",{"type":59,"tag":172,"props":2458,"children":2459},{},[2460,2465],{"type":59,"tag":199,"props":2461,"children":2462},{},[2463],{"type":65,"value":2464},"Smooth accel",{"type":59,"tag":199,"props":2466,"children":2467},{},[2468],{"type":59,"tag":88,"props":2469,"children":2471},{"className":2470},[],[2472],{"type":65,"value":2473},"cubic-bezier(0.7, 0, 0.84, 0)",{"type":59,"tag":172,"props":2475,"children":2476},{},[2477,2482],{"type":59,"tag":199,"props":2478,"children":2479},{},[2480],{"type":65,"value":2481},"Elastic",{"type":59,"tag":199,"props":2483,"children":2484},{},[2485],{"type":59,"tag":88,"props":2486,"children":2488},{"className":2487},[],[2489],{"type":65,"value":2490},"cubic-bezier(0.34, 1.56, 0.64, 1)",{"type":59,"tag":74,"props":2492,"children":2494},{"id":2493},"_26-accessibility",[2495],{"type":65,"value":2496},"2.6 Accessibility",{"type":59,"tag":711,"props":2498,"children":2499},{},[2500,2512,2517,2536,2549],{"type":59,"tag":469,"props":2501,"children":2502},{},[2503,2505,2510],{"type":65,"value":2504},"ALWAYS wrap motion in ",{"type":59,"tag":88,"props":2506,"children":2508},{"className":2507},[],[2509],{"type":65,"value":2276},{"type":65,"value":2511}," check",{"type":59,"tag":469,"props":2513,"children":2514},{},[2515],{"type":65,"value":2516},"NEVER flash content > 3 times\u002Fsecond (seizure risk)",{"type":59,"tag":469,"props":2518,"children":2519},{},[2520,2522,2528,2529,2535],{"type":65,"value":2521},"ALWAYS provide visible focus rings (use ",{"type":59,"tag":88,"props":2523,"children":2525},{"className":2524},[],[2526],{"type":65,"value":2527},"outline",{"type":65,"value":794},{"type":59,"tag":88,"props":2530,"children":2532},{"className":2531},[],[2533],{"type":65,"value":2534},"box-shadow",{"type":65,"value":228},{"type":59,"tag":469,"props":2537,"children":2538},{},[2539,2541,2547],{"type":65,"value":2540},"ALWAYS add ",{"type":59,"tag":88,"props":2542,"children":2544},{"className":2543},[],[2545],{"type":65,"value":2546},"aria-live=\"polite\"",{"type":65,"value":2548}," for dynamically revealed content",{"type":59,"tag":469,"props":2550,"children":2551},{},[2552],{"type":65,"value":2553},"ALWAYS include pause button for auto-playing animations",{"type":59,"tag":74,"props":2555,"children":2557},{"id":2556},"_27-dependencies",[2558],{"type":65,"value":2559},"2.7 Dependencies",{"type":59,"tag":81,"props":2561,"children":2565},{"className":2562,"code":2563,"language":2564,"meta":90,"style":90},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install framer-motion           # UI (keep at top level)\nnpm install gsap                    # Scroll (lazy-load)\nnpm install lottie-react            # Icons (lazy-load)\nnpm install three @react-three\u002Ffiber @react-three\u002Fdrei  # 3D (lazy-load)\n","bash",[2566],{"type":59,"tag":88,"props":2567,"children":2568},{"__ignoreMap":90},[2569,2597,2619,2641],{"type":59,"tag":1752,"props":2570,"children":2573},{"class":2571,"line":2572},"line",1,[2574,2580,2586,2591],{"type":59,"tag":1752,"props":2575,"children":2577},{"style":2576},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[2578],{"type":65,"value":2579},"npm",{"type":59,"tag":1752,"props":2581,"children":2583},{"style":2582},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[2584],{"type":65,"value":2585}," install",{"type":59,"tag":1752,"props":2587,"children":2588},{"style":2582},[2589],{"type":65,"value":2590}," framer-motion",{"type":59,"tag":1752,"props":2592,"children":2594},{"style":2593},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2595],{"type":65,"value":2596},"           # UI (keep at top level)\n",{"type":59,"tag":1752,"props":2598,"children":2600},{"class":2571,"line":2599},2,[2601,2605,2609,2614],{"type":59,"tag":1752,"props":2602,"children":2603},{"style":2576},[2604],{"type":65,"value":2579},{"type":59,"tag":1752,"props":2606,"children":2607},{"style":2582},[2608],{"type":65,"value":2585},{"type":59,"tag":1752,"props":2610,"children":2611},{"style":2582},[2612],{"type":65,"value":2613}," gsap",{"type":59,"tag":1752,"props":2615,"children":2616},{"style":2593},[2617],{"type":65,"value":2618},"                    # Scroll (lazy-load)\n",{"type":59,"tag":1752,"props":2620,"children":2622},{"class":2571,"line":2621},3,[2623,2627,2631,2636],{"type":59,"tag":1752,"props":2624,"children":2625},{"style":2576},[2626],{"type":65,"value":2579},{"type":59,"tag":1752,"props":2628,"children":2629},{"style":2582},[2630],{"type":65,"value":2585},{"type":59,"tag":1752,"props":2632,"children":2633},{"style":2582},[2634],{"type":65,"value":2635}," lottie-react",{"type":59,"tag":1752,"props":2637,"children":2638},{"style":2593},[2639],{"type":65,"value":2640},"            # Icons (lazy-load)\n",{"type":59,"tag":1752,"props":2642,"children":2644},{"class":2571,"line":2643},4,[2645,2649,2653,2658,2663,2668],{"type":59,"tag":1752,"props":2646,"children":2647},{"style":2576},[2648],{"type":65,"value":2579},{"type":59,"tag":1752,"props":2650,"children":2651},{"style":2582},[2652],{"type":65,"value":2585},{"type":59,"tag":1752,"props":2654,"children":2655},{"style":2582},[2656],{"type":65,"value":2657}," three",{"type":59,"tag":1752,"props":2659,"children":2660},{"style":2582},[2661],{"type":65,"value":2662}," @react-three\u002Ffiber",{"type":59,"tag":1752,"props":2664,"children":2665},{"style":2582},[2666],{"type":65,"value":2667}," @react-three\u002Fdrei",{"type":59,"tag":1752,"props":2669,"children":2670},{"style":2593},[2671],{"type":65,"value":2672},"  # 3D (lazy-load)\n",{"type":59,"tag":432,"props":2674,"children":2675},{},[],{"type":59,"tag":60,"props":2677,"children":2679},{"id":2678},"_3-asset-generation",[2680],{"type":65,"value":2681},"3. Asset Generation",{"type":59,"tag":74,"props":2683,"children":2685},{"id":2684},"_31-scripts",[2686],{"type":65,"value":2687},"3.1 Scripts",{"type":59,"tag":164,"props":2689,"children":2690},{},[2691,2712],{"type":59,"tag":168,"props":2692,"children":2693},{},[2694],{"type":59,"tag":172,"props":2695,"children":2696},{},[2697,2702,2707],{"type":59,"tag":176,"props":2698,"children":2699},{},[2700],{"type":65,"value":2701},"Type",{"type":59,"tag":176,"props":2703,"children":2704},{},[2705],{"type":65,"value":2706},"Script",{"type":59,"tag":176,"props":2708,"children":2709},{},[2710],{"type":65,"value":2711},"Pattern",{"type":59,"tag":192,"props":2713,"children":2714},{},[2715,2737,2758,2780],{"type":59,"tag":172,"props":2716,"children":2717},{},[2718,2723,2732],{"type":59,"tag":199,"props":2719,"children":2720},{},[2721],{"type":65,"value":2722},"TTS",{"type":59,"tag":199,"props":2724,"children":2725},{},[2726],{"type":59,"tag":88,"props":2727,"children":2729},{"className":2728},[],[2730],{"type":65,"value":2731},"scripts\u002Fminimax_tts.py",{"type":59,"tag":199,"props":2733,"children":2734},{},[2735],{"type":65,"value":2736},"Sync",{"type":59,"tag":172,"props":2738,"children":2739},{},[2740,2745,2754],{"type":59,"tag":199,"props":2741,"children":2742},{},[2743],{"type":65,"value":2744},"Music",{"type":59,"tag":199,"props":2746,"children":2747},{},[2748],{"type":59,"tag":88,"props":2749,"children":2751},{"className":2750},[],[2752],{"type":65,"value":2753},"scripts\u002Fminimax_music.py",{"type":59,"tag":199,"props":2755,"children":2756},{},[2757],{"type":65,"value":2736},{"type":59,"tag":172,"props":2759,"children":2760},{},[2761,2766,2775],{"type":59,"tag":199,"props":2762,"children":2763},{},[2764],{"type":65,"value":2765},"Video",{"type":59,"tag":199,"props":2767,"children":2768},{},[2769],{"type":59,"tag":88,"props":2770,"children":2772},{"className":2771},[],[2773],{"type":65,"value":2774},"scripts\u002Fminimax_video.py",{"type":59,"tag":199,"props":2776,"children":2777},{},[2778],{"type":65,"value":2779},"Async (create → poll → download)",{"type":59,"tag":172,"props":2781,"children":2782},{},[2783,2788,2797],{"type":59,"tag":199,"props":2784,"children":2785},{},[2786],{"type":65,"value":2787},"Image",{"type":59,"tag":199,"props":2789,"children":2790},{},[2791],{"type":59,"tag":88,"props":2792,"children":2794},{"className":2793},[],[2795],{"type":65,"value":2796},"scripts\u002Fminimax_image.py",{"type":59,"tag":199,"props":2798,"children":2799},{},[2800],{"type":65,"value":2736},{"type":59,"tag":68,"props":2802,"children":2803},{},[2804,2806,2812],{"type":65,"value":2805},"Env: ",{"type":59,"tag":88,"props":2807,"children":2809},{"className":2808},[],[2810],{"type":65,"value":2811},"MINIMAX_API_KEY",{"type":65,"value":2813}," (required).",{"type":59,"tag":74,"props":2815,"children":2817},{"id":2816},"_32-workflow",[2818],{"type":65,"value":2819},"3.2 Workflow",{"type":59,"tag":465,"props":2821,"children":2822},{},[2823,2833,2849,2866,2894,2904],{"type":59,"tag":469,"props":2824,"children":2825},{},[2826,2831],{"type":59,"tag":144,"props":2827,"children":2828},{},[2829],{"type":65,"value":2830},"Parse:",{"type":65,"value":2832}," type, quantity, style, spec, usage",{"type":59,"tag":469,"props":2834,"children":2835},{},[2836,2841,2843,2847],{"type":59,"tag":144,"props":2837,"children":2838},{},[2839],{"type":65,"value":2840},"Craft prompt:",{"type":65,"value":2842}," Be specific (composition, lighting, style). ",{"type":59,"tag":144,"props":2844,"children":2845},{},[2846],{"type":65,"value":889},{"type":65,"value":2848}," include text in image prompts.",{"type":59,"tag":469,"props":2850,"children":2851},{},[2852,2857,2859,2864],{"type":59,"tag":144,"props":2853,"children":2854},{},[2855],{"type":65,"value":2856},"Execute:",{"type":65,"value":2858}," Show prompt to user, ",{"type":59,"tag":144,"props":2860,"children":2861},{},[2862],{"type":65,"value":2863},"MUST confirm before generating",{"type":65,"value":2865},", then run script",{"type":59,"tag":469,"props":2867,"children":2868},{},[2869,2874,2875,2881,2883,2888,2889],{"type":59,"tag":144,"props":2870,"children":2871},{},[2872],{"type":65,"value":2873},"Save:",{"type":65,"value":150},{"type":59,"tag":88,"props":2876,"children":2878},{"className":2877},[],[2879],{"type":65,"value":2880},"\u003Cproject>\u002Fpublic\u002Fassets\u002F{images,videos,audio}\u002F",{"type":65,"value":2882}," as ",{"type":59,"tag":88,"props":2884,"children":2886},{"className":2885},[],[2887],{"type":65,"value":156},{"type":65,"value":1618},{"type":59,"tag":144,"props":2890,"children":2891},{},[2892],{"type":65,"value":2893},"MUST save locally",{"type":59,"tag":469,"props":2895,"children":2896},{},[2897,2902],{"type":59,"tag":144,"props":2898,"children":2899},{},[2900],{"type":65,"value":2901},"Post-process:",{"type":65,"value":2903}," Images → WebP, Videos → ffmpeg compress, Audio → normalize",{"type":59,"tag":469,"props":2905,"children":2906},{},[2907,2912],{"type":59,"tag":144,"props":2908,"children":2909},{},[2910],{"type":65,"value":2911},"Deliver:",{"type":65,"value":2913}," File path + code snippet + CSS suggestion",{"type":59,"tag":74,"props":2915,"children":2917},{"id":2916},"_33-preset-shortcuts",[2918],{"type":65,"value":2919},"3.3 Preset Shortcuts",{"type":59,"tag":164,"props":2921,"children":2922},{},[2923,2939],{"type":59,"tag":168,"props":2924,"children":2925},{},[2926],{"type":59,"tag":172,"props":2927,"children":2928},{},[2929,2934],{"type":59,"tag":176,"props":2930,"children":2931},{},[2932],{"type":65,"value":2933},"Shortcut",{"type":59,"tag":176,"props":2935,"children":2936},{},[2937],{"type":65,"value":2938},"Spec",{"type":59,"tag":192,"props":2940,"children":2941},{},[2942,2959,2976,2993,3010,3027,3050,3067,3084],{"type":59,"tag":172,"props":2943,"children":2944},{},[2945,2954],{"type":59,"tag":199,"props":2946,"children":2947},{},[2948],{"type":59,"tag":88,"props":2949,"children":2951},{"className":2950},[],[2952],{"type":65,"value":2953},"hero",{"type":59,"tag":199,"props":2955,"children":2956},{},[2957],{"type":65,"value":2958},"16:9, cinematic, text-safe",{"type":59,"tag":172,"props":2960,"children":2961},{},[2962,2971],{"type":59,"tag":199,"props":2963,"children":2964},{},[2965],{"type":59,"tag":88,"props":2966,"children":2968},{"className":2967},[],[2969],{"type":65,"value":2970},"thumb",{"type":59,"tag":199,"props":2972,"children":2973},{},[2974],{"type":65,"value":2975},"1:1, centered subject",{"type":59,"tag":172,"props":2977,"children":2978},{},[2979,2988],{"type":59,"tag":199,"props":2980,"children":2981},{},[2982],{"type":59,"tag":88,"props":2983,"children":2985},{"className":2984},[],[2986],{"type":65,"value":2987},"icon",{"type":59,"tag":199,"props":2989,"children":2990},{},[2991],{"type":65,"value":2992},"1:1, flat, clean background",{"type":59,"tag":172,"props":2994,"children":2995},{},[2996,3005],{"type":59,"tag":199,"props":2997,"children":2998},{},[2999],{"type":59,"tag":88,"props":3000,"children":3002},{"className":3001},[],[3003],{"type":65,"value":3004},"avatar",{"type":59,"tag":199,"props":3006,"children":3007},{},[3008],{"type":65,"value":3009},"1:1, portrait, circular crop ready",{"type":59,"tag":172,"props":3011,"children":3012},{},[3013,3022],{"type":59,"tag":199,"props":3014,"children":3015},{},[3016],{"type":59,"tag":88,"props":3017,"children":3019},{"className":3018},[],[3020],{"type":65,"value":3021},"banner",{"type":59,"tag":199,"props":3023,"children":3024},{},[3025],{"type":65,"value":3026},"21:9, OG\u002Fsocial",{"type":59,"tag":172,"props":3028,"children":3029},{},[3030,3039],{"type":59,"tag":199,"props":3031,"children":3032},{},[3033],{"type":59,"tag":88,"props":3034,"children":3036},{"className":3035},[],[3037],{"type":65,"value":3038},"bg-video",{"type":59,"tag":199,"props":3040,"children":3041},{},[3042,3044],{"type":65,"value":3043},"768P, 6s, ",{"type":59,"tag":88,"props":3045,"children":3047},{"className":3046},[],[3048],{"type":65,"value":3049},"[Static shot]",{"type":59,"tag":172,"props":3051,"children":3052},{},[3053,3062],{"type":59,"tag":199,"props":3054,"children":3055},{},[3056],{"type":59,"tag":88,"props":3057,"children":3059},{"className":3058},[],[3060],{"type":65,"value":3061},"video-hd",{"type":59,"tag":199,"props":3063,"children":3064},{},[3065],{"type":65,"value":3066},"1080P, 6s",{"type":59,"tag":172,"props":3068,"children":3069},{},[3070,3079],{"type":59,"tag":199,"props":3071,"children":3072},{},[3073],{"type":59,"tag":88,"props":3074,"children":3076},{"className":3075},[],[3077],{"type":65,"value":3078},"bgm",{"type":59,"tag":199,"props":3080,"children":3081},{},[3082],{"type":65,"value":3083},"30s, no vocals, loopable",{"type":59,"tag":172,"props":3085,"children":3086},{},[3087,3096],{"type":59,"tag":199,"props":3088,"children":3089},{},[3090],{"type":59,"tag":88,"props":3091,"children":3093},{"className":3092},[],[3094],{"type":65,"value":3095},"tts",{"type":59,"tag":199,"props":3097,"children":3098},{},[3099],{"type":65,"value":3100},"MiniMax HD, MP3",{"type":59,"tag":74,"props":3102,"children":3104},{"id":3103},"_34-reference",[3105],{"type":65,"value":3106},"3.4 Reference",{"type":59,"tag":711,"props":3108,"children":3109},{},[3110,3121,3132,3143,3154,3165,3176],{"type":59,"tag":469,"props":3111,"children":3112},{},[3113,3119],{"type":59,"tag":88,"props":3114,"children":3116},{"className":3115},[],[3117],{"type":65,"value":3118},"references\u002Fminimax-cli-reference.md",{"type":65,"value":3120}," — CLI flags",{"type":59,"tag":469,"props":3122,"children":3123},{},[3124,3130],{"type":59,"tag":88,"props":3125,"children":3127},{"className":3126},[],[3128],{"type":65,"value":3129},"references\u002Fasset-prompt-guide.md",{"type":65,"value":3131}," — Prompt rules",{"type":59,"tag":469,"props":3133,"children":3134},{},[3135,3141],{"type":59,"tag":88,"props":3136,"children":3138},{"className":3137},[],[3139],{"type":65,"value":3140},"references\u002Fminimax-voice-catalog.md",{"type":65,"value":3142}," — Voice IDs",{"type":59,"tag":469,"props":3144,"children":3145},{},[3146,3152],{"type":59,"tag":88,"props":3147,"children":3149},{"className":3148},[],[3150],{"type":65,"value":3151},"references\u002Fminimax-tts-guide.md",{"type":65,"value":3153}," — TTS usage",{"type":59,"tag":469,"props":3155,"children":3156},{},[3157,3163],{"type":59,"tag":88,"props":3158,"children":3160},{"className":3159},[],[3161],{"type":65,"value":3162},"references\u002Fminimax-music-guide.md",{"type":65,"value":3164}," — Music generation (prompts, lyrics, structure tags)",{"type":59,"tag":469,"props":3166,"children":3167},{},[3168,3174],{"type":59,"tag":88,"props":3169,"children":3171},{"className":3170},[],[3172],{"type":65,"value":3173},"references\u002Fminimax-video-guide.md",{"type":65,"value":3175}," — Camera commands",{"type":59,"tag":469,"props":3177,"children":3178},{},[3179,3185],{"type":59,"tag":88,"props":3180,"children":3182},{"className":3181},[],[3183],{"type":65,"value":3184},"references\u002Fminimax-image-guide.md",{"type":65,"value":3186}," — Ratios, batch",{"type":59,"tag":432,"props":3188,"children":3189},{},[],{"type":59,"tag":60,"props":3191,"children":3193},{"id":3192},"_4-copywriting",[3194],{"type":65,"value":3195},"4. Copywriting",{"type":59,"tag":74,"props":3197,"children":3199},{"id":3198},"_41-core-job",[3200],{"type":65,"value":3201},"4.1 Core Job",{"type":59,"tag":465,"props":3203,"children":3204},{},[3205],{"type":59,"tag":469,"props":3206,"children":3207},{},[3208],{"type":65,"value":3209},"Grab attention → 2. Create desire → 3. Remove friction → 4. Prompt action",{"type":59,"tag":74,"props":3211,"children":3213},{"id":3212},"_42-frameworks",[3214],{"type":65,"value":3215},"4.2 Frameworks",{"type":59,"tag":68,"props":3217,"children":3218},{},[3219,3224],{"type":59,"tag":144,"props":3220,"children":3221},{},[3222],{"type":65,"value":3223},"AIDA",{"type":65,"value":3225}," (landing pages, emails):",{"type":59,"tag":81,"props":3227,"children":3230},{"className":3228,"code":3229,"language":65},[84],"ATTENTION:  Bold headline (promise or pain)\nINTEREST:   Elaborate problem (\"yes, that's me\")\nDESIRE:     Show transformation\nACTION:     Clear CTA\n",[3231],{"type":59,"tag":88,"props":3232,"children":3233},{"__ignoreMap":90},[3234],{"type":65,"value":3229},{"type":59,"tag":68,"props":3236,"children":3237},{},[3238,3243],{"type":59,"tag":144,"props":3239,"children":3240},{},[3241],{"type":65,"value":3242},"PAS",{"type":65,"value":3244}," (pain-driven products):",{"type":59,"tag":81,"props":3246,"children":3249},{"className":3247,"code":3248,"language":65},[84],"PROBLEM:    State clearly\nAGITATE:    Make urgent\nSOLUTION:   Your product\n",[3250],{"type":59,"tag":88,"props":3251,"children":3252},{"__ignoreMap":90},[3253],{"type":65,"value":3248},{"type":59,"tag":68,"props":3255,"children":3256},{},[3257,3262],{"type":59,"tag":144,"props":3258,"children":3259},{},[3260],{"type":65,"value":3261},"FAB",{"type":65,"value":3263}," (product differentiation):",{"type":59,"tag":81,"props":3265,"children":3268},{"className":3266,"code":3267,"language":65},[84],"FEATURE:    What it does\nADVANTAGE:  Why it matters\nBENEFIT:    What customer gains\n",[3269],{"type":59,"tag":88,"props":3270,"children":3271},{"__ignoreMap":90},[3272],{"type":65,"value":3267},{"type":59,"tag":74,"props":3274,"children":3276},{"id":3275},"_43-headlines",[3277],{"type":65,"value":3278},"4.3 Headlines",{"type":59,"tag":164,"props":3280,"children":3281},{},[3282,3298],{"type":59,"tag":168,"props":3283,"children":3284},{},[3285],{"type":59,"tag":172,"props":3286,"children":3287},{},[3288,3293],{"type":59,"tag":176,"props":3289,"children":3290},{},[3291],{"type":65,"value":3292},"Formula",{"type":59,"tag":176,"props":3294,"children":3295},{},[3296],{"type":65,"value":3297},"Example",{"type":59,"tag":192,"props":3299,"children":3300},{},[3301,3314,3327,3340,3353,3366,3379],{"type":59,"tag":172,"props":3302,"children":3303},{},[3304,3309],{"type":59,"tag":199,"props":3305,"children":3306},{},[3307],{"type":65,"value":3308},"Promise",{"type":59,"tag":199,"props":3310,"children":3311},{},[3312],{"type":65,"value":3313},"\"Double open rates in 30 days\"",{"type":59,"tag":172,"props":3315,"children":3316},{},[3317,3322],{"type":59,"tag":199,"props":3318,"children":3319},{},[3320],{"type":65,"value":3321},"Question",{"type":59,"tag":199,"props":3323,"children":3324},{},[3325],{"type":65,"value":3326},"\"Still wasting 10 hours\u002Fweek?\"",{"type":59,"tag":172,"props":3328,"children":3329},{},[3330,3335],{"type":59,"tag":199,"props":3331,"children":3332},{},[3333],{"type":65,"value":3334},"How-To",{"type":59,"tag":199,"props":3336,"children":3337},{},[3338],{"type":65,"value":3339},"\"How to automate your pipeline\"",{"type":59,"tag":172,"props":3341,"children":3342},{},[3343,3348],{"type":59,"tag":199,"props":3344,"children":3345},{},[3346],{"type":65,"value":3347},"Number",{"type":59,"tag":199,"props":3349,"children":3350},{},[3351],{"type":65,"value":3352},"\"7 mistakes killing conversions\"",{"type":59,"tag":172,"props":3354,"children":3355},{},[3356,3361],{"type":59,"tag":199,"props":3357,"children":3358},{},[3359],{"type":65,"value":3360},"Negative",{"type":59,"tag":199,"props":3362,"children":3363},{},[3364],{"type":65,"value":3365},"\"Stop losing leads\"",{"type":59,"tag":172,"props":3367,"children":3368},{},[3369,3374],{"type":59,"tag":199,"props":3370,"children":3371},{},[3372],{"type":65,"value":3373},"Curiosity",{"type":59,"tag":199,"props":3375,"children":3376},{},[3377],{"type":65,"value":3378},"\"The one change that tripled bookings\"",{"type":59,"tag":172,"props":3380,"children":3381},{},[3382,3387],{"type":59,"tag":199,"props":3383,"children":3384},{},[3385],{"type":65,"value":3386},"Transformation",{"type":59,"tag":199,"props":3388,"children":3389},{},[3390],{"type":65,"value":3391},"\"From 50 to 500 leads\"",{"type":59,"tag":68,"props":3393,"children":3394},{},[3395],{"type":65,"value":3396},"Be specific. Lead with outcome, not method.",{"type":59,"tag":74,"props":3398,"children":3400},{"id":3399},"_44-ctas",[3401],{"type":65,"value":3402},"4.4 CTAs",{"type":59,"tag":68,"props":3404,"children":3405},{},[3406,3411],{"type":59,"tag":144,"props":3407,"children":3408},{},[3409],{"type":65,"value":3410},"Bad:",{"type":65,"value":3412}," Submit, Click here, Learn more",{"type":59,"tag":68,"props":3414,"children":3415},{},[3416,3421],{"type":59,"tag":144,"props":3417,"children":3418},{},[3419],{"type":65,"value":3420},"Good:",{"type":65,"value":3422}," \"Start my free trial\", \"Get the template now\", \"Book my strategy call\"",{"type":59,"tag":68,"props":3424,"children":3425},{},[3426,3431,3432,3437,3438,3443,3444],{"type":59,"tag":144,"props":3427,"children":3428},{},[3429],{"type":65,"value":3430},"Formula:",{"type":65,"value":150},{"type":59,"tag":1752,"props":3433,"children":3434},{},[3435],{"type":65,"value":3436},"Action Verb",{"type":65,"value":1038},{"type":59,"tag":1752,"props":3439,"children":3440},{},[3441],{"type":65,"value":3442},"What They Get",{"type":65,"value":1038},{"type":59,"tag":1752,"props":3445,"children":3446},{},[3447],{"type":65,"value":3448},"Urgency\u002FEase",{"type":59,"tag":68,"props":3450,"children":3451},{},[3452],{"type":65,"value":3453},"Place: above fold, after value, multiple on long pages.",{"type":59,"tag":74,"props":3455,"children":3457},{"id":3456},"_45-emotional-triggers",[3458],{"type":65,"value":3459},"4.5 Emotional Triggers",{"type":59,"tag":164,"props":3461,"children":3462},{},[3463,3478],{"type":59,"tag":168,"props":3464,"children":3465},{},[3466],{"type":59,"tag":172,"props":3467,"children":3468},{},[3469,3474],{"type":59,"tag":176,"props":3470,"children":3471},{},[3472],{"type":65,"value":3473},"Trigger",{"type":59,"tag":176,"props":3475,"children":3476},{},[3477],{"type":65,"value":3297},{"type":59,"tag":192,"props":3479,"children":3480},{},[3481,3494,3507,3520,3533,3546],{"type":59,"tag":172,"props":3482,"children":3483},{},[3484,3489],{"type":59,"tag":199,"props":3485,"children":3486},{},[3487],{"type":65,"value":3488},"FOMO",{"type":59,"tag":199,"props":3490,"children":3491},{},[3492],{"type":65,"value":3493},"\"Only 3 spots left\"",{"type":59,"tag":172,"props":3495,"children":3496},{},[3497,3502],{"type":59,"tag":199,"props":3498,"children":3499},{},[3500],{"type":65,"value":3501},"Fear of loss",{"type":59,"tag":199,"props":3503,"children":3504},{},[3505],{"type":65,"value":3506},"\"Every day without this, you're losing $X\"",{"type":59,"tag":172,"props":3508,"children":3509},{},[3510,3515],{"type":59,"tag":199,"props":3511,"children":3512},{},[3513],{"type":65,"value":3514},"Status",{"type":59,"tag":199,"props":3516,"children":3517},{},[3518],{"type":65,"value":3519},"\"Join 10,000+ top agencies\"",{"type":59,"tag":172,"props":3521,"children":3522},{},[3523,3528],{"type":59,"tag":199,"props":3524,"children":3525},{},[3526],{"type":65,"value":3527},"Ease",{"type":59,"tag":199,"props":3529,"children":3530},{},[3531],{"type":65,"value":3532},"\"Set it up once. Forget forever.\"",{"type":59,"tag":172,"props":3534,"children":3535},{},[3536,3541],{"type":59,"tag":199,"props":3537,"children":3538},{},[3539],{"type":65,"value":3540},"Frustration",{"type":59,"tag":199,"props":3542,"children":3543},{},[3544],{"type":65,"value":3545},"\"Tired of tools that deliver nothing?\"",{"type":59,"tag":172,"props":3547,"children":3548},{},[3549,3554],{"type":59,"tag":199,"props":3550,"children":3551},{},[3552],{"type":65,"value":3553},"Hope",{"type":59,"tag":199,"props":3555,"children":3556},{},[3557],{"type":65,"value":3558},"\"Yes, you CAN hit $10K MRR\"",{"type":59,"tag":74,"props":3560,"children":3562},{"id":3561},"_46-objection-handling",[3563],{"type":65,"value":3564},"4.6 Objection Handling",{"type":59,"tag":164,"props":3566,"children":3567},{},[3568,3584],{"type":59,"tag":168,"props":3569,"children":3570},{},[3571],{"type":59,"tag":172,"props":3572,"children":3573},{},[3574,3579],{"type":59,"tag":176,"props":3575,"children":3576},{},[3577],{"type":65,"value":3578},"Objection",{"type":59,"tag":176,"props":3580,"children":3581},{},[3582],{"type":65,"value":3583},"Response",{"type":59,"tag":192,"props":3585,"children":3586},{},[3587,3600,3613,3626,3639],{"type":59,"tag":172,"props":3588,"children":3589},{},[3590,3595],{"type":59,"tag":199,"props":3591,"children":3592},{},[3593],{"type":65,"value":3594},"Too expensive",{"type":59,"tag":199,"props":3596,"children":3597},{},[3598],{"type":65,"value":3599},"Show ROI: \"Pays for itself in 2 weeks\"",{"type":59,"tag":172,"props":3601,"children":3602},{},[3603,3608],{"type":59,"tag":199,"props":3604,"children":3605},{},[3606],{"type":65,"value":3607},"Won't work for me",{"type":59,"tag":199,"props":3609,"children":3610},{},[3611],{"type":65,"value":3612},"Social proof from similar customer",{"type":59,"tag":172,"props":3614,"children":3615},{},[3616,3621],{"type":59,"tag":199,"props":3617,"children":3618},{},[3619],{"type":65,"value":3620},"No time",{"type":59,"tag":199,"props":3622,"children":3623},{},[3624],{"type":65,"value":3625},"\"Setup takes 10 minutes\"",{"type":59,"tag":172,"props":3627,"children":3628},{},[3629,3634],{"type":59,"tag":199,"props":3630,"children":3631},{},[3632],{"type":65,"value":3633},"What if it fails",{"type":59,"tag":199,"props":3635,"children":3636},{},[3637],{"type":65,"value":3638},"\"30-day money-back guarantee\"",{"type":59,"tag":172,"props":3640,"children":3641},{},[3642,3647],{"type":59,"tag":199,"props":3643,"children":3644},{},[3645],{"type":65,"value":3646},"Need to think",{"type":59,"tag":199,"props":3648,"children":3649},{},[3650],{"type":65,"value":3651},"Urgency\u002Fscarcity",{"type":59,"tag":68,"props":3653,"children":3654},{},[3655],{"type":65,"value":3656},"Place in FAQ, testimonials, near CTA.",{"type":59,"tag":74,"props":3658,"children":3660},{"id":3659},"_47-proof-types",[3661],{"type":65,"value":3662},"4.7 Proof Types",{"type":59,"tag":68,"props":3664,"children":3665},{},[3666],{"type":65,"value":3667},"Testimonials (with name\u002Ftitle), Case studies, Data\u002Fmetrics, Social proof, Certifications",{"type":59,"tag":432,"props":3669,"children":3670},{},[],{"type":59,"tag":60,"props":3672,"children":3674},{"id":3673},"_5-visual-art",[3675],{"type":65,"value":3676},"5. Visual Art",{"type":59,"tag":68,"props":3678,"children":3679},{},[3680],{"type":65,"value":3681},"Philosophy-first workflow. Two output modes.",{"type":59,"tag":74,"props":3683,"children":3685},{"id":3684},"_51-output-modes",[3686],{"type":65,"value":3687},"5.1 Output Modes",{"type":59,"tag":164,"props":3689,"children":3690},{},[3691,3712],{"type":59,"tag":168,"props":3692,"children":3693},{},[3694],{"type":59,"tag":172,"props":3695,"children":3696},{},[3697,3702,3707],{"type":59,"tag":176,"props":3698,"children":3699},{},[3700],{"type":65,"value":3701},"Mode",{"type":59,"tag":176,"props":3703,"children":3704},{},[3705],{"type":65,"value":3706},"Output",{"type":59,"tag":176,"props":3708,"children":3709},{},[3710],{"type":65,"value":3711},"When",{"type":59,"tag":192,"props":3713,"children":3714},{},[3715,3733],{"type":59,"tag":172,"props":3716,"children":3717},{},[3718,3723,3728],{"type":59,"tag":199,"props":3719,"children":3720},{},[3721],{"type":65,"value":3722},"Static",{"type":59,"tag":199,"props":3724,"children":3725},{},[3726],{"type":65,"value":3727},"PDF\u002FPNG",{"type":59,"tag":199,"props":3729,"children":3730},{},[3731],{"type":65,"value":3732},"Posters, print, design assets",{"type":59,"tag":172,"props":3734,"children":3735},{},[3736,3741,3746],{"type":59,"tag":199,"props":3737,"children":3738},{},[3739],{"type":65,"value":3740},"Interactive",{"type":59,"tag":199,"props":3742,"children":3743},{},[3744],{"type":65,"value":3745},"HTML (p5.js)",{"type":59,"tag":199,"props":3747,"children":3748},{},[3749],{"type":65,"value":3750},"Generative art, explorable variations",{"type":59,"tag":74,"props":3752,"children":3754},{"id":3753},"_52-workflow",[3755],{"type":65,"value":3756},"5.2 Workflow",{"type":59,"tag":120,"props":3758,"children":3760},{"id":3759},"step-1-philosophy-creation",[3761],{"type":65,"value":3762},"Step 1: Philosophy Creation",{"type":59,"tag":68,"props":3764,"children":3765},{},[3766],{"type":65,"value":3767},"Name the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:",{"type":59,"tag":711,"props":3769,"children":3770},{},[3771,3776],{"type":59,"tag":469,"props":3772,"children":3773},{},[3774],{"type":65,"value":3775},"Static: space, form, color, scale, rhythm, hierarchy",{"type":59,"tag":469,"props":3777,"children":3778},{},[3779],{"type":65,"value":3780},"Interactive: computation, emergence, noise, parametric variation",{"type":59,"tag":120,"props":3782,"children":3784},{"id":3783},"step-2-conceptual-seed",[3785],{"type":65,"value":3786},"Step 2: Conceptual Seed",{"type":59,"tag":68,"props":3788,"children":3789},{},[3790],{"type":65,"value":3791},"Identify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.",{"type":59,"tag":120,"props":3793,"children":3795},{"id":3794},"step-3-creation",[3796],{"type":65,"value":3797},"Step 3: Creation",{"type":59,"tag":68,"props":3799,"children":3800},{},[3801],{"type":59,"tag":144,"props":3802,"children":3803},{},[3804],{"type":65,"value":3805},"Static Mode:",{"type":59,"tag":711,"props":3807,"children":3808},{},[3809,3814,3819,3830,3835],{"type":59,"tag":469,"props":3810,"children":3811},{},[3812],{"type":65,"value":3813},"Single page, highly visual, design-forward",{"type":59,"tag":469,"props":3815,"children":3816},{},[3817],{"type":65,"value":3818},"Repeating patterns, perfect shapes",{"type":59,"tag":469,"props":3820,"children":3821},{},[3822,3824],{"type":65,"value":3823},"Sparse typography from ",{"type":59,"tag":88,"props":3825,"children":3827},{"className":3826},[],[3828],{"type":65,"value":3829},"canvas-fonts\u002F",{"type":59,"tag":469,"props":3831,"children":3832},{},[3833],{"type":65,"value":3834},"Nothing overlaps, proper margins",{"type":59,"tag":469,"props":3836,"children":3837},{},[3838,3840,3846,3847,3853,3855],{"type":65,"value":3839},"Output: ",{"type":59,"tag":88,"props":3841,"children":3843},{"className":3842},[],[3844],{"type":65,"value":3845},".pdf",{"type":65,"value":819},{"type":59,"tag":88,"props":3848,"children":3850},{"className":3849},[],[3851],{"type":65,"value":3852},".png",{"type":65,"value":3854}," + philosophy ",{"type":59,"tag":88,"props":3856,"children":3858},{"className":3857},[],[3859],{"type":65,"value":3860},".md",{"type":59,"tag":68,"props":3862,"children":3863},{},[3864],{"type":59,"tag":144,"props":3865,"children":3866},{},[3867],{"type":65,"value":3868},"Interactive Mode:",{"type":59,"tag":465,"props":3870,"children":3871},{},[3872,3885,3890,3895,3906],{"type":59,"tag":469,"props":3873,"children":3874},{},[3875,3877,3883],{"type":65,"value":3876},"Read ",{"type":59,"tag":88,"props":3878,"children":3880},{"className":3879},[],[3881],{"type":65,"value":3882},"templates\u002Fviewer.html",{"type":65,"value":3884}," first",{"type":59,"tag":469,"props":3886,"children":3887},{},[3888],{"type":65,"value":3889},"Keep FIXED sections (header, sidebar, seed controls)",{"type":59,"tag":469,"props":3891,"children":3892},{},[3893],{"type":65,"value":3894},"Replace VARIABLE sections (algorithm, parameters)",{"type":59,"tag":469,"props":3896,"children":3897},{},[3898,3900],{"type":65,"value":3899},"Seeded randomness: ",{"type":59,"tag":88,"props":3901,"children":3903},{"className":3902},[],[3904],{"type":65,"value":3905},"randomSeed(seed); noiseSeed(seed);",{"type":59,"tag":469,"props":3907,"children":3908},{},[3909],{"type":65,"value":3910},"Output: single self-contained HTML",{"type":59,"tag":120,"props":3912,"children":3914},{"id":3913},"step-4-refinement",[3915],{"type":65,"value":3916},"Step 4: Refinement",{"type":59,"tag":68,"props":3918,"children":3919},{},[3920],{"type":65,"value":3921},"Refine, don't add. Make it crisp. Polish into masterpiece.",{"type":59,"tag":432,"props":3923,"children":3924},{},[],{"type":59,"tag":60,"props":3926,"children":3928},{"id":3927},"quality-gates",[3929],{"type":65,"value":3930},"Quality Gates",{"type":59,"tag":68,"props":3932,"children":3933},{},[3934],{"type":59,"tag":144,"props":3935,"children":3936},{},[3937],{"type":65,"value":3938},"Design:",{"type":59,"tag":711,"props":3940,"children":3943},{"className":3941},[3942],"contains-task-list",[3944,3972,3991,4000],{"type":59,"tag":469,"props":3945,"children":3948},{"className":3946},[3947],"task-list-item",[3949,3955,3957,3963,3964,3970],{"type":59,"tag":3950,"props":3951,"children":3954},"input",{"disabled":3952,"type":3953},true,"checkbox",[],{"type":65,"value":3956}," Mobile layout collapse (",{"type":59,"tag":88,"props":3958,"children":3960},{"className":3959},[],[3961],{"type":65,"value":3962},"w-full",{"type":65,"value":416},{"type":59,"tag":88,"props":3965,"children":3967},{"className":3966},[],[3968],{"type":65,"value":3969},"px-4",{"type":65,"value":3971},") for high-variance designs",{"type":59,"tag":469,"props":3973,"children":3975},{"className":3974},[3947],[3976,3979,3980,3985,3986],{"type":59,"tag":3950,"props":3977,"children":3978},{"disabled":3952,"type":3953},[],{"type":65,"value":150},{"type":59,"tag":88,"props":3981,"children":3983},{"className":3982},[],[3984],{"type":65,"value":792},{"type":65,"value":794},{"type":59,"tag":88,"props":3987,"children":3989},{"className":3988},[],[3990],{"type":65,"value":800},{"type":59,"tag":469,"props":3992,"children":3994},{"className":3993},[3947],[3995,3998],{"type":59,"tag":3950,"props":3996,"children":3997},{"disabled":3952,"type":3953},[],{"type":65,"value":3999}," Empty, loading, error states provided",{"type":59,"tag":469,"props":4001,"children":4003},{"className":4002},[3947],[4004,4007],{"type":59,"tag":3950,"props":4005,"children":4006},{"disabled":3952,"type":3953},[],{"type":65,"value":4008}," Cards omitted where spacing suffices",{"type":59,"tag":68,"props":4010,"children":4011},{},[4012],{"type":59,"tag":144,"props":4013,"children":4014},{},[4015],{"type":65,"value":4016},"Motion:",{"type":59,"tag":711,"props":4018,"children":4020},{"className":4019},[3942],[4021,4030,4039,4055,4070,4085,4094],{"type":59,"tag":469,"props":4022,"children":4024},{"className":4023},[3947],[4025,4028],{"type":59,"tag":3950,"props":4026,"children":4027},{"disabled":3952,"type":3953},[],{"type":65,"value":4029}," Correct tool per selection matrix",{"type":59,"tag":469,"props":4031,"children":4033},{"className":4032},[3947],[4034,4037],{"type":59,"tag":3950,"props":4035,"children":4036},{"disabled":3952,"type":3953},[],{"type":65,"value":4038}," No GSAP + Framer mixed in same component",{"type":59,"tag":469,"props":4040,"children":4042},{"className":4041},[3947],[4043,4046,4048,4053],{"type":59,"tag":3950,"props":4044,"children":4045},{"disabled":3952,"type":3953},[],{"type":65,"value":4047}," All ",{"type":59,"tag":88,"props":4049,"children":4051},{"className":4050},[],[4052],{"type":65,"value":2313},{"type":65,"value":4054}," have cleanup returns",{"type":59,"tag":469,"props":4056,"children":4058},{"className":4057},[3947],[4059,4062,4063,4068],{"type":59,"tag":3950,"props":4060,"children":4061},{"disabled":3952,"type":3953},[],{"type":65,"value":150},{"type":59,"tag":88,"props":4064,"children":4066},{"className":4065},[],[4067],{"type":65,"value":2276},{"type":65,"value":4069}," respected",{"type":59,"tag":469,"props":4071,"children":4073},{"className":4072},[3947],[4074,4077,4079,4084],{"type":59,"tag":3950,"props":4075,"children":4076},{"disabled":3952,"type":3953},[],{"type":65,"value":4078}," Perpetual animations in ",{"type":59,"tag":88,"props":4080,"children":4082},{"className":4081},[],[4083],{"type":65,"value":1439},{"type":65,"value":2232},{"type":59,"tag":469,"props":4086,"children":4088},{"className":4087},[3947],[4089,4092],{"type":59,"tag":3950,"props":4090,"children":4091},{"disabled":3952,"type":3953},[],{"type":65,"value":4093}," Only GPU properties animated",{"type":59,"tag":469,"props":4095,"children":4097},{"className":4096},[3947],[4098,4101],{"type":59,"tag":3950,"props":4099,"children":4100},{"disabled":3952,"type":3953},[],{"type":65,"value":4102}," Heavy libraries lazy-loaded",{"type":59,"tag":68,"props":4104,"children":4105},{},[4106],{"type":59,"tag":144,"props":4107,"children":4108},{},[4109],{"type":65,"value":4110},"General:",{"type":59,"tag":711,"props":4112,"children":4114},{"className":4113},[3942],[4115,4129,4194,4209],{"type":59,"tag":469,"props":4116,"children":4118},{"className":4117},[3947],[4119,4122,4124],{"type":59,"tag":3950,"props":4120,"children":4121},{"disabled":3952,"type":3953},[],{"type":65,"value":4123}," Dependencies verified in ",{"type":59,"tag":88,"props":4125,"children":4127},{"className":4126},[],[4128],{"type":65,"value":729},{"type":59,"tag":469,"props":4130,"children":4132},{"className":4131},[3947],[4133,4136,4137,4142,4144,4150,4151,4157,4158,4164,4165,4171,4172,4178,4179,4185,4186,4192],{"type":59,"tag":3950,"props":4134,"children":4135},{"disabled":3952,"type":3953},[],{"type":65,"value":150},{"type":59,"tag":144,"props":4138,"children":4139},{},[4140],{"type":65,"value":4141},"No placeholder URLs",{"type":65,"value":4143}," — grep the output for ",{"type":59,"tag":88,"props":4145,"children":4147},{"className":4146},[],[4148],{"type":65,"value":4149},"unsplash",{"type":65,"value":416},{"type":59,"tag":88,"props":4152,"children":4154},{"className":4153},[],[4155],{"type":65,"value":4156},"picsum",{"type":65,"value":416},{"type":59,"tag":88,"props":4159,"children":4161},{"className":4160},[],[4162],{"type":65,"value":4163},"placeholder",{"type":65,"value":416},{"type":59,"tag":88,"props":4166,"children":4168},{"className":4167},[],[4169],{"type":65,"value":4170},"placehold",{"type":65,"value":416},{"type":59,"tag":88,"props":4173,"children":4175},{"className":4174},[],[4176],{"type":65,"value":4177},"via.placeholder",{"type":65,"value":416},{"type":59,"tag":88,"props":4180,"children":4182},{"className":4181},[],[4183],{"type":65,"value":4184},"lorem.space",{"type":65,"value":416},{"type":59,"tag":88,"props":4187,"children":4189},{"className":4188},[],[4190],{"type":65,"value":4191},"dummyimage",{"type":65,"value":4193},". If ANY found, STOP and replace with generated assets before delivering.",{"type":59,"tag":469,"props":4195,"children":4197},{"className":4196},[3947],[4198,4201,4202,4207],{"type":59,"tag":3950,"props":4199,"children":4200},{"disabled":3952,"type":3953},[],{"type":65,"value":150},{"type":59,"tag":144,"props":4203,"children":4204},{},[4205],{"type":65,"value":4206},"All media assets exist as local files",{"type":65,"value":4208}," in the project's assets directory",{"type":59,"tag":469,"props":4210,"children":4212},{"className":4211},[3947],[4213,4216],{"type":59,"tag":3950,"props":4214,"children":4215},{"disabled":3952,"type":3953},[],{"type":65,"value":4217}," Asset prompts confirmed with user before generation",{"type":59,"tag":432,"props":4219,"children":4220},{},[],{"type":59,"tag":68,"props":4222,"children":4223},{},[4224],{"type":59,"tag":4225,"props":4226,"children":4227},"em",{},[4228],{"type":65,"value":4229},"React and Next.js are trademarks of Meta Platforms, Inc. and Vercel, Inc., respectively. Vue.js is a trademark of Evan You. Tailwind CSS is a trademark of Tailwind Labs Inc. Svelte and SvelteKit are trademarks of their respective owners. GSAP\u002FGreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.",{"type":59,"tag":4231,"props":4232,"children":4233},"style",{},[4234],{"type":65,"value":4235},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4237,"total":4351},[4238,4260,4274,4290,4305,4325,4333],{"slug":4239,"name":4239,"fn":4240,"description":4241,"org":4242,"tags":4243,"stars":29,"repoUrl":30,"updatedAt":4259},"android-native-dev","develop Android native applications","Android native application development and UI design guide. Covers Material Design 3, Kotlin\u002FCompose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4244,4247,4250,4253,4256],{"name":4245,"slug":4246,"type":16},"Accessibility","accessibility",{"name":4248,"slug":4249,"type":16},"Android","android",{"name":4251,"slug":4252,"type":16},"Kotlin","kotlin",{"name":4254,"slug":4255,"type":16},"Mobile","mobile",{"name":4257,"slug":4258,"type":16},"UI Components","ui-components","2026-07-13T06:16:54.247834",{"slug":4261,"name":4261,"fn":4262,"description":4263,"org":4264,"tags":4265,"stars":29,"repoUrl":30,"updatedAt":4273},"buddy-sings","generate singing performances for AI companions","Use when user wants their Claude Code pet (\u002Fbuddy) to sing a song. Triggers on any request that combines the concept of their Claude Code buddy, pet, or companion with singing or music. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4266,4269,4272],{"name":4267,"slug":4268,"type":16},"Agents","agents",{"name":4270,"slug":4271,"type":16},"Audio","audio",{"name":14,"slug":15,"type":16},"2026-07-13T06:16:35.130644",{"slug":4275,"name":4275,"fn":4276,"description":4277,"org":4278,"tags":4279,"stars":29,"repoUrl":30,"updatedAt":4289},"color-font-skill","select color palettes and font pairings","Choose presentation-ready color palettes and font pairings for PPT\u002Fdesign tasks. Use when users ask for visual theme choices, brand-safe palettes, or font recommendations. Triggers include: 配色, 色板, 字体, color palette, font, PPT配色, 字体搭配.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4280,4281,4284,4287],{"name":27,"slug":28,"type":16},{"name":4282,"slug":4283,"type":16},"Presentations","presentations",{"name":4285,"slug":4286,"type":16},"Themes","themes",{"name":863,"slug":4288,"type":16},"typography","2026-07-13T06:17:02.785587",{"slug":4291,"name":4291,"fn":4292,"description":4293,"org":4294,"tags":4295,"stars":29,"repoUrl":30,"updatedAt":4304},"design-style-skill","select visual design systems for presentations","Select a consistent visual design system for PPT slides using radius\u002Fspacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp\u002FSoft\u002FRounded\u002FPill recipes, component mappings, typography\u002Fspacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4296,4297,4300,4303],{"name":27,"slug":28,"type":16},{"name":4298,"slug":4299,"type":16},"Design System","design-system",{"name":4301,"slug":4302,"type":16},"PowerPoint","powerpoint",{"name":4282,"slug":4283,"type":16},"2026-07-13T06:17:10.398389",{"slug":4306,"name":4306,"fn":4307,"description":4308,"org":4309,"tags":4310,"stars":29,"repoUrl":30,"updatedAt":4324},"flutter-dev","build cross-platform apps with Flutter","Flutter cross-platform development guide covering widget patterns, Riverpod\u002FBloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.\nUse when: building Flutter apps, implementing state management (Riverpod\u002FBloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4311,4314,4317,4318,4321],{"name":4312,"slug":4313,"type":16},"Dart","dart",{"name":4315,"slug":4316,"type":16},"Flutter","flutter",{"name":4254,"slug":4255,"type":16},{"name":4319,"slug":4320,"type":16},"Performance","performance",{"name":4322,"slug":4323,"type":16},"State Management","state-management","2026-07-13T06:16:36.626679",{"slug":4,"name":4,"fn":5,"description":6,"org":4326,"tags":4327,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4328,4329,4330,4331,4332],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"slug":4334,"name":4334,"fn":4335,"description":4336,"org":4337,"tags":4338,"stars":29,"repoUrl":30,"updatedAt":4350},"fullstack-dev","build full-stack web applications","Full-stack backend architecture and frontend-backend integration guide.\nTRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service,\nbuilding todo app, building CRUD app, building real-time app, building chat app,\nExpress + React, Next.js API, Node.js backend, Python backend, Go backend,\ndesigning service layers, implementing error handling, managing config\u002Fauth,\nsetting up API clients, implementing auth flows, handling file uploads,\nadding real-time features (SSE\u002FWebSocket), hardening for production.\nDO NOT TRIGGER when: pure frontend UI work, pure CSS\u002Fstyling, database schema only.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4339,4342,4343,4346,4349],{"name":4340,"slug":4341,"type":16},"Backend","backend",{"name":24,"slug":25,"type":16},{"name":4344,"slug":4345,"type":16},"Full-stack","full-stack",{"name":4347,"slug":4348,"type":16},"REST API","rest-api",{"name":18,"slug":19,"type":16},"2026-07-13T06:16:43.219005",22,{"items":4353,"total":4476},[4354,4362,4368,4375,4382,4390,4398,4406,4421,4437,4456,4466],{"slug":4239,"name":4239,"fn":4240,"description":4241,"org":4355,"tags":4356,"stars":29,"repoUrl":30,"updatedAt":4259},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4357,4358,4359,4360,4361],{"name":4245,"slug":4246,"type":16},{"name":4248,"slug":4249,"type":16},{"name":4251,"slug":4252,"type":16},{"name":4254,"slug":4255,"type":16},{"name":4257,"slug":4258,"type":16},{"slug":4261,"name":4261,"fn":4262,"description":4263,"org":4363,"tags":4364,"stars":29,"repoUrl":30,"updatedAt":4273},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4365,4366,4367],{"name":4267,"slug":4268,"type":16},{"name":4270,"slug":4271,"type":16},{"name":14,"slug":15,"type":16},{"slug":4275,"name":4275,"fn":4276,"description":4277,"org":4369,"tags":4370,"stars":29,"repoUrl":30,"updatedAt":4289},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4371,4372,4373,4374],{"name":27,"slug":28,"type":16},{"name":4282,"slug":4283,"type":16},{"name":4285,"slug":4286,"type":16},{"name":863,"slug":4288,"type":16},{"slug":4291,"name":4291,"fn":4292,"description":4293,"org":4376,"tags":4377,"stars":29,"repoUrl":30,"updatedAt":4304},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4378,4379,4380,4381],{"name":27,"slug":28,"type":16},{"name":4298,"slug":4299,"type":16},{"name":4301,"slug":4302,"type":16},{"name":4282,"slug":4283,"type":16},{"slug":4306,"name":4306,"fn":4307,"description":4308,"org":4383,"tags":4384,"stars":29,"repoUrl":30,"updatedAt":4324},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4385,4386,4387,4388,4389],{"name":4312,"slug":4313,"type":16},{"name":4315,"slug":4316,"type":16},{"name":4254,"slug":4255,"type":16},{"name":4319,"slug":4320,"type":16},{"name":4322,"slug":4323,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":4391,"tags":4392,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4393,4394,4395,4396,4397],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"slug":4334,"name":4334,"fn":4335,"description":4336,"org":4399,"tags":4400,"stars":29,"repoUrl":30,"updatedAt":4350},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4401,4402,4403,4404,4405],{"name":4340,"slug":4341,"type":16},{"name":24,"slug":25,"type":16},{"name":4344,"slug":4345,"type":16},{"name":4347,"slug":4348,"type":16},{"name":18,"slug":19,"type":16},{"slug":4407,"name":4407,"fn":4408,"description":4409,"org":4410,"tags":4411,"stars":29,"repoUrl":30,"updatedAt":4420},"gif-sticker-maker","create animated GIF stickers from photos","Convert photos (people, pets, objects, logos) into 4 animated GIF stickers with captions.\nUse when: user wants to create cartoon stickers, GIF expressions, emoji packs, animated avatars,\nor convert photos to Funko Pop \u002F Pop Mart blind box style animations.\nTriggers: sticker, GIF, cartoon, emoji, expression pack, avatar animation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4412,4413,4414,4417],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":4415,"slug":4416,"type":16},"Images","images",{"name":4418,"slug":4419,"type":16},"Media","media","2026-07-13T06:16:51.74461",{"slug":4422,"name":4422,"fn":4423,"description":4424,"org":4425,"tags":4426,"stars":29,"repoUrl":30,"updatedAt":4436},"ios-application-dev","develop iOS applications with SwiftUI and UIKit","iOS application development guide covering UIKit, SnapKit, and SwiftUI. Includes touch targets, safe areas, navigation patterns, Dynamic Type, Dark Mode, accessibility, collection views, common UI components, and SwiftUI design guidelines. For detailed references on specific topics, see the reference files.\nUse when: developing iOS apps, implementing UI, reviewing iOS code, working with UIKit\u002FSnapKit\u002FSwiftUI layouts, building iPhone interfaces, Swift mobile development, Apple HIG compliance, iOS accessibility implementation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4427,4428,4431,4432,4435],{"name":4245,"slug":4246,"type":16},{"name":4429,"slug":4430,"type":16},"iOS","ios",{"name":4254,"slug":4255,"type":16},{"name":4433,"slug":4434,"type":16},"SwiftUI","swiftui",{"name":4257,"slug":4258,"type":16},"2026-07-13T06:16:55.686092",{"slug":4438,"name":4438,"fn":4439,"description":4440,"org":4441,"tags":4442,"stars":29,"repoUrl":30,"updatedAt":4455},"minimax-docx","create and edit DOCX documents","Professional DOCX document creation, editing, and formatting using OpenXML SDK (.NET). Three pipelines: (A) create new documents from scratch, (B) fill\u002Fedit content in existing documents, (C) apply template formatting with XSD validation gate-check. MUST use this skill whenever the user wants to produce, modify, or format a Word document — including when they say \"write a report\", \"draft a proposal\", \"make a contract\", \"fill in this form\", \"reformat to match this template\", or any task whose final output is a .docx file. Even if the user doesn't mention \"docx\" explicitly, if the task implies a printable\u002Fformal document, use this skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4443,4446,4449,4452],{"name":4444,"slug":4445,"type":16},"Documents","documents",{"name":4447,"slug":4448,"type":16},"DOCX","docx",{"name":4450,"slug":4451,"type":16},"Office","office",{"name":4453,"slug":4454,"type":16},"Templates","templates","2026-07-13T06:16:40.461868",{"slug":4457,"name":4457,"fn":4458,"description":4459,"org":4460,"tags":4461,"stars":29,"repoUrl":30,"updatedAt":4465},"minimax-music-gen","generate music and audio tracks","Use when user wants to generate music, songs, or audio tracks. Triggers on any request involving music creation, song writing, lyrics generation, audio production, or covers. Also triggers when user provides lyrics and wants them turned into a song, or describes a mood\u002Fscene and wants background music. Supports multilingual triggers — match equivalent phrases in any language. Do NOT use for music playback of existing files, music theory questions, or music recommendation without generation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4462,4463,4464],{"name":4270,"slug":4271,"type":16},{"name":14,"slug":15,"type":16},{"name":4418,"slug":4419,"type":16},"2026-07-13T06:16:50.381758",{"slug":4467,"name":4467,"fn":4468,"description":4469,"org":4470,"tags":4471,"stars":29,"repoUrl":30,"updatedAt":4475},"minimax-music-playlist","generate personalized music playlists","Generate personalized music playlists by analyzing the user's music taste and generation feedback history. Triggers on any request involving playlist generation, music taste profiling, or personalized music recommendations. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4472,4473,4474],{"name":4270,"slug":4271,"type":16},{"name":14,"slug":15,"type":16},{"name":4418,"slug":4419,"type":16},"2026-07-13T06:16:57.002997",37]