design-taste-frontend

Enforce metric-driven UI design standards for React and Next.js frontend projects.

1|Updated Oct 27, 2025

Search Tags:#ui #frontend #react #tailwind #ux #motion #design-guidelines

Ready to run

npx skills add https://github.com/sandrasocial/sselfie-9g --skill design-taste-frontend-sandrasocial

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill design-taste-frontend-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It counters the default, low‑quality UI patterns generated by LLMs by enforcing metric‑driven, high‑end design standards for frontend projects.

Core Features & Use Cases

Design Engineering Directives: Enforces typography, color, layout, and interaction rules to produce premium interfaces.
Performance Guardrails: Validates dependencies, restricts emoji usage, and ensures hardware‑accelerated animations.
Motion & Visual Density Controls: Configurable DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY guide the aesthetic and animation intensity.
Use Case: A React or Next.js team can invoke this skill to automatically generate a dashboard component that follows strict UI conventions, avoids common AI‑bias patterns, and stays performant.

Quick Start

Ask the design-taste-frontend skill to create a responsive dashboard component adhering to the configured design variance, motion intensity, and visual density.

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 standards and stop low-quality AI generated React components?▼

To enforce consistent UI design in React, apply metric-driven rules that correct LLM biases by validating dependencies, restricting emoji usage, and configuring predefined parameters for visual density and motion intensity.

Why does my LLM generated frontend UI look cheap, and how do I fix the visual density?▼

LLM generated frontend UI often looks cheap due to default low-quality patterns; fix this by enforcing metric-driven design rules and configuring strict visual density, design variance, and motion intensity parameters.

Can I use Tailwind and Next.js to build components with strict motion and performance guardrails?▼

Yes, you can use Tailwind and Next.js to build components with strict performance guardrails by enforcing hardware-accelerated animations and verifying dependencies to ensure high-quality frontend architecture.

What is the best way to generate a responsive React dashboard component that avoids common AI bias patterns?▼

The best way to generate a responsive React dashboard component that avoids AI bias patterns is to enforce design engineering directives covering typography, color, layout, and interaction rules for premium interfaces.

Do I need to manually verify dependencies when generating premium UI with React?▼

You do not need to manually verify dependencies when generating premium UI with React if you use performance guardrails that automatically validate dependencies and restrict emoji usage for optimized frontend development.