skills.rest
Aeonxuu
AeonxuuCOMMUNITY
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 9, 2026
Search Tags:#React#frontend#Next.js#Framer Motion#tailwind css#animation#ui design
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill design-taste-frontend-v1-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill design-taste-frontend-v1-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to produce generic, clichéd interfaces with centered heroes, purple gradients, Inter font, and static states. This Skill enforces a strict set of design engineering directives so generated React/Next.js UI code avoids common AI design tells and follows consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable Design Dials: Three global variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) drive layout asymmetry, animation intensity, and information density across all generated components. - Anti-Slop Rule Set: Bans generic patterns such as neon glows, pure black, 3-column card rows, Inter font, fake placeholder data, and Unsplash links, replacing them with concrete alternatives. - Motion & Bento Specs: Provides Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a five-card Bento grid architecture for SaaS dashboards. - Use Case: Ask the AI to build a SaaS dashboard landing page, and it will produce a left-aligned asymmetric hero, a Bento grid with infinitely looping micro-animations, skeleton loading states, and Tailwind styling verified against your package.json. ## Quick Start Use the design-taste-frontend-v1 skill to build a pricing page for my Next.js app with Tailwind and Framer Motion.

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 heroes and 3-column card rows, and require loading, empty, and error states. 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 like magnetic hover. Animate only transform and opacity, memoize perpetual loops in isolated client components, and never animate top, left, width, or height.

Does this work with both 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 tailwindcss PostCSS plugin.

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

Not in the same component tree. The Skill defaults to Framer Motion for UI and Bento interactions, and reserves GSAP or Three.js exclusively for isolated full-page scrolltelling or canvas backgrounds wrapped in strict useEffect cleanup blocks.

Why should hero sections avoid h-screen in mobile layouts?▼

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 the layout stable across viewport changes.

Related Skills

Explore More Design & Creative Skills→
aashahinaashahin

aceternity-ui

Install and configure animated React components for Next.js via the shadcn CLI.

Community
Intermediate
iblaiiblai
15

iblai-ops-deploy

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

Official
Advanced
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate