skills.rest
dylinmat
dylinmatCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generates React and Next.js frontend interfaces with enforced design-taste rules and motion patterns.

Updated Jun 11, 2026
Search Tags:#react#design system#next.js#tailwind css#frontend design#framer motion#ui generation
One-click install
npx skills add https://github.com/dylinmat/design-skills-plugin --skill design-taste-frontend-v1-dylinmat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/dylinmat/design-skills-plugin/tree/main/plugins/design/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/dylinmat/design-skills-plugin --skill design-taste-frontend-v1-dylinmat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often falls into generic visual clichés such as centered hero sections, purple gradients, Inter font, and three-column card rows. This Skill encodes a strict set of design-engineering rules so generated React and Next.js interfaces avoid those patterns and follow consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines drive layout asymmetry, animation depth, and information density per generation. - Bias-correction rules: Bans Inter font, neon glows, pure black, generic names, fake data, and 3-column card layouts while enforcing Tailwind version checks and dependency verification against package.json. - Motion and Bento patterns: Specifies Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a five-card Bento dashboard archetype with performance guardrails. - Use Case: Ask for a SaaS dashboard landing page and receive a Next.js component using Geist typography, a single desaturated accent color, an asymmetric hero, skeleton loading states, and spring-animated Bento cards. ## Quick Start Ask the AI to build a landing page or dashboard component and let the design-taste-frontend-v1 rules shape the typography, layout, color, and motion of the generated code.

Frequently Asked Questions about design-taste-frontend-v1

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

FAQPage Schema
How do I generate a non-generic landing page with React and Tailwind?▼

Apply enforced design rules that ban centered heroes, Inter font, and purple gradients while requiring asymmetric layouts, fonts like Geist or Satoshi, and a single desaturated accent color. The Skill outputs React or Next.js components styled primarily with Tailwind CSS.

What animation library should I use for React UI micro-interactions?▼

Use Framer Motion with spring physics (stiffness 100, damping 20) and layoutId for shared element transitions. Magnetic hover effects must use useMotionValue and useTransform rather than useState to avoid re-render performance problems.

Can I mix GSAP and Framer Motion in the same component?▼

No. The rules prohibit mixing GSAP or Three.js with Framer Motion in the same component tree. Use Framer Motion for UI and Bento interactions, and reserve GSAP or Three.js for isolated full-page scrolltelling wrapped in useEffect cleanup blocks.

Why does my full-height hero section jump on mobile Safari?▼

The h-screen utility causes layout jumps on iOS Safari because of dynamic viewport height changes. Use min-h-[100dvh] instead so the section adapts to the actual visible viewport without shifting.

What is the difference between design-taste-frontend-v1 and design-taste-frontend?▼

design-taste-frontend-v1 is the original version preserved for exact backward compatibility with projects depending on its behavior. The current default, design-taste-frontend (v2), is a substantial rewrite and should be used for new work.

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

Yes, but the Skill requires checking package.json first and never using v4 syntax in v3 projects. For Tailwind v4, it mandates @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin.

Related Skills

Explore More Design & Creative Skills→
robertbstillwellrobertbstillwell
26

senior-frontend

Scaffold, generate, and analyze React and Next.js frontend projects with TypeScript and Tailwind CSS.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

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

Official
Advanced
curiositechcuriositech
181

web-design-expert

Generate web designs with brand identity, color palettes, typography, and UI/UX patterns.

Official
Intermediate
jeannotlemaire-uxjeannotlemaire-ux

design-taste-frontend-v1

Preserve v1 taste-skill behavior with design and engineering directives.

Community
Advanced