Frontend Studio

Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.

Invocation

CODEBLOCK0

The user provides their request as natural language (e.g. "build a landing page for a music streaming app").

Skill Structure

CODEBLOCK1

Project Structure

Assets (Universal)

All frameworks use the same asset organization:

CODEBLOCK2

Asset naming: INLINECODE0

By Framework

Framework	Asset Location	Component Location
Pure HTML	INLINECODE1	N/A (inline or ./js/)
React/Next.js

public/assets/ | src/components/ | | Vue/Nuxt | public/assets/ | src/components/ | | Svelte/SvelteKit | static/assets/ | src/lib/components/ | | Astro | public/assets/ | src/components/ |

Pure HTML

CODEBLOCK3

React / Next.js

CODEBLOCK4

Vue / Nuxt

CODEBLOCK5

Astro

CODEBLOCK6

Component naming: PascalCase (HeroSection.tsx, HeroSection.vue, HeroSection.astro)

---

Compliance

All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering.

---

Workflow

Phase 1: Design Architecture

1. 1. Analyze the request — determine page type and context
2. Set design dials based on page type
3. Plan layout sections and identify asset needs

Phase 2: Motion Architecture

1. 1. Select animation tools per section (see Tool Selection Matrix)
2. Plan motion sequences following performance guardrails

Phase 3: Asset Generation

Generate all image/video/audio assets using scripts/. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.

1. 1. Parse asset requirements (type, style, spec, usage)
2. Craft optimized prompts, show to user, confirm before generating
3. Execute via scripts, save to project — do NOT proceed to Phase 5 until all assets are saved locally

Phase 4: Copywriting & Content

Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use "Lorem ipsum" — write real copy.

Phase 5: Build UI

Scaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All <img>, <video>, <source>, and CSS background-image MUST reference local assets from Phase 3.

Phase 6: Quality Gates

Run final checklist (see Quality Gates section).

---

1. Design Engineering

1.1 Baseline Configuration

Dial	Default	Range
DESIGNVARIANCE	8	1=Symmetry, 10=Asymmetric
MOTIONINTENSITY

6 | 1=Static, 10=Cinematic | | VISUAL_DENSITY | 4 | 1=Airy, 10=Packed |

Adapt dynamically based on user requests.

1.2 Architecture Conventions

• - DEPENDENCY VERIFICATION: Check package.json before importing any library. Output install command if missing.
• Framework: React/Next.js. Default to Server Components. Interactive components must be isolated "use client" leaf components.
• Styling: Tailwind CSS. Check version in package.json — NEVER mix v3/v4 syntax.
• ANTI-EMOJI POLICY: NEVER use emojis anywhere. Use Phosphor or Radix icons only.
• Viewport: Use min-h-[100dvh] not h-screen. Use CSS Grid not flex percentage math.
• Layout: max-w-[1400px] mx-auto or max-w-7xl.

1.3 Design Rules

Rule	Directive
Typography	Headlines: text-4xl md:text-6xl tracking-tighter. Body: text-base leading-relaxed max-w-[65ch]. NEVER use Inter — use Geist/Outfit/Satoshi. NEVER use Serif on dashboards.
Color

Max 1 accent, saturation < 80%. NEVER use AI purple/blue. Stick to one palette. |

| Layout | NEVER use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts. | | Cards | NEVER use generic cards when DENSITY > 7. Use border-t, divide-y, or spacing. | | States | ALWAYS implement: Loading (skeleton), Empty, Error, Tactile feedback (scale-[0.98]). | | Forms | Label above input. Error below. gap-2 for input blocks. |

1.4 Anti-Slop Techniques

• - Liquid Glass: backdrop-blur + border-white/10 + INLINECODE34
• Magnetic Buttons: Use useMotionValue/useTransform — never useState for continuous animations
• Perpetual Motion: When INTENSITY > 5, add infinite micro-animations (Pulse, Float, Shimmer)
• Layout Transitions: Use Framer layout and layoutId props
• Stagger: Use staggerChildren or CSS INLINECODE41

1.5 Forbidden Patterns

Category	Banned
Visual	Neon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors
Typography

Inter font, oversized H1s, Serif on dashboards |

| Layout | 3-column equal card rows, floating elements with awkward gaps | | Components | Default shadcn/ui without customization |

1.6 Creative Arsenal

Category	Patterns
Navigation	Dock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu
Layout

Bento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal | | Cards | Parallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal | | Scroll | Sticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe | | Gallery | Dome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect | | Text | Kinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid | | Micro | Particle explosion, Pull-to-refresh, Skeleton shimmer, Directional hover, Ripple click, SVG draw, Mesh gradient, Lens blur |

1.7 Bento Paradigm

• - Palette: Background #f9fafb, cards pure white with INLINECODE43
• Surfaces: rounded-[2.5rem], diffusion shadow
• Typography: Geist/Satoshi, tracking-tight headers
• Labels: Outside and below cards
• Animation: Spring physics (stiffness: 100, damping: 20), infinite loops, React.memo isolation

