component-decision-tree

Generate queryable decision trees mapping user intents to UI components.

155|7|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/murphytrueman/design-system-ops --skill component-decision-tree
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-decision-tree
Source: https://github.com/murphytrueman/design-system-ops/tree/main/skills/component-decision-tree
Command: npx skills add https://github.com/murphytrueman/design-system-ops --skill component-decision-tree

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the problem of inconsistent and incorrect component selection by providing a structured, queryable decision framework that guides users and AI agents to the most appropriate component for a given need.

Core Features & Use Cases

  • Intent-to-Component Mapping: Creates decision trees that map user intents and requirements to specific components.
  • Disambiguation Logic: Explicitly addresses common confusion points between similar components (e.g., Modal vs. Dialog).
  • Automated Data Integration: Can pull component data from Figma, Storybook, and codebase indexes to inform tree generation.
  • Use Case: An AI agent needs to display a notification. Instead of guessing, it traverses the decision tree, answering questions about persistence, severity, and blocking behavior to correctly select between Toast, Banner, Alert, or InlineMessage.

Quick Start

Use the component-decision-tree skill to generate a decision tree for selecting between notification components.

Frequently Asked Questions about component-decision-tree

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

FAQPage Schema
How do I map user intents to the correct UI components in a design system?

You map user intents to UI components by generating queryable decision trees that encode expert judgment into traversable question-and-answer flows, resolving ambiguity and ensuring consistent selection.

What is the best way to disambiguate similar UI components like Modal vs Dialog for AI agents?

The best way to disambiguate similar components is to use a decision tree with explicit disambiguation logic, guiding AI agents through specific questions to resolve confusion and reach the correct selection.

Can I generate a component selection tree using data from Figma or Storybook?

Yes, you can generate a component selection tree using Figma or Storybook, as this Skill integrates with design system inventories from these platforms and codebases to inform the decision tree generation.

How do AI agents query decision trees to select the right notification component?

AI agents query decision trees by traversing structured YAML or JSON outputs, answering questions about persistence, severity, and blocking behavior to correctly select between components like Toast, Banner, or Alert.

Does component selection logic need to be manually encoded for every UI element?

No, component selection logic does not need to be manually encoded for every element, because this Skill automates data integration from Figma, Storybook, and codebases to construct structured decision frameworks.

What format does the intent-to-component mapping output use for AI integration?

The intent-to-component mapping outputs structured YAML or JSON formats, providing queryable decision trees that AI agents can easily traverse to resolve UI component selection.