skills.rest
Debindenny
DebindennyCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

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

Updated Aug 11, 2026
Search Tags:#frontend#react#next.js#animation#ui design#tailwind#framer-motion
One-click install
npx skills add https://github.com/Debindenny/travelplanner-community- --skill design-taste-frontend-v1-debindenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/Debindenny/travelplanner-community-/tree/main/travel-planner/agent/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/Debindenny/travelplanner-community- --skill design-taste-frontend-v1-debindenny

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to look generic: centered heroes, Inter font, purple gradients, three-column card rows, and static UI with no loading or error states. This Skill enforces a strict set of design engineering directives so generated React/Next.js interfaces look deliberately designed rather than AI-default. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation richness, and spacing density, overridable per user request. - Anti-Slop Rulebook: Bans Inter font, neon glows, pure black, emoji, generic names, fake metrics, Unsplash links, and 3-column card layouts; mandates skeleton loaders, empty/error states, and tactile feedback. - Motion & Bento Specs: Prescribes Framer Motion spring physics, layoutId transitions, staggered reveals, perpetual micro-interactions, and a 5-card Bento dashboard architecture with strict client-component isolation and performance guardrails. - Use Case: Ask for a SaaS dashboard landing page and receive Next.js code with asymmetric bento grids, Geist typography, liquid-glass cards, and infinite micro-animations instead of a generic centered hero. ## Quick Start Generate a modern SaaS dashboard landing page in Next.js with Tailwind and Framer Motion following the design taste rules.

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

How to add Framer Motion animations without hurting performance?▼

Animate only transform and opacity, never top/left/width/height. Use useMotionValue and useTransform instead of useState for hover physics, memoize perpetual animations in isolated client components, and keep grain overlays on fixed pointer-events-none layers.

Can I use this with Tailwind CSS v4 and Next.js Server Components?▼

Yes, but the rules require checking package.json first: v4 projects must use @tailwindcss/postcss instead of the v3 plugin. Interactive or animated components must be extracted as leaf client components with 'use client', while Server Components render only static layouts.

When should I use GSAP 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.

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

Mobile browsers like iOS Safari resize the viewport when toolbars show or hide, so h-screen sections jump. The rules mandate min-h-[100dvh] for full-height hero sections, which tracks the dynamic viewport height and prevents the layout shift.

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
iblaiiblai
15

iblai-ops-deploy

Automate ibl.ai frontend deployments to Vercel and other hosting platforms.

Official
Advanced
VKirillVKirill
15

ui-craft

Verify frontend UI changes against usability, accessibility, and WCAG 2.2 criteria.

Community
Intermediate
reason-machinesreason-machines
4

better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

Official
Intermediate