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.

12,549stars1,084forksUpdated 6/10/2026

Web Development #frontend #generative-art #react #ai-generated-assets #web-development #javascript

Security Assessment

High Risk(30/100)

Detected risks:

Secret Exposure([references/env-setup.md] API_KEY=, [references/troubleshooting.md] API_KEY=)

Privilege Escalation([references/env-setup.md] sudo, [references/troubleshooting.md] sudo)

Security Score30/100

About frontend-dev

The frontend-dev skill is a comprehensive AI-powered toolkit designed for full-stack frontend development, enabling users to build visually compelling and production-ready web pages. It solves the problem of integrating multiple creative and technical workflows into a unified process, combining premium UI design, cinematic animations, AI-generated media, persuasive copywriting, and generative art. By orchestrating these capabilities, it allows developers and designers to rapidly prototype and deploy feature-rich web experiences without manually handling each component separately.

The skill features a structured approach to frontend development, including specialized modules for design engineering, motion systems (using frameworks like Framer Motion, GSAP, and Three.js), AI-generated media assets (images, video, audio, and music), persuasive copy generation following the AIDA framework, and generative art creation via p5.js and algorithmic-art workflows. It also provides organized scripts for asset generation, reference guides for workflow optimization, and templates for interactive and static visual art, making it suitable for complex frontend projects across multiple frameworks including React/Next.js, Vue/Nuxt, Svelte/SvelteKit, and Astro.

Target use cases include building landing pages, marketing sites, product pages, dashboards, and immersive web experiences with cinematic scroll animations. Users can leverage this skill for creating generative art, producing AI-driven media assets, and generating high-conversion copy. Its audience primarily consists of frontend developers, UI/UX designers, creative technologists, and marketing professionals seeking to streamline the production of visually rich, interactive, and media-intensive web pages.

FAQ

How do I invoke the frontend-dev skill?

You can invoke the skill using the command `/frontend-dev <request>` where the request is a natural language description of the page or asset you want to generate, such as 'build a landing page for a music streaming app'.

Which frontend frameworks are compatible with this skill?

The skill is compatible with Pure HTML, React/Next.js, Vue/Nuxt, Svelte/SvelteKit, and Astro. It provides specific asset and component folder structures for each framework.

Can frontend-dev generate media assets like images, video, and audio?

Yes, it includes scripts for AI-generated images, video, music, and text-to-speech, organized under the `scripts/` directory for streamlined generation.

Are there any limitations or requirements for using this skill?

You need to follow the provided asset and project structures for proper integration. Some functionalities depend on external frameworks and libraries such as Framer Motion, GSAP, Three.js, Tailwind CSS, and p5.js, which should be set up according to the reference guides.

How are assets organized and named?

All assets follow a universal structure under `assets/` directories with subfolders for images, videos, and audio. Assets use the naming convention `{type}-{descriptor}-{timestamp}.{ext}` to maintain consistency and traceability.

All Files

44 files

canvas-fonts/ArsenalSC-OFL.txt4.3 KB