skills.rest
desarrolloainia
desarrolloainiaCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

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

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

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 strict set of design engineering directives so generated React and Next.js interfaces follow consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY parameters drive layout asymmetry, animation depth, and spacing density across all generated UI. - Anti-Slop Rules: Bans common AI design tells such as neon glows, pure black, generic placeholder names, Unsplash links, and default shadcn/ui styling. - Bento Grid Motion Specs: Provides five card archetypes with Framer Motion spring physics, layoutId transitions, and perpetual micro-interactions for SaaS dashboards. - Use Case: Ask for a pricing page or analytics dashboard and receive Tailwind-styled React components with asymmetric layouts, staggered reveals, loading and empty states, and mobile-safe viewport handling. ## Quick Start Generate a modern SaaS dashboard with a bento grid layout, animated metric cards, and a left-aligned hero section using this design skill.

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 non-generic AI frontend designs in React?▼

Apply explicit design constraints: ban Inter font and purple gradients, force asymmetric layouts instead of centered heroes, and limit output to one desaturated accent color. This Skill encodes those rules as mandatory directives the AI follows during code generation.

How to add Framer Motion animations without hurting performance?▼

Use useMotionValue and useTransform outside the React render cycle for continuous animations like magnetic hover, never useState. Animate only transform and opacity, and isolate perpetual loops in memoized Client Components.

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

Yes, but the Skill enforces a version lock by checking package.json first. For v4 projects it requires @tailwindcss/postcss or the Vite plugin instead of the legacy tailwindcss PostCSS plugin, and avoids v4-only syntax in v3 codebases.

Why use min-h-[100dvh] instead of h-screen for hero sections?▼

h-screen causes layout jumping on mobile browsers like iOS Safari because it ignores the dynamic viewport. min-h-[100dvh] tracks the actual visible viewport height, keeping full-height sections stable during scroll.

When should I use GSAP or ThreeJS instead of Framer Motion?▼

Use Framer Motion for UI and bento interactions by default. Reserve GSAP ScrollTrigger or ThreeJS for isolated full-page scrolltelling or canvas backgrounds, wrapped in useEffect cleanup, and never mix them with Framer Motion in the same component tree.

Related Skills

Explore More Design & Creative Skills→
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
LambdaTestLambdaTest
350

playwright-skill

Generate Playwright E2E tests in TypeScript, JavaScript, Python, Java, or C#.

Official
Advanced
ojallingtonojallington

accessibility-auditor

Run Playwright-based accessibility, visual regression, and performance audits on a dashboard.

Community
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate