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

/frontend-dev <request>

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

Skill Structure

frontend-dev/
├── SKILL.md                      # Core skill (this file)
├── scripts/                      # Asset generation scripts
│   ├── minimax_tts.py            # Text-to-speech
│   ├── minimax_music.py          # Music generation
│   ├── minimax_video.py          # Video generation (async)
│   └── minimax_image.py          # Image generation
├── references/                   # Detailed guides (read as needed)
│   ├── minimax-cli-reference.md  # CLI flags quick reference
│   ├── asset-prompt-guide.md     # Asset prompt engineering rules
│   ├── minimax-tts-guide.md      # TTS usage & voices
│   ├── minimax-music-guide.md    # Music prompts & lyrics format
│   ├── minimax-video-guide.md    # Camera commands & models
│   ├── minimax-image-guide.md    # Ratios & batch generation
│   ├── minimax-voice-catalog.md  # All voice IDs
│   ├── motion-recipes.md         # Animation code snippets
│   ├── env-setup.md              # Environment setup
│   └── troubleshooting.md        # Common issues
├── templates/                    # Visual art templates
│   ├── viewer.html               # p5.js interactive art base
│   └── generator_template.js     # p5.js code reference
└── canvas-fonts/                 # Static art fonts (TTF + licenses)

Project Structure

Assets (Universal)

All frameworks use the same asset organization:

assets/
├── images/
│   ├── hero-landing-1710xxx.webp
│   ├── icon-feature-01.webp
│   └── bg-pattern.svg
├── videos/
│   ├── hero-bg-1710xxx.mp4
│   └── demo-preview.mp4
└── audio/
    ├── bgm-ambient-1710xxx.mp3
    └── tts-intro-1710xxx.mp3

Asset naming:

{type}-{descriptor}-{timestamp}.{ext}

By Framework

./assets/

./js/

public/assets/

src/components/

public/assets/

src/components/

static/assets/

src/lib/components/

public/assets/

src/components/

Pure HTML

project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # Animations (GSAP/vanilla)

React / Next.js

project/
├── public/assets/        # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # Pages
└── package.json

Vue / Nuxt

project/
├── public/assets/
├── src/                  # or root for Nuxt
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # Shared logic
│   ├── pages/
│   └── assets/           # Processed assets (optional)
└── package.json

Astro

project/
├── public/assets/
├── src/
│   ├── components/       # .astro, .tsx, .vue, .svelte
│   ├── layouts/
│   ├── pages/
│   └── styles/
└── package.json

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. 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. 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/

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>

background-image

Phase 6: Quality Gates

Run final checklist (see Quality Gates section).

1. Design Engineering

1.1 Baseline Configuration

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

text-4xl md:text-6xl tracking-tighter

text-base leading-relaxed max-w-[65ch]

border-t

divide-y

scale-[0.98]

gap-2

1.4 Anti-Slop Techniques

• Liquid Glass:

  backdrop-blur

  +

  border-white/10

  +

  shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]

• 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

  animation-delay: calc(var(--index) * 100ms)

1.5 Forbidden Patterns

1.6 Creative Arsenal

1.7 Bento Paradigm

• Palette: Background

  #f9fafb

  , cards pure white with

  border-slate-200/50

• 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. Intelligent List — auto-sorting with

   layoutId

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:

  #e8e6dc

• Accents: Orange

  #d97757

  , Blue

  #6a9bcc

  , Green

  #788c5d

• Fonts: Poppins (headings), Lora (body)

2. Motion Engine

2.1 Tool Selection Matrix

AnimatePresence

layoutId

<Canvas>

"use client"

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

whileInView

2.3 Animation Recipes

See

references/motion-recipes.md

2.4 Performance Rules

GPU-only properties (ONLY animate these):

transform

opacity

filter

clip-path

NEVER animate:

width

height

top

left

margin

padding

font-size

transform: scale()

clip-path

Isolation:

• Perpetual animations MUST be in

  React.memo

  leaf components

• will-change: transform

  ONLY during animation

• contain: layout style paint

  on heavy containers

Mobile:

• ALWAYS respect

  prefers-reduced-motion

• ALWAYS disable parallax/3D on

  pointer: coarse

• Cap particles: desktop 800, tablet 300, mobile 100
• Disable GSAP pin on mobile < 768px

Cleanup: Every

useEffect

return () => ctx.revert()

2.5 Springs & Easings

stiffness: 300, damping: 30

stiffness: 150, damping: 20

stiffness: 100, damping: 10

stiffness: 60, damping: 20

cubic-bezier(0.16, 1, 0.3, 1)

cubic-bezier(0.7, 0, 0.84, 0)

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

npm install framer-motion           # UI (keep at top level)
npm install gsap                    # Scroll (lazy-load)
npm install lottie-react            # Icons (lazy-load)
npm install three @react-three/fiber @react-three/drei  # 3D (lazy-load)

3. Asset Generation

3.1 Scripts

scripts/minimax_tts.py

scripts/minimax_music.py

scripts/minimax_video.py

scripts/minimax_image.py

Env:

MINIMAX_API_KEY

3.2 Workflow

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

hero

thumb

icon

avatar

banner

bg-video

[Static shot]

video-hd

bgm

tts

3.4 Reference

• references/minimax-cli-reference.md

  — CLI flags

• references/asset-prompt-guide.md

  — Prompt rules

• references/minimax-voice-catalog.md

  — Voice IDs

• references/minimax-tts-guide.md

  — TTS usage

• references/minimax-music-guide.md

  — Music generation (prompts, lyrics, structure tags)

• references/minimax-video-guide.md

  — Camera commands

• references/minimax-image-guide.md

  — Ratios, batch

4. Copywriting

4.1 Core Job

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

4.2 Frameworks

AIDA (landing pages, emails):

ATTENTION:  Bold headline (promise or pain)
INTEREST:   Elaborate problem ("yes, that's me")
DESIRE:     Show transformation
ACTION:     Clear CTA

PAS (pain-driven products):

PROBLEM:    State clearly
AGITATE:    Make urgent
SOLUTION:   Your product

FAB (product differentiation):

FEATURE:    What it does
ADVANTAGE:  Why it matters
BENEFIT:    What customer gains

4.3 Headlines

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

4.6 Objection Handling

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

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

  canvas-fonts/

• Nothing overlaps, proper margins
• Output:

  .pdf

  or

  .png

  + philosophy

  .md

Interactive Mode:

1. Read

   templates/viewer.html

   first
2. Keep FIXED sections (header, sidebar, seed controls)
3. Replace VARIABLE sections (algorithm, parameters)
4. Seeded randomness:

   randomSeed(seed); noiseSeed(seed);

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

  h-screen

• 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

  package.json

• 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.