skills.rest
optimaxin
optimaxinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend-v1

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

Updated Jul 16, 2026
Search Tags:#frontend#react#nextjs#animation#ui design#tailwind#framer-motion
One-click install
npx skills add https://github.com/optimaxin/Tredev_Gems --skill design-taste-frontend-v1-optimaxin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/optimaxin/Tredev_Gems/tree/main/agent/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/optimaxin/Tredev_Gems --skill design-taste-frontend-v1-optimaxin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card feature rows, and static UI with no loading or empty states. This Skill encodes a strict set of design engineering directives so generated React/Next.js interfaces avoid these clichés and follow consistent typography, color, layout, and motion rules. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation level, and information density, overridable per user request. - Anti-slop rulebook: Bans Inter font, purple/blue AI gradients, pure black, 3-column card rows, generic names like "John Doe", Unsplash links, and filler copy like "Seamless" or "Elevate". - Motion and Bento specs: Prescribes Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and five Bento grid card archetypes for SaaS dashboards, plus GSAP/ThreeJS isolation rules. - Use Case: Ask for a SaaS analytics dashboard and receive a Bento-grid layout with Geist typography, a single desaturated accent color, skeleton loaders, empty states, and infinitely looping micro-animations isolated in client components. ## Quick Start Build me a modern SaaS dashboard landing page in Next.js with Tailwind and Framer Motion following these design 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 frontend code look less generic?▼

Apply explicit design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit palettes to one desaturated accent on neutral bases, forbid centered heroes and 3-column card rows, and require loading, empty, and error states in every component.

How to add animations in React without hurting performance?▼

Animate only transform and opacity, never top, left, width, or height. Use Framer Motion's useMotionValue and useTransform for cursor-tracking effects instead of useState, and isolate perpetual animations in memoized client components.

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

Yes, but interactive animated components must be extracted as leaf components with 'use client' at the top. Server Components should render only static layouts, and staggered animations require parent and children in the same client component tree.

Should I use GSAP or Framer Motion for scroll animations?▼

Use Framer Motion for UI and Bento-grid interactions, and reserve GSAP ScrollTrigger or ThreeJS for isolated full-page scrolltelling or canvas backgrounds. Never mix GSAP or ThreeJS with Framer Motion in the same component tree.

Why does my mobile layout jump when using h-screen for hero sections?▼

h-screen uses viewport height that changes when mobile browser chrome collapses, causing layout jumps on iOS Safari. Use min-h-[100dvh] instead, which tracks the dynamic viewport height and keeps full-height sections stable.

What are the limitations of this v1 design skill?▼

This v1 install is preserved only for exact backward compatibility with projects depending on its behavior. The current default is the v2 rewrite (design-taste-frontend), so new projects should use v2 unless they need v1's precise output.

Related Skills

Explore More Design & Creative Skills→
tanveerriaztanveerriaz
1

design-taste-frontend-v1

Generates React and Next.js frontend interfaces following v1 design, motion, and layout rules.

Community
Advanced
BRANDNEWSHVTBRANDNEWSHVT

product-completeness-audit

Audit routes, flows, and components for real data and backend connectivity.

Official
Advanced
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
Jorge-IvanJorge-Ivan
1

generating-components

Generate and refine frontend UI components with Gemini Design MCP.

Community
Advanced