skills.rest
djkloop
djkloopCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

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

Updated Apr 17, 2026
Search Tags:#performance#accessibility#frontend#next.js#tailwind#framer-motion#design-systems
One-click install
npx skills add https://github.com/djkloop/n --skill design-taste-frontend-djkloop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/djkloop/n/tree/main/.trae/skills/design-taste-frontend
Command: npx skills add https://github.com/djkloop/n --skill design-taste-frontend-djkloop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces a production-grade frontend architecture and design-engineering opinion set to correct common LLM biases and deliver consistent, performant, and premium UI implementations across React/Next.js projects.

Core Features & Use Cases

  • Baseline Configuration: Enforces global design dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) and adapts them when explicitly requested.
  • Architecture & Conventions: Mandates dependency verification via package.json, RSC-first defaults with client isolation for interactive components, Tailwind-driven styling, and strict icon/font rules.
  • Design Engineering Rules: Applies deterministic typography, a single accent color policy, layout diversification (no center-bias for high variance), materiality rules, full interaction cycles (loading/empty/error states), and form patterns with clear labels and helper text.
  • Motion & Performance: Prescribes Framer Motion usage for advanced choreography, isolates perpetual animations into client leaf components, forbids animating layout properties, and provides GPU-friendly hardware acceleration guidance.
  • Use Cases: Generating production-ready Next.js landing pages, dashboards, or component libraries with accessible responsive layouts, motion choreography tuned to defined dials, and strict performance and visual quality guardrails.

Quick Start

Create a Next.js Server Components landing page with Tailwind CSS, Satoshi font, an asymmetric split-hero, Framer Motion micro-interactions tuned to MOTION_INTENSITY 6, DESIGN_VARIANCE 8, and VISUAL_DENSITY 4.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I enforce strict React Server Components isolation for interactive Next.js UI elements?▼

To enforce React Server Components isolation, apply client component boundaries exclusively to interactive leaf nodes. This architecture uses RSC-first defaults while isolating client-side interactivity to prevent unnecessary JavaScript payload and maintain performance.

What is the best way to prevent costly layout animations when choreographing micro-interactions with Framer Motion?▼

The best way to prevent costly layout animations is to forbid animating layout properties entirely. Isolate perpetual animations into client leaf components and apply GPU-friendly hardware acceleration guidance to ensure smooth Framer Motion micro-interactions.

How do I configure Tailwind-driven styling while maintaining a single accent color policy in a design system?▼

Configure Tailwind-driven styling by enforcing deterministic typography rules and a strict single accent color policy. This approach ensures visual consistency across the design system while adhering to Tailwind v3/v4 syntax verification.

Does this frontend architecture approach handle full interaction cycles including loading, empty, and error states?▼

Yes, this frontend architecture approach explicitly mandates full interaction cycles. It enforces comprehensive loading, empty, and error states alongside clear form labels and helper text to satisfy strict accessibility and visual quality guardrails.

Can I adapt visual density and motion intensity levels dynamically for different Next.js landing pages?▼

Yes, you can adapt visual density and motion intensity dynamically. The architecture enforces global design dials for DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY, adjusting them when explicitly requested to tune Framer Motion choreography.

Why do my Tailwind CSS classes break when generating responsive UI without dependency verification?▼

Tailwind CSS classes break without dependency verification because the architecture mandates checking package.json to ensure Tailwind v3/v4 syntax adherence. Verifying dependencies prevents styling mismatches and ensures responsive UI renders correctly.

Related Skills

Explore More Design & Creative Skills→
JamesOliveira1JamesOliveira1

design-taste-frontend

Enforce typography, color, and layout rules in React/Next.js projects.

Community
Advanced
tmarsbrtmarsbr

frontend-developer

Build reusable React/Next.js UI components with accessibility and performance patterns.

Community
Advanced
gerald-icagerald-ica

design-taste-frontend

Codify bias-free design rules for React/Next.js dashboards and applications.

Community
Advanced
aberrantCodeaberrantCode
1

design-taste-frontend

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

Community
Advanced