frontend-dev

Orchestrates frontend page creation with AI-generated media, motion, and copy for React/Next.js projects.

8|1|Updated Apr 13, 2026
One-click install
npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill frontend-dev-tugoukezhang
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/Tugoukezhang/workbuddy-skills/tree/main/skills/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91
Command: npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill frontend-dev-tugoukezhang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Frontend teams often juggle design, animation, asset generation, and copy across multiple tools; this Skill unifies design engineering, motion pipelines, AI-generated media, and persuasive copy into a cohesive frontend workflow.

Core Features & Use Cases

  • Unified frontend workflow: orchestration of design engineering, motion, AI media generation, and copy to produce production-ready pages.
  • Asset generation & optimization: generate images, videos, audio, and marketing copy for landing pages and dashboards.
  • Use Case: Create a complete landing page with cinematic scroll animations, generated visuals, and persuasive copy using a single skill.

Quick Start

Use the frontend-dev skill to scaffold a complete landing page with AI media, motion, and persuasive copy.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I automate landing page creation with React and Tailwind CSS?

Automating landing page creation with React and Tailwind CSS involves orchestrating design, motion, AI media generation, and copy into a unified frontend workflow. This approach scaffolds production-ready pages with cinematic scroll animations and generated visuals.

Can I generate AI media and marketing copy directly within a Next.js workflow?

Generating AI media and marketing copy directly within a Next.js workflow is possible by integrating AI media generation and copywriting tools. This unifies asset generation and persuasive copy creation for dashboards and product sites.

What's the best way to add cinematic scroll animations to web pages using Framer Motion and GSAP?

Adding cinematic scroll animations using Framer Motion and GSAP requires a motion pipeline that orchestrates interactions across the page. Integrating Three.js further enhances production-grade visuals within the frontend workflow.

Does this frontend workflow support Three.js for 3D visuals on product sites?

This frontend workflow supports Three.js for 3D visuals on product sites by integrating it alongside React and Next.js. It orchestrates Three.js within the motion pipeline to produce production-grade interactions and visuals.

How do I unify design engineering and asset generation for marketing pages?

Unifying design engineering and asset generation for marketing pages requires orchestrating AI-generated media, motion, and copy within a cohesive frontend workflow. This eliminates juggling multiple tools and produces production-ready pages.