skills.rest
singhaganesh
singhaganeshCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend-v1

Generates opinionated React and Next.js frontend code following anti-generic design and motion rules.

Updated Jul 7, 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/singhaganesh/Urban-assist --skill design-taste-frontend-v1-singhaganesh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill design-taste-frontend-v1-singhaganesh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to look generic: centered heroes, Inter font, purple gradients, three-card feature rows, and missing loading or error states. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces look distinctive, polished, and production-considerate. ## Core Features & Use Cases - Tunable Design Dials: Baseline parameters (DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4) drive layout asymmetry, animation intensity, and information density, overridable per user request. - Anti-Slop Rulebook: Bans clichés like Inter font, neon glows, pure black, 3-column card rows, generic names, and Unsplash links, while mandating premium fonts (Geist, Satoshi), single accent colors, and realistic data. - Motion & Bento Specs: Prescribes Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a 5-card Bento dashboard paradigm with strict performance guardrails (transform/opacity only, isolated client components). - Use Case: Ask for a SaaS dashboard landing page and receive asymmetric layouts, liquid-glass cards, magnetic buttons, skeleton loaders, and empty/error states instead of a generic template. ## Quick Start Ask the AI to build a Next.js pricing page or dashboard and state that it should follow the design-taste-frontend-v1 rules with your preferred variance, motion, and density levels.

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 frontend code look less generic?▼

Apply explicit design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit accents to one desaturated color, forbid centered heroes and 3-column card rows, and require loading, empty, and error states. This Skill encodes those rules as mandatory generation directives.

How to add Framer Motion animations without hurting performance?▼

Animate only transform and opacity, never top, left, width, or height. Use useMotionValue and useTransform for cursor-driven effects instead of useState, and isolate perpetual animations in memoized client components so parent layouts never re-render.

Does this work with Tailwind CSS v3 and v4?▼

Yes, but the Skill enforces a version check against package.json first. For v4 projects it forbids the legacy tailwindcss PostCSS plugin and requires @tailwindcss/postcss or the Vite plugin instead.

Can I use shadcn/ui components with these design rules?▼

Yes, shadcn/ui is allowed but never in its default state. You must customize radii, colors, and shadows to match the project's aesthetic so the output does not look like a stock component library.

Why should hero sections avoid h-screen in Next.js?▼

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

When should I use GSAP or Three.js instead of Framer Motion?▼

Use Framer Motion for UI and bento interactions by default. Reserve GSAP ScrollTrigger or Three.js for isolated full-page scrolltelling or canvas backgrounds, never mixing 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
TgoldiTgoldi

web-accessibility

Implement WCAG 2.1 accessibility standards in web UI components using semantic HTML, ARIA, and keyboard navigation.

Community
Intermediate
ZoyaAfzalZoyaAfzal

shadcn

Compose accessible React UI components with Tailwind CSS and shadcn.

Community
Intermediate