Agent skill · bighardperson
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.
What it needs
About 12k tokens when loaded.
What this skill does
Frontend Studio Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art. Invocation The user provides their request as natural language (e.g. "build a landing page for a music streaming app"). Skill Structure Project Structure Assets (Universal) All frameworks use the same asset organization: Asset naming: {type}-{descriptor}-{timestamp}.{ext} By Framework Framework Asset Location Component Location ----------- --------------- ------------------- Pure HTML ./assets/ N/A (inline or ./js/) React/Next.js public/assets/ src/components/ Vue/Nuxt public/assets/ src/components/ Svelte/SvelteKit static/assets/ src/lib/components/ Astro public/assets/ src/components/ Pure HTML React / Next.js Vue / Nuxt Astro Component naming: PascalCase (HeroSection.tsx, HeroSection.vue, HeroSection.astro) --- Compliance All rules in this skill are mandatory. Violating any rule is a blocking error — fix before proceeding or delivering. --- Workflow Phase 1: Design Architecture 1. Analyze the request — determine page type and context 2. Set design dials based on page type 3. Plan layout sections and identify asset needs Phase 2: Motion Architecture 1. Select animation tools per section (see Tool Selection Matrix) 2. Plan motion sequences following performance guardrails Phase 3: Asset Generation Generate all image/video/audio assets using scripts/. NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs. 1. Parse asset requirements (type, style, spec, usage) 2. Craft optimized prompts, show to user, confirm before generating 3. Execute via scripts, save to project — do NOT proceed to Phase 5 until all assets are saved locally Phase 4: Copywriting & Content Follow copywriting frameworks (AIDA, PAS, FAB) to craft all text content. Do NOT use "Lorem ipsum" — write real copy. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills bighardperson/前端开发