skills.rest
lagarcess
lagarcessCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Enforce React and Next.js design conventions with Tailwind and motion isolation.

1|Updated Apr 4, 2026
Search Tags:#frontend#nextjs#tailwind#ui-ux#framer-motion#design-systems
One-click install
npx skills add https://github.com/lagarcess/argus --skill design-taste-frontend-lagarcess
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/lagarcess/argus/tree/main/.agent/skills/design-taste-frontend
Command: npx skills add https://github.com/lagarcess/argus --skill design-taste-frontend-lagarcess

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill addresses generic, low-fidelity AI frontend outputs by providing a high-agency, opinionated engineering framework that corrects LLM design biases and enforces production-grade UI/UX patterns, performance guardrails, and component architecture.

Core Features & Use Cases

  • Active Baseline Configuration: Preset design variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) to steer aesthetic and motion behavior while allowing explicit user overrides.
  • Architecture & Conventions: Enforces React/Next.js best-practices, Server/Client component boundaries, Tailwind version checks, dependency verification, and anti-emoji policy.
  • Design Engineering Directives: Deterministic typography, constrained color systems, layout diversification, and mandatory interaction states (loading, empty, error, tactile feedback).
  • Creative Proactivity & Motion: Advanced micro-interactions, Framer Motion isolation, liquid-glass styling, and staggered orchestration for premium UI feel.
  • Performance & Safety Guardrails: Hardware-accelerated animations, DOM-cost minimization, z-index discipline, and strict cleanup for useEffect-driven effects.
  • Bento Motion Paradigm: Bento grid archetypes, perpetual micro-interactions isolated in client components, and five archetypal micro-animated card patterns for dashboards.

Quick Start

Ask for a responsive Next.js (RSC-safe) landing page with an asymmetric hero, Tailwind v3-safe styling, MOTION_INTENSITY 6, VISUAL_DENSITY 4, and isolated Framer Motion client components.

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 production-grade React component architecture in a Next.js project?▼

To enforce production-grade React component architecture in a Next.js project, establish strict Server and Client component isolation for interactivity, verify Tailwind dependencies, and apply deterministic styling rules to ensure scalable UI/UX patterns.

What's the best way to isolate Framer Motion animations in Next.js Server Components?▼

Isolating Framer Motion animations in Next.js requires wrapping interactive elements in dedicated Client components, ensuring hardware-accelerated animations and strict useEffect cleanup to maintain performance and prevent server-side execution errors.

Why does my AI-generated frontend UI lack visual polish and consistent design patterns?▼

AI-generated frontend UI often lacks polish due to low-fidelity outputs and LLM design biases, which can be corrected by applying deterministic typography, constrained color systems, and staggered motion orchestration.

Can I use Tailwind v3 conventions for building responsive asymmetric dashboard layouts?▼

Yes, you can use Tailwind v3 conventions for responsive asymmetric layouts by enforcing version checks, applying layout diversification, and utilizing Bento grid archetypes to create distinct, high-density dashboard interfaces.

Do I need to implement loading and error states for interactive dashboard components?▼

Yes, interactive dashboard components require mandatory interaction states including loading skeletons, empty placeholders, and error boundaries, satisfying accessibility guardrails and ensuring complete UI resilience during data fetching.

How do I configure visual density and motion intensity for premium frontend interfaces?▼

You can configure visual density and motion intensity by adjusting preset design variables like MOTION_INTENSITY and VISUAL_DENSITY, allowing explicit user overrides to steer aesthetic behavior and micro-interactions for premium UI feel.

Related Skills

Explore More Design & Creative Skills→
PP-NamiasPP-Namias
2

frontend-design

Build React UI components with Tailwind CSS and Framer Motion.

Community
Intermediate
Bamboo-ReportsBamboo-Reports
1

High-Agency Frontend Skill

Generate React and Tailwind CSS interfaces with Framer Motion animations.

Official
Advanced
manuelbrandner85manuelbrandner85

design-taste-frontend-v1

Enforces high-end design and CotN; please regenerate.

Community
Advanced
aberrantCodeaberrantCode
1

design-taste-frontend

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

Community
Advanced