get_design_system
Identify existing UI components and design tokens before building new ones to prevent duplication and ensure consistency across your application.
Instructions
Discover the design system BEFORE creating any UI component.
CALL THIS WHEN: • You're about to create a React/Vue/Svelte component — check what already exists • You need to know the canonical component for a UI pattern (button, input, modal) • You want to find design tokens (colors, spacing, typography) to use • You suspect raw HTML elements are used instead of existing components
RETURNS: Components with props and usage count, design tokens with values, and anti-patterns where raw HTML is used instead of existing components. Screen/page components are excluded by default.
EXAMPLES: • "What components does this design system have?" • "Is there already a Button component I should use?" • "What color tokens are available?" • "Where are raw HTML elements used instead of components?"
WHY NOT JUST READ FILES: Design systems span dozens of files across multiple directories. This returns the complete inventory with usage frequency — the most-used components are the most canonical.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||