research-component

Research UI component variants and patterns across specified library pages.

91|4|Updated Jun 20, 2025

Search Tags:#research #component #design-system #recipe #ui-library

Ready to run

npx skills add https://github.com/styleframe-dev/styleframe --skill research-component

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: research-component
Source: https://github.com/styleframe-dev/styleframe/tree/main/.claude/skills/research-component
Command: npx skills add https://github.com/styleframe-dev/styleframe --skill research-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured process to research UI components for Styleframe recipes, enabling consistent discovery of component metadata and library patterns.

Core Features & Use Cases

Guides the researcher through eliciting component details (name, type, multi-part status, color pattern, HTML element) and gathering library insights to ground the design.
Produces a classified .context/recipe-<component-name>/research.md with per-library findings and cross-library observations.
Flags gaps when library URLs are not provided, ensuring traceability and work scope.

Quick Start

Provide the component name, type, multi-part status, color pattern, and HTML element, then provide optional URLs to UI libraries to begin the research workflow.

Frequently Asked Questions about research-component

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

FAQPage Schema

How do I research UI component variants across multiple design libraries?▼

To research UI component variants, you define the component scope and fetch UI library pages to extract variant axes, values, sub-parts, interactive states, and accessibility patterns. This process generates a classified research document for cross-library observations.

What is the best way to document interactive states and accessibility patterns for a UI recipe?▼

Documenting interactive states and accessibility patterns for a UI recipe involves fetching target UI library pages and extracting their structural metadata. The findings are classified and written into a structured markdown file to ground design decisions.

Which UI libraries can I extract component design patterns from?▼

You can extract component design patterns from Nuxt UI, Shadcn, Radix, Chakra, and Mantine. The research process fetches these library pages to gather variant axes, sub-parts, and accessibility patterns for the specified UI component.

How do I start defining the scope for UI component research?▼

You start defining UI component research scope by providing the component name, type, multi-part status, color pattern, and target HTML element. These parameters establish the boundaries for extracting variant axes and accessibility patterns.

What happens if I don't provide URLs to UI libraries during component research?▼

If UI library URLs are not provided during component research, the process flags gaps in the generated findings document. This ensures traceability and highlights missing work scope for the UI recipe research.

Does UI recipe research work for multi-part components?▼

Yes, UI recipe research supports multi-part components by explicitly asking for multi-part status during scope definition. This allows the extraction of sub-parts and interactive states across fetched UI library pages.