design-taste-frontend

Enforces metric-based rules and component architecture for React/Next.js frontend code with Tailwind styling.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/Clinscott/CStar --skill design-taste-frontend-clinscott
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Clinscott/CStar/tree/main/skills_db/taste-skill
Command: npx skills add https://github.com/Clinscott/CStar --skill design-taste-frontend-clinscott

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a governance framework for frontend design that enforces metric-based rules, strict component architecture, and performance-conscious CSS practices, preventing drift toward generic, slop UI.

Core Features & Use Cases

  • Policy-Driven UI Governance: Applies the design rules to ensure premium aesthetics and consistent architecture across projects.
  • Baseline Dial Enforcement: Maintains the 3 control dials (Design_Variance, Motion_Intensity, Visual_Density) and adapts dynamically to prompts.
  • Performance-first Styling: Enforces Tailwind-based styling with hardware acceleration, minimal reflows, and accessible color contrast.
  • Use Case: A design team wants to ship a React dashboard with asymmetric layouts and glassmorphism while maintaining performance.

Quick Start

Ask the AI to load this skill's rules and apply them to all frontend outputs for a premium design.

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 consistent UI design rules across a React and Tailwind project?

To enforce consistent UI design rules across a React and Tailwind project, apply a policy-driven governance framework that validates component architecture, restricts styling to performance-conscious CSS practices, and sets metric-based guardrails to prevent generic interfaces.

What is the best way to prevent UI drift in a Next.js dashboard?

Preventing UI drift in a Next.js dashboard requires applying strict component architecture and baseline dials for design variance, motion intensity, and visual density, ensuring premium aesthetics without sacrificing performance or accessibility.

Can I use glassmorphism with Server Components in Next.js without hurting performance?

Yes, you can implement glassmorphism with Server Components in Next.js by enforcing hardware acceleration, minimal reflows, and strict performance guardrails within your styling approach to maintain premium visuals without degrading speed.

How do I set up baseline dials for visual density and motion intensity in a design system?

Setting up baseline dials for visual density and motion intensity involves configuring three control variables that dynamically adapt to prompts, enforcing motion rules and accessibility standards across all frontend components for consistent results.

Why does my frontend code fail accessibility and error handling checks during code reviews?

Frontend code fails accessibility and error handling checks when it lacks a strict governance framework validating color contrast, robust state management, and error boundaries, leading to inconsistent and non-compliant user experiences.