Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bighardperson avatar

Frontend Dev

bighardperson/computer-science-skills-collection

  • 8 installs
  • 33 repo stars
  • Updated April 26, 2026
  • bighardperson/computer-science-skills-collection

This is a copy of frontend-dev by minimax-ai - installs and ranking accrue to the original listing.

frontend-dev is a skill that builds complete frontend pages combining UI design, cinematic animations, AI-generated media, persuasive copy, and generative art.

About

frontend-dev is a skill that builds complete frontend pages by combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and generative art. A developer uses it for landing pages, marketing sites, and product pages, generating real image, video, audio, and music assets via MiniMax scripts instead of placeholders. It orchestrates design, motion, assets, copy, and art across common frameworks.

  • Builds complete frontend pages with UI design, motion, media, and copy
  • Generates AI image, video, audio, and music assets via MiniMax scripts
  • Supports HTML, React/Next, Vue/Nuxt, Svelte, and Astro project layouts

Frontend Dev by the numbers

  • 8 all-time installs (skills.sh)
  • Data as of Jul 30, 2026 (Skillselion catalog sync)
At a glance

frontend-dev capabilities & compatibility

Asset generation uses MiniMax scripts that need API keys; page building itself has no fixed fee.

Capabilities
ui design · web animation · media generation · copywriting
Use cases
frontend · web design · ui design · image generation · video generation
Pricing
Bring your own API key
From the docs

What frontend-dev says it does

Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.
SKILL.md
NEVER use placeholder URLs (unsplash, picsum, placeholder.com, via.placeholder, placehold.co, etc.) or external URLs.
SKILL.md
npx skills add https://github.com/bighardperson/computer-science-skills-collection --skill frontend-dev

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs8
repo stars★ 33
Last updatedApril 26, 2026
Repositorybighardperson/computer-science-skills-collection ↗

What it does

Build complete frontend pages with premium UI, motion, AI-generated media assets, and persuasive copy.

Who is it for?

Producing full landing or marketing pages with real media assets, motion, and conversion copy.

Skip if: Backend, database, or pure API work.

When should I use this skill?

The user wants to build a landing page, marketing site, or product page with media, animation, and copy.

What you get

  • Complete frontend page with real media, motion, and copy

By the numbers

  • orchestrates 5 capabilities: design, motion, assets, copy, art
  • supports 5 framework layouts
  • 4 MiniMax asset scripts (tts, music, video, image)

Files

SKILL.mdMarkdownGitHub ↗

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

FrameworkAsset LocationComponent Location
Pure HTML./assets/N/A (inline or ./js/)
React/Next.jspublic/assets/src/components/
Vue/Nuxtpublic/assets/src/components/
Svelte/SvelteKitstatic/assets/src/lib/components/
Astropublic/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

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.

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

DialDefaultRange
DESIGN_VARIANCE81=Symmetry, 10=Asymmetric
MOTION_INTENSITY61=Static, 10=Cinematic
VISUAL_DENSITY41=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

RuleDirective
TypographyHeadlines: 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.
ColorMax 1 accent, saturation < 80%. NEVER use AI purple/blue. Stick to one palette.
LayoutNEVER use centered heroes when VARIANCE > 4. Force split-screen or asymmetric layouts.
CardsNEVER use generic cards when DENSITY > 7. Use border-t, divide-y, or spacing.
StatesALWAYS implement: Loading (skeleton), Empty, Error, Tactile feedback (scale-[0.98]).
FormsLabel 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