5-Card Archetypes:

1. 1. Intelligent List — auto-sorting with INLINECODE48
2. Command Input — typewriter + blinking cursor
3. Live Status — breathing indicators
4. Wide Data Stream — infinite horizontal carousel
5. Contextual UI — staggered highlight + float-in toolbar

1.8 Brand Override

When brand styling is active:

• - Dark: #141413, Light: #faf9f5, Mid: #b0aea5, Subtle: INLINECODE52
• Accents: Orange #d97757, Blue #6a9bcc, Green INLINECODE55
• Fonts: Poppins (headings), Lora (body)

---

2. Motion Engine

2.1 Tool Selection Matrix

Need	Tool
UI enter/exit/layout	Framer Motion — AnimatePresence, layoutId, springs
Scroll storytelling (pin, scrub)

GSAP + ScrollTrigger — frame-accurate control | | Looping icons | Lottie — lazy-load (~50KB) | | 3D/WebGL | Three.js / R3F — isolated <Canvas>, own "use client" boundary | | Hover/focus states | CSS only — zero JS cost | | Native scroll-driven | CSS — animation-timeline: scroll() |

Conflict Rules [MANDATORY]:

• - NEVER mix GSAP + Framer Motion in same component
• R3F MUST live in isolated Canvas wrapper
• ALWAYS lazy-load Lottie, GSAP, Three.js

2.2 Intensity Scale

Level	Techniques
1-2 Subtle	CSS transitions only, 150-300ms
3-4 Smooth

CSS keyframes + Framer animate, stagger ≤3 items | | 5-6 Fluid | whileInView, magnetic hover, parallax tilt | | 7-8 Cinematic | GSAP ScrollTrigger, pinned sections, horizontal hijack | | 9-10 Immersive | Full scroll sequences, Three.js particles, WebGL shaders |

2.3 Animation Recipes

See references/motion-recipes.md for full code. Summary:

Recipe	Tool	Use For
Scroll Reveal	Framer	Fade+slide on viewport entry
Stagger Grid

Framer | Sequential list animations |
| Pinned Timeline | GSAP | Horizontal scroll with pinning |
| Tilt Card | Framer | Mouse-tracking 3D perspective |
| Magnetic Button | Framer | Cursor-attracted buttons |
| Text Scramble | Vanilla | Matrix-style decode effect |
| SVG Path Draw | CSS | Scroll-linked path animation |
| Horizontal Scroll | GSAP | Vertical-to-horizontal hijack |
| Particle Background | R3F | Decorative WebGL particles |
| Layout Morph | Framer | Card-to-modal expansion |

2.4 Performance Rules

GPU-only properties (ONLY animate these): transform, opacity, filter, INLINECODE66

NEVER animate: width, height, top, left, margin, padding, font-size — if you need these effects, use transform: scale() or clip-path instead.

Isolation:

• - Perpetual animations MUST be in React.memo leaf components
• INLINECODE77 ONLY during animation
• INLINECODE78 on heavy containers

Mobile:

• - ALWAYS respect INLINECODE79
• ALWAYS disable parallax/3D on INLINECODE80
• Cap particles: desktop 800, tablet 300, mobile 100
• Disable GSAP pin on mobile < 768px

Cleanup: Every useEffect with GSAP/observers MUST INLINECODE82

2.5 Springs & Easings

Feel	Framer Config
Snappy	INLINECODE83
Smooth

stiffness: 150, damping: 20 | | Bouncy | stiffness: 100, damping: 10 | | Heavy | stiffness: 60, damping: 20 |

CSS Easing	Value
Smooth decel	INLINECODE87
Smooth accel

cubic-bezier(0.7, 0, 0.84, 0) | | Elastic | cubic-bezier(0.34, 1.56, 0.64, 1) |

2.6 Accessibility

• - ALWAYS wrap motion in prefers-reduced-motion check
• NEVER flash content > 3 times/second (seizure risk)
• ALWAYS provide visible focus rings (use outline not box-shadow)
• ALWAYS add aria-live="polite" for dynamically revealed content
• ALWAYS include pause button for auto-playing animations

2.7 Dependencies

CODEBLOCK7

---

3. Asset Generation

3.1 Scripts

Type	Script	Pattern
TTS	INLINECODE94	Sync
Music

scripts/minimax_music.py | Sync | | Video | scripts/minimax_video.py | Async (create → poll → download) | | Image | scripts/minimax_image.py | Sync |

Env: MINIMAX_API_KEY (required).

3.2 Workflow

