skills.rest
filippolmt
filippolmtCOMMUNITY
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.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to fall into generic visual clichés such as centered hero sections, purple gradients, Inter font, and three-column card rows. 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: Three global parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) control layout asymmetry, animation richness, and information density across all generated UI. - Anti-Slop Rulebook: Bans common AI design tells including emojis, pure black, neon glows, generic names, fake data, Unsplash links, and default shadcn/ui styling. - Motion & Bento Specs: Provides Framer Motion spring physics, perpetual micro-interactions, and a five-card Bento grid architecture for SaaS dashboards, with strict performance guardrails. - Use Case: Ask for a SaaS landing page or analytics dashboard and receive Tailwind-styled Next.js code with asymmetric layouts, skeleton loading states, magnetic buttons, and staggered reveal animations instead of a generic template. ## Quick Start Ask the AI to build a Next.js dashboard page with Tailwind CSS and Framer Motion using the design-taste-frontend-v1 guidelines.

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 such as banning default fonts like Inter, limiting accent colors, forbidding centered hero layouts, and requiring asymmetric grids. This Skill encodes those rules as mandatory directives the AI must follow when generating React and Tailwind code.

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 never animate layout properties like width or top.

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

Yes, but the Skill requires checking package.json first to lock the correct syntax version. For Tailwind v4 it mandates @tailwindcss/postcss or the Vite plugin instead of the legacy tailwindcss PostCSS plugin.

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

Yes, shadcn/ui is allowed but never in its default state. You must customize border radii, colors, and shadows so components match the project's high-end aesthetic rather than the stock theme.

Why should I avoid h-screen for hero sections on mobile?▼

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

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
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
netprtonynetprtony

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS or React/Vue using defined aesthetic guidelines.

Community
Intermediate