design-taste-frontend

Enforce design and architecture rules for React and Next.js frontend interfaces.

2|Updated Mar 2, 2026
One-click install
npx skills add https://github.com/tizee/skills --skill design-taste-frontend-tizee
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/tizee/skills/tree/main/skills/taste-skill
Command: npx skills add https://github.com/tizee/skills --skill design-taste-frontend-tizee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps AI-generated frontend content avoid generic, dull interfaces by enforcing premium design rules and architecture constraints during generation.

Core Features & Use Cases

  • Enforces three control dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY to shape layouts, motion, and density.
  • Specifies mandatory architecture and performance guidelines (dependency checks, RSC usage, Tailwind styling, anti-emoji policy, responsiveness, and accessibility considerations).
  • Applies to frontend UI design tasks, component scaffolding, and interactive UI prototyping in React/Next.js projects.

Quick Start

Tell your AI to read SKILL.md and follow its rules exactly to generate premium frontend UI.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I stop AI-generated React components from looking generic and dull?

To prevent generic AI-generated React components, apply premium design rules using control dials for design variance, motion intensity, and visual density, alongside strict architecture constraints during generation.

How do I enforce React Server Components and Tailwind usage in Next.js UI generation?

Enforce React Server Components and Tailwind usage in Next.js UI generation by applying framework constraints, anti-slop policies, and client-component isolation rules to ensure scalable and accessible results.

Can I control visual density and motion intensity when prototyping React dashboards?

Yes, you can control visual density and motion intensity when prototyping React dashboards by adjusting specific design dials that shape layout density and interactive motion during the UI generation process.

What's the best way to scaffold accessible Next.js design systems with AI?

The best way to scaffold accessible Next.js design systems with AI is to apply performance guardrails, accessibility considerations, and dependency checks to ensure scalable and accessible interface generation.

Does this UI design approach work for existing React projects or only new ones?

This UI design approach works for React projects by applying architecture enforcement and design dials to component scaffolding and interactive UI prototyping tasks, upgrading existing interfaces with premium design rules.

Why does my AI-generated frontend UI fail accessibility and responsiveness checks?

AI-generated frontend UI fails accessibility and responsiveness checks when missing mandatory performance guardrails, responsiveness rules, and accessibility considerations required for scalable and accessible interface generation.