skills.rest
XCmiaow
XCmiaowCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generate React/Next.js UI designs with enforced typography, layout, and interaction guardrails.

Updated May 5, 2026
Search Tags:#react#ui design#tailwind#micro-interactions#bento grid#ux architecture#nextjs rsc
One-click install
npx skills add https://github.com/XCmiaow/cc-deploy --skill design-taste-frontend-xcmiaow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/XCmiaow/cc-deploy/tree/main/skills/design-taste-frontend
Command: npx skills add https://github.com/XCmiaow/cc-deploy --skill design-taste-frontend-xcmiaow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you build high-end frontend UI that avoids generic LLM design clichés by enforcing consistent typography, layout structure, and interaction behavior.

Core Features & Use Cases

  • Design engineering guardrails: Applies deterministic baseline variables for variance, motion intensity, and visual density to produce consistent, non-random results.
  • Component architecture enforcement: Prevents incorrect server/client mixing in React/Next.js and isolates interactive motion into leaf client components.
  • Interaction completeness: Requires loading, empty, and error states plus tactile feedback so the UI feels production-ready rather than “happy-path only”.
  • Anti-generic visual policy: Bans common aesthetic pitfalls (e.g., neon glows, unsafe centering patterns, serif dashboard misuse, Inter font usage) and promotes metric-based layouts.

Quick Start

Ask your AI to generate a Next.js (RSC) dashboard page with interactive client components, Tailwind styling, loading/empty/error states, and premium bento-style layout that follows the design-taste-frontend rules.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I generate a React dashboard that avoids generic LLM UI design clichés?▼

To generate a React dashboard avoiding generic LLM UI design clichés, apply deterministic baseline variables for typography, layout density, and motion. This enforces an anti-generic visual policy that bans neon glows and unsafe centering, ensuring a premium aesthetic.

How do I isolate client-side motion in Next.js RSC components without breaking server rendering?▼

To isolate client-side motion in Next.js RSC components without breaking server rendering, encapsulate interactive animations within leaf client components. This enforces strict server/client boundaries, preventing incorrect mixing while maintaining RSC performance benefits.

What is the best way to structure complete UI states for SaaS product interfaces using Tailwind?▼

The best way to structure complete UI states for SaaS product interfaces using Tailwind is to enforce interaction completeness by explicitly defining loading, empty, and error states. This ensures the UI feels production-ready rather than limited to happy-path scenarios.

Does this approach work with bento grid layouts for premium frontend designs?▼

Yes, this approach works with bento grid layouts for premium frontend designs by applying metric-based layout rules. It enforces consistent typography and responsive structures, ensuring the bento grid avoids aesthetic pitfalls like serif dashboard misuse.

Why does my AI-generated frontend UI look generic and lack tactile feedback?▼

AI-generated frontend UI looks generic and lacks tactile feedback when it misses interaction completeness and motion guardrails. Applying deterministic design rules enforces required tactile feedback and bans common aesthetic pitfalls, yielding a non-random premium result.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
MoxyWolfLLCMoxyWolfLLC

frontend-design

Generate Next.js and React UI code with TypeScript, Tailwind, and shadcn/ui.

Official
Intermediate
djkloopdjkloop

design-taste-frontend

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

Community
Advanced
PolliticalSolutionsPolliticalSolutions

design-taste-frontend

Generate React/Next.js interfaces with Tailwind styling and interaction states.

Community
Advanced