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.