skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generates React and Next.js frontend code following opinionated design, motion, and typography rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code tends to fall into generic visual clichés such as centered hero sections, purple gradients, Inter font, and three-column card layouts. This Skill enforces a strict set of design engineering directives so generated React and Next.js interfaces look distinctive, polished, and consistent. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation richness, and information density, and adapt to explicit user requests. - Bias-Correction Rules: Bans common AI tells such as neon glows, pure black, Inter font, generic names, fake metrics, and Unsplash links, while enforcing Tailwind version checks, dependency verification, and RSC-safe component isolation. - Motion & Bento Specs: Provides Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a five-card Bento dashboard paradigm with strict performance guardrails. - Use Case: Ask for a SaaS dashboard landing page and receive a left-aligned hero, a Bento grid with infinitely looping micro-animations, Geist typography, and a single desaturated accent color instead of a generic template. ## Quick Start Use the design-taste-frontend-v1 skill to build a Next.js dashboard page with a Bento grid layout and Framer Motion micro-interactions.

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 hero layouts, and replace three-column card rows with asymmetric grids. This Skill encodes those rules as mandatory generation directives.

How to add Framer Motion animations without hurting React performance?▼

Use useMotionValue and useTransform outside the React render cycle instead of useState for continuous animations. Animate only transform and opacity, isolate perpetual loops in memoized client components, and add cleanup functions in useEffect.

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

Yes, but you must check package.json first and never use v4 syntax in v3 projects. For v4, use @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin.

Can I use GSAP or Three.js together with Framer Motion?▼

Never mix them in the same component tree. Use Framer Motion for UI and Bento interactions, and reserve GSAP or Three.js for isolated full-page scrolltelling or canvas backgrounds wrapped in strict useEffect cleanup blocks.

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

h-screen causes layout jumping on mobile browsers like iOS Safari because the viewport height changes with the URL bar. Use min-h-[100dvh] instead for stable full-height sections.

What is the difference between design-taste-frontend-v1 and v2?▼

v1 is the original preserved version intended for projects needing exact backward compatibility. The current default is design-taste-frontend v2, an experimental substantial rewrite, so install v1 only when legacy behavior is required.

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
Skyvern-AISkyvern-AI
22.7k

testing

Tests Skyvern deployments by validating API, frontend rendering, browser sessions, and workflows.

Official
Intermediate
JenilRevaliyaJenilRevaliya

web-design-guidelines

Reviews UI code against accessibility, performance, and visual design guidelines.

Community
Intermediate
TechsioCZTechsioCZ
2

figma-sync-handoff

Flag Figma library or Code Connect follow-up needs after UI-kit component work.

Official
Basic