What does the taste-skill actually do?

It acts as a senior UI/UX guardrail that overrides Claude's default tendency to produce generic designs, instead enforcing high-end typography, unique layouts, and better technical performance.

How does it handle mobile performance?

The skill enforces 'Hardware Acceleration' for animations (transform/opacity only), uses dynamic viewport units (dvh) to prevent layout jumps, and mandates strict mobile fallbacks for asymmetric layouts.

Can I customize the design 'vibe'?

Yes, you can adjust the ACTIVE BASELINE CONFIGURATION for Design Variance (1-10), Motion Intensity (1-10), and Visual Density (1-10) to move from minimalist layouts to data-packed dashboards.

Which tech stack is required for this skill?

It is optimized for React or Next.js using Tailwind CSS (v3/v4), Framer Motion for animations, and Phosphor or Radix icons for iconography.

Premium Frontend Architect

Name: Premium Frontend Architect
Author: CoralShades

byCoralShades

0•

Design Tools

Architects high-end, production-ready frontend interfaces by overriding standard AI design biases with strict metric-based engineering rules.

The taste-skill (design-taste-frontend) is a sophisticated UI/UX layer for Claude Code that forces the AI to move beyond generic, 'AI-flavored' web designs. It implements a deterministic design system based on configurable metrics for variance, motion, and density, while enforcing rigorous technical standards like hardware-accelerated CSS, React Server Component safety, and mandatory dependency verification. By banning common LLM clichés—such as the 'AI Purple' aesthetic and the Inter font—it ensures that every generated component feels like the work of a senior design engineer rather than a statistical average.

Key Features

01Strict architectural constraints for React, Next.js, and Tailwind CSS

02Comprehensive interaction cycles including skeletal loaders and tactile feedback

03Metric-driven design control (Variance, Motion, Visual Density)

04Advanced CSS techniques (Liquid Glass refraction and hardware acceleration)

050 GitHub stars

06Anti-bias enforcement (Bans 'AI Purple', Inter font, and generic emojis)

Use Cases

01Developing high-density professional dashboards with strict performance requirements

02Building unique SaaS landing pages that avoid the generic 'startup look'

03Implementing complex Framer Motion physics and staggered layout transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add coralshades/acm-ai taste-skill

For use in Claude.ai and ChatGPT