skills.rest
aberrantCode
aberrantCodeCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generate production-ready React and Next.js component architecture with Tailwind and Framer Motion.

1|Updated Feb 26, 2026
Search Tags:#performance#frontend#react#tailwind#ux#framer-motion#design-guidelines
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill design-taste-frontend-aberrantcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/aberrantCode/llm_skills/tree/main/claude/skills/design-taste-frontend
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill design-taste-frontend-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a senior-level frontend design and engineering blueprint to correct generic LLM UI outputs, ensuring production-ready, performant, and visually distinctive interfaces while preventing common AI-generated "slop".

Core Features & Use Cases

  • Baseline Design Dials: Enforces global variables (Design Variance 8, Motion Intensity 6, Visual Density 4) to steer layout, motion, and density decisions.
  • Architecture & Conventions: Prescriptive rules for React/Next.js component isolation, RSC vs Client boundaries, state management, and Tailwind-first styling with version checks.
  • Motion & Performance Guardrails: Framer Motion best practices, animate via transform/opacity only, hardware-acceleration rules, and isolation/memoization of perpetual animations.
  • Design Engineering Rules: Typography, color constraints, layout diversification, forbidden patterns, and required interaction states (loading/empty/error).
  • Creative Arsenal & Bento Paradigm: Advanced UI patterns (liquid glass, magnetic micro-physics, bento card archetypes) and a final pre-flight checklist to validate production readiness.
  • Use Case: Turn a generic LLM UI mock prompt into a complete Next.js page plus isolated client components with accessible interactions, skeletal loaders, and performance-safe animations.

Quick Start

Create a production-ready Next.js page and component set that implements the design-taste-frontend baseline (Design Variance 8, Motion Intensity 6, Visual Density 4), use Tailwind for styling and Framer Motion for animations, and list any missing npm installs before providing the code.

Frequently Asked Questions about design-taste-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent generic AI UI output from looking like template slop in React?▼

To prevent generic AI UI slop in React, apply high-agency frontend design guidelines that enforce baseline design dials for variance, motion, and density. This overrides default LLM biases to ensure production-ready, visually distinctive component architecture.

What's the best way to structure Framer Motion animations for Next.js performance?▼

The best way to structure Framer Motion animations for Next.js performance is to animate via transform and opacity only, enforce hardware-acceleration rules, and isolate perpetual motion into memoized client components to prevent layout thrashing.

How do I separate React Server Components and client components for premium UI layouts?▼

To separate React Server Components and client components for premium UI layouts, apply prescriptive RSC vs client boundary rules that isolate interactive client logic while keeping static UI structures server-side for optimal load performance.

Can I use Tailwind CSS to enforce typography and color constraints in a Next.js design system?▼

Yes, you can use Tailwind CSS to enforce typography and color constraints in a Next.js design system. Tailwind-first styling rules verify dependencies and ensure strict design engineering constraints are applied across all components.

What design patterns help build premium frontend UIs with CSS Grid and Framer Motion?▼

To build premium frontend UIs with CSS Grid and Framer Motion, utilize advanced patterns like the bento card paradigm, liquid glass effects, and magnetic micro-physics. These ensure responsive layouts and safe, choreographed animations.

Why does my LLM-generated Next.js UI lack required interaction states like loading and error handling?▼

LLM-generated Next.js UI lacks interaction states because default outputs skip required loading, empty, and error states. Enforcing a pre-flight design checklist validates these required interaction states and confirms overall production readiness.

Related Skills

Explore More Design & Creative Skills→
hgxszhj-pixelhgxszhj-pixel
2

frontend-dev

Automate full-stack frontend page creation with AI-driven design and asset generation.

Community
Advanced
HeshamFSHeshamFS
61

simulation-validator

Validate simulation pre-flight, runtime, and post-flight checks with Python 3.8.

Community
Advanced
djkloopdjkloop

design-taste-frontend

Enforce React and Next.js frontend architecture with Tailwind and Framer Motion rules.

Community
Advanced
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate