taste-skill

Enforce metric-based UI rules and architecture constraints in React/Next.js apps.

127|8|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/hanamizuki/solopreneur --skill taste-skill
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: taste-skill
Source: https://github.com/hanamizuki/solopreneur/tree/main/plugins/designer/skills/taste-skill
Command: npx skills add https://github.com/hanamizuki/solopreneur --skill taste-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Senior UI/UX Engineering guidance that overrides default LLM biases to enforce metric-based rules, strict component architecture, CSS hardware acceleration, and design-engineering discipline across frontend work.

Core Features & Use Cases

  • Deterministic Typography & Color: enforce typography rules and single-accent color palettes for consistent branding.
  • Layout & Performance Guardrails: prescribe responsive grids, glassmorphism policies, and performance best practices to ensure fast, accessible interfaces.
  • Design System Enforcement: codify component architecture, spacing, and accessibility standards to scale design across apps.

Quick Start

Apply taste-skill guidelines to a new or existing UI project by embedding its rules into component templates and design tokens.

Frequently Asked Questions about taste-skill

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

FAQPage Schema
How do I enforce deterministic typography and single-accent color palettes in React?

Enforce deterministic typography and single-accent color palettes in React by applying metric-based rules and strict design tokens to override default LLM biases. This ensures consistent branding and predictable UI component rendering across your dashboard.

What is the best way to build glassmorphism interfaces without hurting frontend performance?

Build glassmorphism interfaces without hurting performance by applying CSS hardware acceleration guardrails and responsive grid policies. This approach isolates complex animations in dedicated client components to maintain fast rendering speeds.

How do I scale a design system across Next.js apps to ensure accessibility standards?

Scale a design system across Next.js apps by codifying strict component architecture, spacing rules, and accessibility standards. Embedding these metric-based constraints into your templates ensures scalable and accessible UI generation.

Does this UI design approach work for client-side components requiring anti-emoji policies?

This UI design approach works for client-side components requiring anti-emoji policies by strictly enforcing design-engineering discipline. It neutralizes bias-prone generations across your React and Next.js applications through dedicated architectural constraints.

Why do default LLM generated UI components often lack design discipline?

Default LLM generated UI components lack design discipline because they produce bias-prone outputs without metric-based rules. Override these biases by enforcing strict component architecture, performance guardrails, and deterministic typography policies.