frontend-dev
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
npx skills add vibeeval/vibecosystem --skill frontend-dev --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Invocation
- Skill Structure
- Project Structure
- Assets (Universal)
- By Framework
- Pure HTML
- React / Next.js
- Vue / Nuxt
- Astro
- Compliance
- Workflow
- Phase 1: Design Architecture
- Phase 2: Motion Architecture
- Phase 3: Asset Generation
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)
What does the frontend-dev skill do?
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill frontend-dev --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.