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.

13,746 stars 1,205 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add MiniMax-AI/skills --skill frontend-dev
Manual install
git clone --depth 1 https://github.com/MiniMax-AI/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -r /tmp/skills/skills/frontend-dev ~/.claude/skills/frontend-dev

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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
Read the full skill on GitHub

Details

Skill name
frontend-dev
Path
skills/frontend-dev/SKILL.md
License
MIT
Repo updated
18 April 2026

FAQ

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 the Frontend Dev skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add MiniMax-AI/skills --skill frontend-dev. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Dev popular?

It lives in MiniMax-AI/skills, which has 13,746 GitHub stars and 1,205 forks, and is included in 1 curated skill list.

Related skills

Minimax PDF

14k

MiniMax-AI/skills

Use this skill when visual quality and design identity matter for a PDF. CREATE (generate from scratch): "make a PDF", "generate a report", "write a proposal", "create a resume", "beautiful PDF", "professional document", "cover page", "polished PDF", "client-ready document". FILL (complete form fields): "fill in the form", "fill out this PDF", "complete the form fields", "write values into PDF", "what fields does this PDF have". REFORMAT (apply design to an existing doc): "reformat this document", "apply our style", "convert this Markdown/text to PDF", "make this doc look good", "re-style this

Documents & Office FilesIn 1 list1.2k

Design Md

8.6k

google-labs-code/stitch-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Frontend & DesignIn 1 list1k

Gsap Scrolltrigger

18k

greensock/gsap-skills

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.

Frontend & DesignIn 1 list1.1k

Shadcn UI

8.6k

google-labs-code/stitch-skills

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

Frontend & DesignIn 1 list1k

Gsap React

18k

greensock/gsap-skills

Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.

Frontend & DesignIn 1 list1.1k

Stitch::react Components

8.6k

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

Frontend & DesignIn 1 list1k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.