frontend-dev

name frontend-dev description 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. license MIT metadata {"version":"1.0.0","category":"frontend","sources":["taste-skill by Leonxlnx (https://github.com/Leonxlnx/taste-skill) — Design engineering framework","canvas-design by Anthropic (https://github.com/anthropics/skills/tree/main/skills/canvas-design) — Static visual art workflow","algorithmic-art by Anthropic (https://github.com/anthropics/skills/tree/main/skills/algorithmic-art) — Generative art workflow","Framer Motion documentation","GSAP / GreenSock documentation","Three.js documentation","Tailwind CSS documentation","React / Next.js documentation","AIDA Framework (Elmo Lewis)","p5.js documentation"]} 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 /frontend-dev <request> The user provides their request as natural language (e.g. "build a landing page for a music streaming app"). Skill Structure frontend-dev/ ├── SKILL.md # Core skill (this file) ├── scripts/ # Asset generation scripts │ ├── minimax_tts.py # Text-to-speech │ ├── minimax_music.py # Music generation │ ├── minimax_video.py # Video generation (async) │ └── minimax_image.py # Image generation ├── references/ # Detailed guides (read as needed) │ ├── minimax-cli-reference.md # CLI flags quick reference │ ├── asset-prompt-guide.md # Asset prompt engineering rules │ ├── minimax-tts-guide.md # TTS usage & voices │ ├── minimax-music-guide.md # Music prompts & lyrics format │ ├── minimax-video-guide.md # Camera commands & models │ ├── minimax-image-guide.md # Ratios & batch generation │ ├── minimax-voice-catalog.md # All voice IDs │ ├── motion-recipes.md # Animation code snippets │ ├── env-setup.md # Environment setup │ └── troubleshooting.md # Common issues ├── templates/ # Visual art templates │ ├── viewer.html # p5.js interactive art base │ └── generator_template.js # p5.js code reference └── canvas-fonts/ # Static art fonts (TTF + licenses) Project Structure Assets (Universal) All frameworks use the same asset organization: assets/ ├── images/ │ ├── hero-landing-1710xxx.webp │ ├── icon-feature-01.webp │ └── bg-pattern.svg ├── videos/ │ ├── hero-bg-1710xxx.mp4 │ └── demo-preview.mp4 └── audio/ ├── bgm-ambient-1710xxx.mp3 └── tts-intro-1710xxx.mp3 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 project/ ├── index.html ├── assets/ │ ├── images/ │ ├── videos/ │ └── audio/ ├── css/ │ └── styles.css └── js/ └── main.js # Animations (GSAP/vanilla) React / Next.js project/ ├── public/assets/ # Static assets ├── src/ │ ├── components/ │ │ ├── ui/ # Button, Card, Input │ │ ├── sections/ # Hero, Features, CTA │ │ └── motion/ # RevealSection, StaggerGrid │ ├── lib/ │ ├── styles/ │ └── app/ # Pages └── package.json Vue / Nuxt project/ ├── public/assets/ ├── src/ # or root for Nuxt │ ├── components/ │ │ ├── ui/ │ │ ├── sections/ │ │ └── motion/ │ ├── composables/ # Shared logic │ ├── pages/ │ └── assets/ # Processed assets (optional) └── package.json Astro project/ ├── public/assets/ ├── src/ │ ├── components/ # .astro, .tsx, .vue, .svelte │ ├── layouts/ │ ├── pages/ │ └── styles/ └── package.json 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 Analyze the request — determine page type and context Set design dials based on page type Plan layout sections and identify asset needs Phase 2: Motion Architecture Select animation tools per section (see Tool Selection Matrix) 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. Parse asset requirements (type, style, spec, usage) Craft optimized prompts, show to user, confirm before generating 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. Phase 5: Build UI Scaffold the project and build each section following Design and Motion rules. Integrate generated assets and copy. All <img> , <video> , <source> , and CSS background-image MUST reference local assets from Phase 3. Phase 6: Quality Gates Run final checklist (see Quality Gates section). 1. Design Engineering 1.1 Baseline Configuration Dial Default Range DESIGN_VARIANCE 8 1=Symmetry, 10=Asymmetric MOTION_INTENSITY 6 1=Static, 10=Cinematic VISUAL_DENSITY 4 1=Airy, 10=Packed Adapt dynamically based on user requests. 1.2 Architecture Conventions DEPENDENCY VERIFICATION: Check package.json before importing any library. Output install command if missing. Framework: React/Next.js. Default to Server Components. Interactive components must be isolated "use client" leaf components. Styling: Tailwind CSS. Check version in package.json — NEVER mix v3/v4 syntax. ANTI-EMOJI POLICY: NEVER use emojis anywhere. Use Phosphor or Radix icons only. Viewport: Use min-h-[100dvh] not h-screen . Use CSS Grid not flex percentage math. Layout: max-w-[1400px] mx-auto or max-w-7xl . 1.3 Design Rules Rule Directive Typography Headlines: text-4xl md:text-6xl tracking-tighter . Body: text-base leading-relaxed max-w-[65ch] . NEVER use Inter — use Geist/Outfit/Satoshi. NEVER use Serif on dashboards. Color Max 1 accent, saturation < 80%. NEVER use AI purple/blue. Stick to one palette. Layout NEVER use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts. Cards NEVER use generic cards when DENSITY > 7. Use border-t , divide-y , or spacing. States ALWAYS implement: Loading (skeleton), Empty, Error, Tactile feedback ( scale-[0.98] ). Forms Label above input. Error below. gap-2 for input blocks. 1.4 Anti-Slop Techniques Liquid Glass: backdrop-blur + border-white/10 + shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] Magnetic Buttons: Use useMotionValue / useTransform — never useState for continuous animations Perpetual Motion: When INTENSITY > 5, add infinite micro-animations (Pulse, Float, Shimmer) Layout Transitions: Use Framer layout and layoutId props Stagger: Use staggerChildren or CSS animation-delay: calc(var(--index) * 100ms) 1.5 Forbidden Patterns Category Banned Visual Neon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors Typography Inter font, oversized H1s, Serif on dashboards Layout 3-column equal card rows, floating elements with awkward gaps Components Default shadcn/ui without customization 1.6 Creative Arsenal Category Patterns Navigation Dock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu Layout Bento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal Cards Parallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal Scroll Sticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe Gallery Dome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect Text Kinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid Micro Particle explosion, Pull-to-refresh, Skeleton shimmer, Directional hover, Ripple click, SVG draw, Mesh gradient, Lens blur 1.7 Bento Paradigm Palette: Background #f9fafb , cards pure white with border-slate-200/50 Surfaces: rounded-[2.5rem] , diffusion shadow Typography: Geist/Satoshi, tracking-tight headers Labels: Outside and below cards Animation: Spring physics ( stiffness: 100, damping: 20 ), infinite loops, React.memo isolation 5-Card Archetypes: Intelligent List — auto-sorting with layoutId Command Input — typewriter + blinking cursor Live Status — breathing indicators Wide Data Stream — infinite horizontal carousel Contextual UI — staggered highlight + float-in toolbar 1.8 Brand Override When brand styling is active: Dark: #141413 , Light: #faf9f5 , Mid: #b0aea5 , Subtle: #e8e6dc Accents: Orange #d97757 , Blue #6a9bcc , Green #788c5d Fonts: Poppins (headings), Lora (body) 2. Motion Engine 2.1 Tool Selection Matrix Need Tool UI enter/exit/layout Framer Motion — AnimatePresence , layoutId , springs Scroll storytelling (pin, scrub) GSAP + ScrollTrigger — frame-accurate control Looping icons Lottie — lazy-load (~50KB) 3D/WebGL Three.js / R3F — isolated <Canvas> , own "use client" boundary Hover/focus states CSS only — zero JS cost Native scroll-driven CSS — animation-timeline: scroll() Conflict Rules [MANDATORY]: NEVER mix GSAP + Framer Motion in same component R3F MUST live in isolated Canvas wrapper ALWAYS lazy-load Lottie, GSAP, Three.js 2.2 Intensity Scale Level Techniques 1-2 Subtle CSS transitions only, 150-300ms 3-4 Smooth CSS keyframes + Framer animate, stagger ≤3 items 5-6 Fluid whileInView , magnetic hover, parallax tilt 7-8 Cinematic GSAP ScrollTrigger, pinned sections, horizontal hijack 9-10 Immersive Full scroll sequences, Three.js particles, WebGL shaders 2.3 Animation Recipes See references/motion-recipes.md for full code. Summary: Recipe Tool Use For Scroll Reveal Framer Fade+slide on viewport entry Stagger Grid Framer Sequential list animations Pinned Timeline GSAP Horizontal scroll with pinning Tilt Card Framer Mouse-tracking 3D perspective Magnetic Button Framer Cursor-attracted buttons Text Scramble Vanilla Matrix-style decode effect SVG Path Draw CSS Scroll-linked path animation Horizontal Scroll GSAP Vertical-to-horizontal hijack Particle Background R3F Decorative WebGL particles Layout Morph Framer Card-to-modal expansion 2.4 Performance Rules GPU-only properties (ONLY animate these): transform , opacity , filter , clip-path NEVER animate: width , height , top , left , margin , padding , font-size — if you need these effects, use transform: scale() or clip-path instead. Isolation: Perpetual animations MUST be in React.memo leaf components will-change: transform ONLY during animation contain: layout style paint on heavy containers Mobile: ALWAYS respect prefers-reduced-motion ALWAYS disable parallax/3D on pointer: coarse Cap particles: desktop 800, tablet 300, mobile 100 Disable GSAP pin on mobile < 768px Cleanup: Every useEffect with GSAP/observers MUST return () => ctx.revert() 2.5 Springs & Easings Feel Framer Config Snappy stiffness: 300, damping: 30 Smooth stiffness: 150, damping: 20 Bouncy stiffness: 100, damping: 10 Heavy stiffness: 60, damping: 20 CSS Easing Value