skills.rest
quanthubbr
quanthubbrOFFICIAL
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generates opinionated React and Next.js frontend code following strict design and motion rules.

Updated Jul 14, 2026
Search Tags:#React#frontend#Next.js#Framer Motion#tailwind css#animation#ui design
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill design-taste-frontend-v1-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/leonxlnx/design-taste-frontend-v1
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill design-taste-frontend-v1-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often falls into generic visual clichés like centered heroes, purple gradients, Inter font, and three-column card rows. This Skill enforces a detailed set of design engineering directives so generated React/Next.js interfaces follow consistent typography, color, layout, motion, and performance rules. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation depth, and spacing density, overridable per user request. - Anti-Slop Rules: Bans Inter font, neon glows, pure black, generic names, fake data, Unsplash links, and default shadcn/ui styling in favor of curated alternatives. - Motion & Bento Specs: Defines Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a five-card Bento dashboard paradigm with strict Client Component isolation. - Use Case: Ask for a SaaS dashboard or landing page and receive code with asymmetric layouts, skeletal loading states, liquid glass panels, and 60fps-safe animations that respect your Tailwind version and package.json dependencies. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply these design taste rules automatically.

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 make AI-generated React UI look less generic?▼

Apply explicit design directives that ban common AI tells like Inter font, purple gradients, centered heroes, and three-column card rows. This Skill enforces asymmetric layouts, curated font stacks like Geist or Satoshi, and a single desaturated accent color.

How to add Framer Motion animations without hurting performance?▼

Animate only transform and opacity, never top, left, width, or height. Use useMotionValue and useTransform outside the React render cycle for hover effects, and isolate perpetual animations in memoized Client Components.

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

Yes, but the Skill requires checking package.json first to lock the Tailwind version. For v4 projects it forbids the tailwindcss PostCSS plugin and requires @tailwindcss/postcss or the Vite plugin instead.

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

Never mix them in the same component tree. Framer Motion is the default for UI and Bento interactions, while GSAP or Three.js are reserved for isolated full-page scrolltelling or canvas backgrounds wrapped in useEffect cleanup blocks.

Why should hero sections avoid h-screen in CSS?▼

h-screen causes layout jumping on mobile browsers like iOS Safari because the viewport height changes as toolbars hide. The Skill mandates min-h-[100dvh] for full-height sections to keep layouts stable.

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

v1 is the original preserved version kept for exact backward compatibility with projects depending on its behavior. The current default, design-taste-frontend v2, is a substantial experimental rewrite.

Related Skills

Explore More Design & Creative Skills→
simoabidsimoabid
1

frontend-ui-animator

Implement purposeful UI animations for Next.js, React, and Tailwind CSS projects.

Community
Intermediate
kernex-devkernex-dev
1

accessibility-auditor

Audit web interfaces for WCAG 2.2 compliance using axe-core and Lighthouse.

Official
Intermediate
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
ChristineThamChristineTham

shadcn

Set up and theme shadcn/ui components with CLI and Tailwind.

Community
Advanced