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
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
Framework
Asset Location
Component Location
Pure HTML
./assets/
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
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
Analyze the request — determine page type and context
Set design dials based on page type
Plan layout sections and identify asset needs
Phase 2: Motion Architecture
Select animation tools per section (see Tool Selection Matrix)
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.
Parse asset requirements (type, style, spec, usage)
Craft optimized prompts, show to user, confirm before generating
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
![]()
,