skills.rest
lostsock1
lostsock1COMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

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
One-click install
npx skills add https://github.com/lostsock1/opencode-filmmaker --skill frontend-dev-lostsock1
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
i5tingi5ting
172

Nodejs Newbie

Teach Node.js fundamentals including NVM setup, npm, and Git workflows.

Community
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-deployment

Deploy Slidev presentations to GitHub Pages, Netlify, Vercel, or Docker.

Community
Advanced
mgd34msumgd34msu
4

payload

Develop full-stack applications with Payload CMS using TypeScript and REST or GraphQL APIs.

Community
Advanced
hgxszhj-pixelhgxszhj-pixel
2

frontend-dev

Automate full-stack frontend page creation with AI-driven design and asset generation.

Community
Advanced