CategoryBanned
VisualNeon glows, pure black (#000), oversaturated accents, gradient text on headers, custom cursors
TypographyInter font, oversized H1s, Serif on dashboards
Layout3-column equal card rows, floating elements with awkward gaps
ComponentsDefault shadcn/ui without customization

1.6 Creative Arsenal

CategoryPatterns
NavigationDock magnification, Magnetic button, Gooey menu, Dynamic island, Radial menu, Speed dial, Mega menu
LayoutBento grid, Masonry, Chroma grid, Split-screen scroll, Curtain reveal
CardsParallax tilt, Spotlight border, Glassmorphism, Holographic foil, Swipe stack, Morphing modal
ScrollSticky stack, Horizontal hijack, Locomotive sequence, Zoom parallax, Progress path, Liquid swipe
GalleryDome gallery, Coverflow, Drag-to-pan, Accordion slider, Hover trail, Glitch effect
TextKinetic marquee, Text mask reveal, Scramble effect, Circular path, Gradient stroke, Kinetic grid
MicroParticle 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: 1. Intelligent List — auto-sorting with layoutId 2. Command Input — typewriter + blinking cursor 3. Live Status — breathing indicators 4. Wide Data Stream — infinite horizontal carousel 5. 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

NeedTool
UI enter/exit/layoutFramer Motion — AnimatePresence, layoutId, springs
Scroll storytelling (pin, scrub)GSAP + ScrollTrigger — frame-accurate control
Looping iconsLottie — lazy-load (~50KB)
3D/WebGLThree.js / R3F — isolated <Canvas>, own "use client" boundary
Hover/focus statesCSS only — zero JS cost
Native scroll-drivenCSS — 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

LevelTechniques
1-2 SubtleCSS transitions only, 150-300ms
3-4 SmoothCSS keyframes + Framer animate, stagger ≤3 items
5-6 FluidwhileInView, magnetic hover, parallax tilt
7-8 CinematicGSAP ScrollTrigger, pinned sections, horizontal hijack
9-10 ImmersiveFull scroll sequences, Three.js particles, WebGL shaders

2.3 Animation Recipes

See references/motion-recipes.md for full code. Summary:

RecipeToolUse For
Scroll RevealFramerFade+slide on viewport entry
Stagger GridFramerSequential list animations
Pinned TimelineGSAPHorizontal scroll with pinning
Tilt CardFramerMouse-tracking 3D perspective
Magnetic ButtonFramerCursor-attracted buttons
Text ScrambleVanillaMatrix-style decode effect
SVG Path DrawCSSScroll-linked path animation
Horizontal ScrollGSAPVertical-to-horizontal hijack
Particle BackgroundR3FDecorative WebGL particles
Layout MorphFramerCard-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

FeelFramer Config
Snappystiffness: 300, damping: 30
Smoothstiffness: 150, damping: 20
Bouncystiffness: 100, damping: 10
Heavystiffness: 60, damping: 20
CSS EasingValue
Smooth decelcubic-bezier(0.16, 1, 0.3, 1)
Smooth accelcubic-bezier(0.7, 0, 0.84, 0)
Elasticcubic-bezier(0.34, 1.56, 0.64, 1)

2.6 Accessibility

  • ALWAYS wrap motion in prefers-reduced-motion check
  • NEVER flash content > 3 times/second (seizure risk)
  • ALWAYS provide visible focus rings (use outline not box-shadow)
  • ALWAYS add aria-live="polite" for dynamically revealed content
  • ALWAYS include pause button for auto-playing animations

2.7 Dependencies

npm install framer-motion           # UI (keep at top level)
npm install gsap                    # Scroll (lazy-load)
npm install lottie-react            # Icons (lazy-load)
npm install three @react-three/fiber @react-three/drei  # 3D (lazy-load)

---

3. Asset Generation

3.1 Scripts

TypeScriptPattern
TTSscripts/minimax_tts.pySync
Musicscripts/minimax_music.pySync
Videoscripts/minimax_video.pyAsync (create → poll → download)
Imagescripts/minimax_image.pySync

Env: MINIMAX_API_KEY (required).

3.2 Workflow

1. Parse: type, quantity, style, spec, usage 2. Craft prompt: Be specific (composition, lighting, style). NEVER include text in image prompts. 3. Execute: Show prompt to user, MUST confirm before generating, then run script 4. Save: <project>/public/assets/{images,videos,audio}/ as {type}-{descriptor}-{timestamp}.{ext} — MUST save locally 5. Post-process: Images → WebP, Videos → ffmpeg compress, Audio → normalize 6. Deliver: File path + code snippet + CSS suggestion

3.3 Preset Shortcuts

ShortcutSpec
hero16:9, cinematic, text-safe
thumb1:1, centered subject
icon1:1, flat, clean background
avatar1:1, portrait, circular crop ready
banner21:9, OG/social
bg-video768P, 6s, [Static shot]
video-hd1080P, 6s
bgm30s, no vocals, loopable
ttsMiniMax HD, MP3

3.4 Reference

  • references/minimax-cli-reference.md — CLI flags
  • references/asset-prompt-guide.md — Prompt rules
  • references/minimax-voice-catalog.md — Voice IDs
  • references/minimax-tts-guide.md — TTS usage
  • references/minimax-music-guide.md — Music generation (prompts, lyrics, structure tags)
  • references/minimax-video-guide.md — Camera commands
  • references/minimax-image-guide.md — Ratios, batch

---

4. Copywriting

4.1 Core Job

1. Grab attention → 2. Create desire → 3. Remove friction → 4. Prompt action

4.2 Frameworks

AIDA (landing pages, emails):

ATTENTION:  Bold headline (promise or pain)
INTEREST:   Elaborate problem ("yes, that's me")
DESIRE:     Show transformation
ACTION:     Clear CTA

PAS (pain-driven products):

PROBLEM:    State clearly
AGITATE:    Make urgent
SOLUTION:   Your product

FAB (product differentiation):

FEATURE:    What it does
ADVANTAGE:  Why it matters
BENEFIT:    What customer gains

4.3 Headlines

FormulaExample
Promise"Double open rates in 30 days"
Question"Still wasting 10 hours/week?"
How-To"How to automate your pipeline"
Number"7 mistakes killing conversions"
Negative"Stop losing leads"
Curiosity"The one change that tripled bookings"
Transformation"From 50 to 500 leads"

Be specific. Lead with outcome, not method.

4.4 CTAs

Bad: Submit, Click here, Learn more

Good: "Start my free trial", "Get the template now", "Book my strategy call"

Formula: [Action Verb] + [What They Get] + [Urgency/Ease]

Place: above fold, after value, multiple on long pages.

4.5 Emotional Triggers

TriggerExample
FOMO"Only 3 spots left"
Fear of loss"Every day without this, you're losing $X"
Status"Join 10,000+ top agencies"
Ease"Set it up once. Forget forever."
Frustration"Tired of tools that deliver nothing?"
Hope"Yes, you CAN hit $10K MRR"

4.6 Objection Handling

ObjectionResponse
Too expensiveShow ROI: "Pays for itself in 2 weeks"
Won't work for meSocial proof from similar customer
No time"Setup takes 10 minutes"
What if it fails"30-day money-back guarantee"
Need to thinkUrgency/scarcity

Place in FAQ, testimonials, near CTA.

4.7 Proof Types

Testimonials (with name/title), Case studies, Data/metrics, Social proof, Certifications

---

5. Visual Art

Philosophy-first workflow. Two output modes.

5.1 Output Modes

ModeOutputWhen
StaticPDF/PNGPosters, print, design assets
InteractiveHTML (p5.js)Generative art, explorable variations

5.2 Workflow

Step 1: Philosophy Creation

Name the movement (1-2 words). Articulate philosophy (4-6 paragraphs) covering:

  • Static: space, form, color, scale, rhythm, hierarchy
  • Interactive: computation, emergence, noise, parametric variation

Step 2: Conceptual Seed

Identify subtle, niche reference — sophisticated, not literal. Jazz musician quoting another song.

Step 3: Creation

Static Mode:

  • Single page, highly visual, design-forward
  • Repeating patterns, perfect shapes
  • Sparse typography from canvas-fonts/
  • Nothing overlaps, proper margins
  • Output: .pdf or .png + philosophy .md

Interactive Mode: 1. Read templates/viewer.html first 2. Keep FIXED sections (header, sidebar, seed controls) 3. Replace VARIABLE sections (algorithm, parameters) 4. Seeded randomness: randomSeed(seed); noiseSeed(seed); 5. Output: single self-contained HTML

Step 4: Refinement

Refine, don't add. Make it crisp. Polish into masterpiece.

---

Quality Gates

Design:

  • [ ] Mobile layout collapse (w-full, px-4) for high-variance designs
  • [ ] min-h-[100dvh] not h-screen
  • [ ] Empty, loading, error states provided
  • [ ] Cards omitted where spacing suffices

Motion:

  • [ ] Correct tool per selection matrix
  • [ ] No GSAP + Framer mixed in same component
  • [ ] All useEffect have cleanup returns
  • [ ] prefers-reduced-motion respected
  • [ ] Perpetual animations in React.memo leaf components
  • [ ] Only GPU properties animated
  • [ ] Heavy libraries lazy-loaded

General:

  • [ ] Dependencies verified in package.json
  • [ ] No placeholder URLs — grep the output for unsplash, picsum, placeholder, placehold, via.placeholder, lorem.space, dummyimage. If ANY found, STOP and replace with generated assets before delivering.
  • [ ] All media assets exist as local files in the project's assets directory
  • [ ] Asset prompts confirmed with user before generation

---

React and Next.js are trademarks of Meta Platforms, Inc. and Vercel, Inc., respectively. Vue.js is a trademark of Evan You. Tailwind CSS is a trademark of Tailwind Labs Inc. Svelte and SvelteKit are trademarks of their respective owners. GSAP/GreenSock is a trademark of GreenSock Inc. Three.js, Framer Motion, Lottie, Astro, and all other product names are trademarks of their respective owners.

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

Does frontend-dev use stock placeholder images?

No; it generates real image, video, and audio assets via scripts and forbids placeholder URLs like unsplash, picsum, or placehold.co.

Which frameworks does it support?

Pure HTML, React/Next.js, Vue/Nuxt, Svelte/SvelteKit, and Astro, each with a defined asset and component layout.

Frontend Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.