frontend-dev

Name: frontend-dev
Availability: InStock
Author: lostsock1

Orchestrate full-stack frontend development with UI design, motion, and AI-generated assets.

1|Updated May 10, 2026

Search Tags:#generative art #web development #copywriting #animation #UI design #AI assets

Ready to run

npx skills add https://github.com/lostsock1/opencode-filmmaker --skill frontend-dev-lostsock1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/lostsock1/opencode-filmmaker/tree/main/skills/frontend-dev
Command: npx skills add https://github.com/lostsock1/opencode-filmmaker --skill frontend-dev-lostsock1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion, gsap, lottie-react, three, p5.js, tailwindcss, react, next.js, vue, svelte, astro, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a full-stack frontend development framework, automating UI design, motion, AI-generated assets, persuasive copywriting, and visual art. It builds complete, visually striking web pages with real media, advanced motion, and compelling copy.

Core Features & Use Cases

UI Design and Motion: Combines premium UI design with cinematic animations and AI-generated media assets.
AI-Generated Assets: Generates image, video, audio, and music assets using AI.
Copywriting: Offers persuasive copywriting and conversion copywriting frameworks.
Visual Art: Creates generative art using interactive templates and seeded randomness.
Use Case: Build a marketing site with engaging animations, real media assets, and persuasive copy in minutes.

Quick Start

Use the frontend-dev skill to build a landing page for a music streaming app.

Frequently Asked Questions about frontend-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a web page with cinematic animations and AI-generated media?▼

You can build a web page with cinematic animations and AI media by orchestrating UI design, motion systems, and asset generation. This process outputs complete HTML and assets with compelling copy and real media.

Can I use GSAP and Three.js to add motion and generative art to a React or Next.js app?▼

Yes, you can use GSAP and Three.js to add motion and generative art to React or Next.js. The workflow supports these frameworks, outputting complete HTML and assets with advanced motion and interactive visual art.

What frameworks are supported for generating frontend UI with motion and copywriting?▼

Supported frameworks for generating frontend UI include React, Next.js, Vue, Svelte, and Astro. The process outputs complete HTML and assets with real media, advanced motion, and persuasive copywriting for these platforms.

Does this frontend development process handle conversion copywriting and UI design together?▼

Yes, this frontend development process handles conversion copywriting and UI design together. It combines premium UI design, persuasive copywriting frameworks, and AI-generated media assets to build visually striking web pages.

How do I create generative art for a web page using p5.js and seeded randomness?▼

You create generative art for a web page using p5.js and seeded randomness through interactive templates. This generates visual art that is integrated directly into your complete web page output with real media.

Are there limitations when using Framer Motion and Lottie for web page animations?▼

Using Framer Motion and Lottie for web page animations requires careful orchestration within the frontend build process. The workflow handles these dependencies to output complete HTML and assets without manual integration limits.