skills.rest
DawnMoon1542
DawnMoon1542COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generates React and Next.js frontend interfaces with enforced design rules, motion physics, and anti-generic styling constraints.

7|Updated May 13, 2026
Search Tags:#frontend#react#next.js#tailwind css#animation#ui design#framer motion
One-click install
npx skills add https://github.com/DawnMoon1542/agents-skills --skill design-taste-frontend-dawnmoon1542
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/DawnMoon1542/agents-skills/tree/main/design-taste-frontend
Command: npx skills add https://github.com/DawnMoon1542/agents-skills --skill design-taste-frontend-dawnmoon1542

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs produce generic, clichéd frontend code with predictable layouts, default fonts, and static states. This Skill overrides those biases by enforcing metric-based design rules, strict component architecture, and performance guardrails for React and Next.js interfaces. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans generic patterns like centered heroes, Inter font, purple gradients, and 3-column card rows, enforcing asymmetric layouts and curated typography. - Motion & Interaction Specs: Implements Framer Motion spring physics, perpetual micro-interactions, staggered reveals, and Bento grid archetypes with strict performance isolation. - Architecture Guardrails: Enforces RSC safety, Tailwind version checks, dependency verification, and full loading/empty/error state coverage. - Use Case: Ask for a SaaS dashboard and receive a Bento-grid layout with animated status indicators, infinite data carousels, and Geist typography instead of a generic card layout. ## Quick Start Build a modern SaaS dashboard landing page with React, Tailwind, and Framer Motion using asymmetric layouts and animated bento cards.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I generate non-generic React UI designs with AI?▼

Apply enforced design constraints that ban common AI patterns like centered heroes, Inter font, and 3-column card rows. Use asymmetric layouts, curated fonts like Geist or Satoshi, and single desaturated accent colors for distinctive output.

How to add Framer Motion animations without hurting performance?▼

Animate only transform and opacity properties, never top, left, width, or height. Use useMotionValue and useTransform outside the React render cycle for continuous animations, and isolate perpetual loops in memoized client components.

Does this work with both Tailwind CSS v3 and v4?▼

Yes, but you must check package.json first to detect the installed version. For v4, use @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin, and avoid mixing v4 syntax into v3 projects.

Can I use GSAP or Three.js together with Framer Motion?▼

Never mix them in the same component tree. Use Framer Motion for UI and bento interactions, and reserve GSAP or Three.js exclusively for isolated full-page scrolltelling or canvas backgrounds wrapped in useEffect cleanup blocks.

Why should I avoid h-screen for hero sections on mobile?▼

The h-screen utility causes layout jumping on mobile browsers like iOS Safari due to dynamic viewport heights. Use min-h-[100dvh] instead to keep full-height sections stable across devices.

Related Skills

Explore More Design & Creative Skills→
aashahinaashahin

aceternity-ui

Install and configure animated React components for Next.js via the shadcn CLI.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate