skills.rest
tylersahagun
tylersahagunCOMMUNITY
Explore all skills by this author →
GitHub

skylar-component-explorer

Navigate and understand AskElephant UI components, variants, and usage in Storybook.

Updated Aug 23, 2026
Search Tags:#design system#component library#ux design#frontend development#storybook#ui components
One-click install
npx skills add https://github.com/tylersahagun/elmer --skill skylar-component-explorer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skylar-component-explorer
Source: https://github.com/tylersahagun/elmer/tree/main/pm-workspace-docs/archive/cursor-architecture-2026-02-07/.cursor/rules/Skylar/skylar-component-explorer
Command: npx skills add https://github.com/tylersahagun/elmer --skill skylar-component-explorer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps designers and developers quickly understand and locate available UI components within the design system, streamlining the process of building consistent and efficient user interfaces.

Core Features & Use Cases

  • Component Discovery: Lists and describes available UI primitives and feature components.
  • Variant and Usage Information: Explains component variants, states, and interactions.
  • Storybook Navigation: Guides users on how to find and explore components in Storybook.
  • Use Case: A designer needs a specific type of button for a new feature. They can ask the AI, "What button variants do we have?" and receive a clear overview, including visual descriptions and where to find them in Storybook.

Quick Start

Show me all the buttons available in the component library.

Frequently Asked Questions about skylar-component-explorer

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

FAQPage Schema
How do I find available UI components in a design system?▼

This Skill lists available UI primitives and feature components, explains their variants and states, and guides you on navigating Storybook to locate them within the application's design system.

How do I navigate Storybook to locate specific UI components?▼

You can navigate Storybook to locate specific UI components by asking this Skill for guidance, which directs you to the exact component structures, variants, and usage details within the design system.

Can I see button variants and states for frontend development?▼

Yes, you can see button variants and states for frontend development by requesting an overview from this Skill, which provides visual descriptions and usage details for consistent interface building.

What's the best way to explore a component library for UX design?▼

The best way to explore a component library for UX design is to query this Skill, which facilitates discovery of UI primitives and details component variants, states, and interactions for consistent interfaces.

Does this component explorer work without external dependencies?▼

Yes, this component explorer works without external dependencies, allowing you to independently navigate and understand the UI component library, its structures, and its variants within your design system.

Related Skills

Explore More Design & Creative Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
Hey-ViswaHey-Viswa

framer-design-skill

Standardize Framer design-system patterns for React/Next.js UI development.

Community
Intermediate
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
nguyenvanlinh1902nguyenvanlinh1902

frontend-design

Extract design tokens and generate frontend components from design references.

Community
Advanced