skills.rest
gmolike
gmolikeCOMMUNITY
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 UI constraints.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to produce generic, clichéd interfaces with default fonts, purple gradients, centered heroes, and static states. This Skill enforces a senior-level design engineering rulebook so generated UI code follows metric-based design decisions, strict component architecture, and performance-safe animation patterns. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans common AI tells such as Inter font, neon glows, pure black, 3-column card rows, generic placeholder names, and Unsplash links. - Configurable Design Dials: Drives output through DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels that control layout asymmetry, animation complexity, and spacing density. - Architecture & Performance Guardrails: Enforces RSC/client component isolation, Tailwind version checks, dependency verification, transform-only animations, and memoized perpetual micro-interactions. - Use Case: Ask for a SaaS dashboard bento grid and receive Framer Motion components with spring physics, infinite micro-animations, skeleton loading states, and mobile-safe responsive fallbacks. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply the design variance, motion, and density rules automatically.

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 AI frontend designs?▼

Apply explicit design constraints that ban common AI patterns like Inter font, purple gradients, centered heroes, and 3-column card rows. This Skill enforces asymmetric layouts, curated font stacks like Geist or Satoshi, and single desaturated accent colors.

How to animate React components without performance issues?▼

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

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 requires @tailwindcss/postcss or the Vite plugin instead of the legacy tailwindcss PostCSS plugin, and never mixes v4 syntax into v3 projects.

Can I use Framer Motion with Next.js Server Components?▼

Yes, but interactive animated components must be extracted as leaf client components with 'use client' at the top. Server Components render only static layouts, and staggerChildren parents and children must share the same client component tree.

Why does h-screen cause layout jumps on mobile?▼

Mobile browsers like iOS Safari resize the viewport when toolbars show or hide, making 100vh unstable. The Skill mandates min-h-[100dvh] for full-height sections, which tracks the dynamic viewport and prevents layout jumping.

When should I use GSAP instead of Framer Motion?▼

Use GSAP or ThreeJS only for isolated full-page scrolltelling or canvas backgrounds wrapped in useEffect cleanup blocks. Default to Framer Motion for UI and bento interactions, and never mix both libraries in the same component tree.

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
LambdaTestLambdaTest
350

playwright-skill

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

Official
Advanced
NweremizuNweremizu

adapt

Adapt component-based web app interfaces for mobile, tablet, and desktop breakpoints.

Community
Intermediate
nthplusionthplusio

shadcn-data-tables

Build TanStack Table data tables with shadcn/ui components.

Official
Intermediate