skills.rest
nielslataire
nielslataireCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

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

Updated May 21, 2025
Search Tags:#frontend#react#nextjs#animation#ui design#tailwind#framer-motion
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill design-taste-frontend-v1-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/nielslataire/Group-LN/tree/main/.agents/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/nielslataire/Group-LN --skill design-taste-frontend-v1-nielslataire

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code tends to look generic, with clichéd layouts, default fonts, purple gradients, and missing interaction states. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces look distinctive, polished, and production-consistent. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines drive layout asymmetry, animation richness, and information density. - Anti-Slop Rules: Bans Inter font, purple/blue AI gradients, centered heroes, 3-column card rows, generic names, and Unsplash links. - Motion & Bento Specs: Prescribes Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a 5-card Bento dashboard paradigm with strict performance guardrails. - Use Case: Ask for a SaaS dashboard landing page and receive Tailwind-styled Next.js code with asymmetric layouts, skeleton loading states, magnetic buttons, and isolated client components for animations. ## Quick Start Use the design-taste-frontend-v1 skill to build a Next.js dashboard page with a Bento grid layout and animated metric cards.

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, limit accent colors to one desaturated hue, forbid centered hero layouts, and require loading, empty, and error states. This Skill encodes those rules as mandatory generation directives.

How to add animations in React without hurting performance?▼

Use Framer Motion's useMotionValue and useTransform instead of useState for continuous animations, animate only transform and opacity, and isolate perpetual loops in memoized client components. Never animate top, left, width, or height.

Does this work with Tailwind CSS v3 and v4?▼

Yes, but the Skill enforces a version lock: it checks package.json first and forbids v4 syntax in v3 projects. For v4 it requires @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 radii, colors, and shadows to match the project's aesthetic so the output does not look like a stock component library.

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 when toolbars hide. The Skill mandates min-h-[100dvh] for full-height sections to keep layouts stable.

When should I use GSAP or Three.js instead of Framer Motion?▼

Use Framer Motion for UI and Bento interactions by default. Reserve GSAP or Three.js for isolated full-page scrolltelling or canvas backgrounds, wrapped in useEffect cleanup, and never mix them with Framer Motion in the same component tree.

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
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
VKirillVKirill
15

ui-craft

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

Community
Intermediate
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced