design-taste-frontend

Create UI components with metric-based design rules and Tailwind CSS.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/kirvin/agent-dev-harness --skill design-taste-frontend-kirvin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/kirvin/agent-dev-harness/tree/main/plugins/kf/skills/design-taste-frontend
Command: npx skills add https://github.com/kirvin/agent-dev-harness --skill design-taste-frontend-kirvin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures the creation of high-quality, metric-based digital interfaces, correcting common UI clichés and enforcing strict component architecture.

Core Features & Use Cases

  • Metric-Based Design: Adheres to defined design variance, motion intensity, and visual density metrics.
  • Component Architecture: Enforces strict dependency verification, framework usage, and state management conventions.
  • Styling Policy: Utilizes Tailwind CSS with version locking and anti-emoji policy.
  • Anti-Slop Implementation: Combats generic AI designs with engineered rules for typography, color calibration, layout diversification, and more.
  • Performance Guardrails: Implements performance optimizations like hardware acceleration and DOM cost management.
  • Technical Reference: Provides detailed guidance on design variance, motion intensity, visual density, and other technical aspects.
  • Forbidden Patterns: Outlines common AI design mistakes to avoid.
  • Creative Arsenal: Offers high-end inspiration for UI design.
  • Motion-Engine Bento Paradigm: Describes a "Bento 2.0" architecture for modern SaaS dashboards.
  • Final Pre-Flight Check: Provides a checklist for code evaluation before output.

Quick Start

Use the design-taste-frontend skill to create a new UI component adhering to the specified design metrics and conventions.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I prevent generic AI designs when building digital interfaces?▼

To prevent generic AI designs in digital interfaces, apply an anti-slop implementation strategy that enforces engineered rules for typography, color calibration, and layout diversification, ensuring strict component architecture and metric-based visual density.

What is metric-based UI design and how does it control visual density?▼

Metric-based UI design controls visual density by adhering to strictly defined metrics for design variance, motion intensity, and visual density, ensuring high-quality digital interfaces and correcting common UI clichés.

How do I implement a Bento 2.0 architecture for SaaS dashboards?▼

Implement a Bento 2.0 architecture for modern SaaS dashboards by utilizing a motion-engine paradigm that enforces strict component architecture, dependency verification, and state management conventions within your digital interface.

Does this UI component architecture enforce Tailwind CSS version locking?▼

Yes, the UI component architecture enforces a strict styling policy that utilizes Tailwind CSS with version locking, alongside an anti-emoji policy, to maintain consistent component architecture and state management conventions.

What are the best performance guardrails for frontend component architecture?▼

The best performance guardrails for frontend component architecture include implementing hardware acceleration and DOM cost management, guided by a final pre-flight checklist that evaluates code before output.

Why should I verify dependencies and state management in UI engineering?▼

You should verify dependencies and state management in UI engineering to ensure strict component architecture, prevent forbidden patterns, and maintain high-quality digital interfaces with predictable framework usage and performance optimizations.