design-taste-frontend

Enforce metric-based design rules for React/Next.js dashboards with Tailwind CSS and Framer Motion.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/JuanGarciaFuture/mobile-practice --skill design-taste-frontend-juangarciafuture
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/JuanGarciaFuture/mobile-practice/tree/main/.cursor/skills/frontend-taste
Command: npx skills add https://github.com/JuanGarciaFuture/mobile-practice --skill design-taste-frontend-juangarciafuture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-taste-frontend provides a rigorous framework to design premium frontend interfaces that resist default LLM biases and enforce metric-driven rules, strict component architectures, and high-performance visuals.

Core Features & Use Cases

  • Deterministic typography and color calibration with a single accent color to ensure brand consistency across dashboards.
  • Layout strategies that prevent biased centering and enforce responsive grids, while adhering to accessibility and performance requirements.
  • Interaction guidelines including motion rules, glassmorphism hints, and data-pattern best practices for scalable frontend apps.

Quick Start

Initialize a React/Next.js project configured to the design-taste-frontend directives and build a premium UI with Tailwind CSS and Framer Motion.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I override default LLM biases in frontend UI design?

Design-taste-frontend solves frontend UI design bias by enforcing metric-based rules, deterministic typography, and strict component governance. It overrides default LLM biases by applying layout diversification, color calibration, and performance guardrails to ensure premium, consistent interfaces.

How do I enforce deterministic typography and color calibration in React dashboards?

You can enforce deterministic typography and color calibration in React dashboards by applying strict baseline values, density rules, and a single accent color. This framework ensures brand consistency across interactive UIs while overriding default LLM biases.

Does this frontend design framework work with Tailwind CSS and Framer Motion?

Yes, this framework works specifically with Tailwind CSS and Framer Motion. It requires this strict frontend stack to apply motion rules, glassmorphism hints, and interaction guidelines for building premium React and Next.js interfaces.

What is the best way to prevent biased centering in responsive frontend layouts?

The best way to prevent biased centering in responsive frontend layouts is to enforce responsive grids and layout diversification strategies. This approach ensures dashboards adhere to strict accessibility standards and performance guardrails across all devices.

Do I need a specific tech stack to apply these frontend component governance rules?

Yes, you need a strict frontend stack of React or Next.js, Tailwind CSS, and Framer Motion. Adhering to documented baseline values, density rules, accessibility standards, and the anti-emoji policy is required to apply the component governance rules effectively.

Why does my LLM-generated UI lack premium visual consistency across devices?

Your LLM-generated UI lacks premium visual consistency because default outputs ignore metric-based rules and strict CSS architecture. Enforcing deterministic typography, color calibration, layout diversification, and performance guardrails resolves this across devices.