skills.rest
metedata
metedataCOMMUNITY
Explore all skills by this author →
𝕏@metedataGitHub

crit-component-design

Generate component system options with state diagrams for UI design reviews.

3|Updated Feb 23, 2026
Search Tags:#evaluation#wireframes#design-system#critique#ui-components#interaction-states
One-click install
npx skills add https://github.com/metedata/design-crit --skill crit-component-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: crit-component-design
Source: https://github.com/metedata/design-crit/tree/main/skills/crit-component-design
Command: npx skills add https://github.com/metedata/design-crit --skill crit-component-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps design teams critique and standardize interactive UI components to ensure consistency and usability across products.

Core Features & Use Cases

  • Component inventory and state diagrams for buttons, forms, cards, modals, tables, and other building blocks.
  • Cross-method evaluation with 2-4 options per facet and a critique per option.
  • Guidance on how the component system integrates with existing layout and typography decisions in design reviews.

Quick Start

Generate 2-4 divergent component-design options with state diagrams and a concise critique for each option.

Frequently Asked Questions about crit-component-design

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

FAQPage Schema
How do I critique and standardize UI components for a design system?▼

Critiquing UI components involves generating 2-4 divergent options with state diagrams and evaluating each against platform conventions. This process produces a converged design system with consistent spacing, typography, and behavior across web and app interfaces.

What is a component inventory and when do I need state diagrams?▼

A component inventory catalogs interactive UI building blocks like buttons, forms, and modals. You need state diagrams during design reviews to ensure explicit state coverage and alignment with platform conventions before finalizing a design system.

How do I evaluate multiple component design options during a review?▼

Evaluate component design options using cross-method evaluation with 2-4 options per facet. Generate a concise critique for each option to determine how the component system integrates with existing layout and typography decisions.

Can I use this component critique method for both web and app interfaces?▼

Yes, you can apply this critique method to design review sessions across both web and app interfaces. It requires aligning with your chosen platform convention to produce a converged design system with consistent interactive states.

What do I need to prepare before standardizing interactive UI components?▼

Before standardizing interactive UI components, you need a component inventory and explicit state coverage. This preparation ensures your design review can successfully converge spacing, typography, and behavior across your product.

Related Skills

Explore More Design & Creative Skills→
fieldspherefieldsphere
37

wireframes

Translate API responses into annotated wireframes with data-state coverage.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

doodle

Define and enforce hand-drawn design tokens for UI components.

Community
Intermediate
wpgauravwpgaurav
14

normalize

Normalize frontend UI typography, color, spacing, and components to design tokens.

Community
Advanced
VIethoangnguyenleVIethoangnguyenle

agent-ux

Generate UI screens using existing primitives and composites for enterprise workspace apps.

Community
Advanced