design-taste-frontend

Enforce metric-based UI/UX rules and optimize frontend design for React or Next.js projects.

Updated May 11, 2026
One-click install
npx skills add https://github.com/Alfxjx/half_caff --skill design-taste-frontend-alfxjx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Alfxjx/half_caff/tree/main/.claude/skills/design-taste-frontend
Command: npx skills add https://github.com/Alfxjx/half_caff --skill design-taste-frontend-alfxjx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next.js, tailwindcss, phosphor-icons/react, radix-ui/react-icons, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating consistently high-quality UI/UX designs, overriding default LLM biases, and enforcing strict design rules.

Core Features & Use Cases

  • Design Variance Adjustment: Dynamically set design variance to meet user preferences.
  • Baseline Configuration: Enforce strict design conventions for consistency.
  • Creative Proactivity: Implement advanced UI concepts like liquid glass, magnetic micro-physics, and perpetual micro-interactions.
  • Performance Guardrails: Ensure optimized performance with hardware acceleration and minimal DOM cost.
  • Technical Reference: Access detailed guidelines for design variance, motion intensity, and visual density.
  • AI TELLS: Avoid common AI design mistakes with forbidden patterns and high-end inspiration.
  • Creative Arsenal: Utilize a library of advanced UI concepts for visually striking designs.
  • Motion-Engine Bento Paradigm: Leverage "Bento 2.0" architecture for modern SaaS dashboards.

Quick Start

Activate the design-taste-frontend skill to start creating high-end UI/UX designs.

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 UI/UX design rules and override default AI biases in React?

To enforce strict UI/UX design rules in React and override AI biases, use senior design automation tools that apply metric-based rules, component architecture, and bias correction for AI-generated interfaces, ensuring consistent, high-end frontend designs.

What's the best way to optimize Next.js UI components for performance and hardware acceleration?

Optimizing Next.js UI components for hardware acceleration requires performance guardrails that enforce CSS hardware acceleration and minimal DOM cost, ensuring your design engineering maintains high-end visual quality without degrading application performance.

Do I need Tailwind CSS and Phosphor Icons to implement advanced UI concepts like liquid glass?

Yes, you need Tailwind CSS and either Phosphor Icons or Radix UI icons to implement advanced UI concepts like liquid glass, magnetic micro-physics, and perpetual micro-interactions, as these dependencies provide the required styling and component architecture.

Can I use a Motion-Engine Bento Paradigm for modern SaaS dashboards with this design engineering approach?

Yes, you can leverage a Motion-Engine Bento Paradigm, referred to as Bento 2.0 architecture, to build modern SaaS dashboards. This approach utilizes a creative arsenal of advanced UI concepts for visually striking and balanced design engineering.

Why do my AI-generated interfaces lack visual consistency and how can I fix it?

AI-generated interfaces lack visual consistency due to default LLM biases. You can fix this by applying baseline configuration for strict design conventions, dynamic design variance adjustment, and avoiding common AI design mistakes using forbidden patterns.

Are there limitations when using Radix UI icons for high-end UI/UX design automation?

There are no strict limitations preventing high-end UI/UX design automation using Radix UI icons; the system supports either Radix UI or Phosphor icons interchangeably to provide the necessary styling for balanced component architecture.