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
Decision gist · record as of 2026-04-18
Frontend-dev builds complete, production-ready web pages combining premium design, cinematic animations, and AI-generated media assets. 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.
Use it when
- Frontend-dev implements advanced scroll animations and motion sequences using GSAP and Framer Motion.
- Frontend-dev generates images, videos, audio, and music as AI media assets for web projects.
Verify before relying
Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.
Similar skills
Install
MiniMax-AI/skills/frontend-dev · repository language: C#
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build complete production-ready landing pages with premium design and cinematic animations”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
This skill teaches how to build distinctive, memorable frontend experiences through intentional design and technical craft. It covers WebGL and shader techniques, animation frameworks from CSS to GSAP, and a philosophy centered on creating interfaces that feel alive—responsive, layered, and purposeful rather than generic.
This skill equips AI coding agents with expert-level guidance for Android native development using Kotlin and modern Compose frameworks. Designed for developers building production-grade applications, it provides structured best practices and architectural patterns to accelerate your development workflow.
shader-dev equips AI coding agents with production-grade instruction for GLSL shader development. Access curated patterns and best practices to build real-time visual effects efficiently. Integrate this skill into your AI coding workflow to accelerate shader implementation.
frontend-design guides creation of visually striking web interfaces that prioritize intentional aesthetics over generic patterns. It produces interactive HTML, CSS, React, and Vue code for websites, dashboards, landing pages, and components—emphasizing typography, cohesive color strategies, spatial composition, and refined details. The skill emphasizes committing to a clear aesthetic direction and executing it with precision, avoiding overused design conventions.
Frontend Design teaches you to craft distinctive, polished web interfaces that reject generic AI aesthetics. Master design thinking—from choosing bold aesthetic directions to executing with precision through typography, color, motion, and spatial composition. Create memorable, production-ready components and pages grounded in real design principles.