frontend-dev
Frontend-dev orchestrates five specialized capabilities—design engineering, motion systems, AI asset generation, copywriting, and generative art—to create complete, visually striking web pages. It handles layout architecture, animation sequencing, local media generation, and content crafting across React, Vue, Astro, and pure HTML frameworks. Use it to build landing pages, marketing sites, product pages, dashboards, and generative art with real assets and advanced motion.
Frontend-dev builds complete, production-ready web pages combining premium design, cinematic animations, and AI-generated media assets.
AI-generated summary based on this skill's SKILL.md
Install
MiniMax-AI/skills/frontend-dev · repository language: C#
git clone https://github.com/MiniMax-AI/skills
cp -r skills/skills/frontend-dev ~/.claude/skills/frontend-devFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can frontend-dev build a landing page with animations and AI generated images?
Frontend-dev orchestrates design engineering, motion systems, and AI asset generation to create complete landing pages. It generates AI images and videos locally, implements cinematic scroll animations using GSAP and Framer Motion, and builds production-ready layouts in React, Vue, Astro, or HTML. You get fully animated pages with real generated media assets integrated end-to-end.
How does frontend-dev handle scroll-triggered animations?
Frontend-dev implements advanced scroll animations and motion sequences using GSAP and Framer Motion. It creates parallax effects, bento grid animations, smooth scroll-triggered transitions, and complex animation sequences optimized for both desktop and mobile. All animations are built with performance in mind for responsive web experiences.
What AI media can frontend-dev generate for my website?
Frontend-dev generates images, videos, audio, and music as AI media assets for web projects. These assets are created locally and integrated directly into your pages—hero sections with video backgrounds, background images, voiceovers, and music tracks. All generated media is production-ready and optimized for web delivery.
Can frontend-dev create persuasive copy for conversion-focused pages?
Frontend-dev creates persuasive copy and conversion-focused content using proven frameworks. It crafts compelling headlines, CTAs, and body copy designed to drive conversions on landing pages, product pages, and marketing sites. Copy is tailored to your page's purpose and integrated with the visual design.
Does frontend-dev support generative interactive art experiences?
Frontend-dev designs and builds generative interactive art experiences using p5.js. It creates algorithmic visuals, interactive canvas-based art, and dynamic visual systems that respond to user input. Perfect for portfolio sites, creative showcases, and experimental web projects.
What frameworks and technologies does frontend-dev work with?
Frontend-dev handles layout architecture and animation sequencing across React, Vue, Astro, and pure HTML frameworks. It's built on MIT license and integrates GSAP for animations, Framer Motion for React projects, p5.js for generative art, and AI media generation tools. Works with any modern web stack.
SKILL.md
rendered from the published skill — quoted content, verbatim
name: frontend-dev description: | 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. license: MIT metadata: version: "1.0.0" category: frontend sources: - taste-skill by Leonxlnx (https://github.com/Leonxlnx/taste-skill) — Design engineering framework - canvas-design by Anthropic (https://github.com/anthropics/skills/tree/main/skills/canvas-design) — Static visual art workflow - algorithmic-art by Anthropic (https://github.com/anthropics/skills/tree/main/skills/algorithmic-art) — Generative art workflow - Framer Motion documentation - GSAP / GreenSock documentation - Three.js documentation - Tailwind CSS documentation - React / Next.js documentation - AIDA Framework (Elmo Lewis) - p5.js
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/frontend-dev/SKILL.md
skills/frontend-dev/canvas-fonts/ArsenalSC-OFL.txt
skills/frontend-dev/canvas-fonts/ArsenalSC-Regular.ttf
skills/frontend-dev/canvas-fonts/BigShoulders-Bold.ttf
skills/frontend-dev/canvas-fonts/BigShoulders-OFL.txt
skills/frontend-dev/canvas-fonts/BigShoulders-Regular.ttf
skills/frontend-dev/canvas-fonts/Boldonse-OFL.txt
skills/frontend-dev/canvas-fonts/Boldonse-Regular.ttf
skills/frontend-dev/canvas-fonts/BricolageGrotesque-Bold.ttf
skills/frontend-dev/canvas-fonts/BricolageGrotesque-OFL.txt
skills/frontend-dev/canvas-fonts/BricolageGrotesque-Regular.ttf
skills/frontend-dev/canvas-fonts/CrimsonPro-Bold.ttf
skills/frontend-dev/canvas-fonts/CrimsonPro-Italic.ttf
skills/frontend-dev/canvas-fonts/CrimsonPro-OFL.txt
skills/frontend-dev/canvas-fonts/CrimsonPro-Regular.ttf