Frontend Studio: premium UI, cinematic motion, AI-generated assets, persuasive copy
Build complete landing pages, marketing sites and dashboards — design dials + anti-slop rules, motion tool selection matrix, AI media generation scripts, AIDA/PAS/FAB copywriting, generative art, hard quality gates
- What
- Build complete landing pages, marketing sites and dashboards — design dials + anti-slop rules, motion tool selection matrix, AI media generation scripts, AIDA/PAS/FAB copywriting, generative art, hard quality gates
- Cost
- Free
- Needs
- a frontend project to build; a MiniMax API key (MINIMAX_API_KEY) only if using the AI asset-generation scripts — generation usage is billed, budget it first; the rest of the skill (design, motion, copy, art) works without it
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @minimax-ai's "Frontend Studio" skill for building complete, visually striking web pages. Five orchestrated capabilities: design engineering (design dials — variance/intensity/density — plus opinionated anti-slop rules: never Inter, never AI purple/blue, never centered heroes at high variance, never emojis, never generic cards at high density), motion systems (tool selection matrix — Framer Motion, GSAP ScrollTrigger, Lottie, Three.js, CSS — with mandatory conflict rules and GPU-only animation properties), AI-generated media assets (scripts for image, video, music and TTS generation, never placeholder URLs, assets saved locally), persuasive copywriting (AIDA, PAS, FAB frameworks, headline formulas, CTAs, objection handling), and generative art (philosophy-first static and interactive p5.js modes). Per-framework project structures (pure HTML, React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro), brand-override palettes, and hard quality gates — accessibility included (prefers-reduced-motion, no flashing > 3Hz, focus rings, aria-live). Honest caveats: the asset-generation scripts require a MiniMax API key (real usage costs money — budget it before generating); asset prompts must be user-confirmed before generation; the motion/design opinions are strong and prescriptive (anti-emoji, anti-Inter) — follow or override deliberately; sources and third-party docs are acknowledged (taste-skill, Anthropic canvas-design/algorithmic-art, Framer, GSAP, Tailwind). MIT licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a frontend project to build; a MiniMax API key (MINIMAX_API_KEY) only if using the AI asset-generation scripts — generation usage is billed, budget it first; the rest of the skill (design, motion, copy, art) works without it Install "Frontend Studio: premium UI, cinematic motion, AI-generated assets, persuasive copy" for me. It gives my agent @minimax-ai's Frontend Studio workflow: set design dials and follow the anti-slop design rules, pick animation tools from the selection matrix with mandatory conflict rules, generate real media assets locally (user-confirmed prompts, MiniMax API), write conversion copy with AIDA/PAS/FAB, build framework-correct projects (React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro, pure HTML), and pass the hard quality gates including accessibility. MIT-licensed. Repository: https://github.com/minimax-ai/skills/blob/main/skills/frontend-dev/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-dev". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. confirm asset-generation prompts before they run; provide a MiniMax API key (saved in the vault, billed usage) if I want AI-generated media; choose or override the design dials). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.