1. 1. Parse: type, quantity, style, spec, usage
2. Craft prompt: Be specific (composition, lighting, style). NEVER include text in image prompts.
3. Execute: Show prompt to user, MUST confirm before generating, then run script
4. Save: <project>/public/assets/{images,videos,audio}/ as {type}-{descriptor}-{timestamp}.{ext} — MUST save locally
5. Post-process: Images → WebP, Videos → ffmpeg compress, Audio → normalize
6. Deliver: File path + code snippet + CSS suggestion

3.3 Preset Shortcuts

Shortcut	Spec
INLINECODE101	16:9, cinematic, text-safe
INLINECODE102

1:1, centered subject | | icon | 1:1, flat, clean background | | avatar | 1:1, portrait, circular crop ready | | banner | 21:9, OG/social | | bg-video | 768P, 6s, [Static shot] | | video-hd | 1080P, 6s | | bgm | 30s, no vocals, loopable | | tts | MiniMax HD, MP3 |

3.4 Reference

• - references/minimax-cli-reference.md — CLI flags
• INLINECODE112 — Prompt rules
• INLINECODE113 — Voice IDs
• INLINECODE114 — TTS usage
• INLINECODE115 — Music generation (prompts, lyrics, structure tags)
• INLINECODE116 — Camera commands
• INLINECODE117 — Ratios, batch

---

4. Copywriting

4.1 Core Job

1. 1. Grab attention → 2. Create desire → 3. Remove friction → 4. Prompt action

4.2 Frameworks

AIDA (landing pages, emails):
CODEBLOCK8

PAS (pain-driven products):
CODEBLOCK9

FAB (product differentiation):
CODEBLOCK10

4.3 Headlines

Formula	Example
Promise	"Double open rates in 30 days"
Question

"Still wasting 10 hours/week?" | | How-To | "How to automate your pipeline" | | Number | "7 mistakes killing conversions" | | Negative | "Stop losing leads" | | Curiosity | "The one change that tripled bookings" | | Transformation | "From 50 to 500 leads" |

Be specific. Lead with outcome, not method.

4.4 CTAs

Bad: Submit, Click here, Learn more

Good: "Start my free trial", "Get the template now", "Book my strategy call"

Formula: [Action Verb] + [What They Get] + [Urgency/Ease]

Place: above fold, after value, multiple on long pages.

4.5 Emotional Triggers

Trigger	Example
FOMO	"Only 3 spots left"
Fear of loss

"Every day without this, you're losing $X" | | Status | "Join 10,000+ top agencies" | | Ease | "Set it up once. Forget forever." | | Frustration | "Tired of tools that deliver nothing?" | | Hope | "Yes, you CAN hit $10K MRR" |

4.6 Objection Handling

Objection	Response
Too expensive	Show ROI: "Pays for itself in 2 weeks"
Won't work for me

Social proof from similar customer | | No time | "Setup takes 10 minutes" | | What if it fails | "30-day money-back guarantee" | | Need to think | Urgency/scarcity |

Place in FAQ, testimonials, near CTA.

4.7 Proof Types

Testimonials (with name/title), Case studies, Data/metrics, Social proof, Certifications

---

5. Visual Art

Philosophy-first workflow. Two output modes.

5.1 Output Modes

Mode	Output	When
Static	PDF/PNG	Posters, print, design assets
Interactive

HTML (p5.js) | Generative art, explorable variations |

5.2 Workflow

Step 1: Philosophy Creation

Name the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:

• - Static: space, form, color, scale, rhythm, hierarchy
• Interactive: computation, emergence, noise, parametric variation

Step 2: Conceptual Seed

Identify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.

Step 3: Creation

Static Mode:

• - Single page, highly visual, design-forward
• Repeating patterns, perfect shapes
• Sparse typography from INLINECODE118
• Nothing overlaps, proper margins
• Output: .pdf or .png + philosophy INLINECODE121

Interactive Mode:

1. 1. Read templates/viewer.html first
2. Keep FIXED sections (header, sidebar, seed controls)
3. Replace VARIABLE sections (algorithm, parameters)
4. Seeded randomness: INLINECODE123
5. Output: single self-contained HTML

Step 4: Refinement

Refine, don't add. Make it crisp. Polish into masterpiece.

---

Quality Gates

Design:

• - [ ] Mobile layout collapse (w-full, px-4) for high-variance designs
• [ ] min-h-[100dvh] not INLINECODE127
• [ ] Empty, loading, error states provided
• [ ] Cards omitted where spacing suffices

Motion:

• - [ ] Correct tool per selection matrix
• [ ] No GSAP + Framer mixed in same component
• [ ] All useEffect have cleanup returns
• [ ] prefers-reduced-motion respected
• [ ] Perpetual animations in React.memo leaf components
• [ ] Only GPU properties animated
• [ ] Heavy libraries lazy-loaded

General:

• - [ ] Dependencies verified in INLINECODE131
• [ ] 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.
• [ ] All media assets exist as local files in the project's assets directory
• [ ] Asset prompts confirmed with user before generation

---

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/GreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.