skills.rest
HealthSamurai
HealthSamuraiOFFICIAL
Explore all skills by this author →
Website𝕏@health_samuraiGitHub

UI Component Library Reference

Reference Aidbox React components, design tokens, typography, and icons.

3|2|Updated Aug 4, 2025
Search Tags:#react#design system#component library#frontend development#ui components#jsx
One-click install
npx skills add https://github.com/HealthSamurai/aidbox-ui --skill ui-component-library-reference
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Component Library Reference
Source: https://github.com/HealthSamurai/aidbox-ui/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/HealthSamurai/aidbox-ui --skill ui-component-library-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive reference for the Aidbox UI component library, enabling developers to quickly find, understand, and implement pre-built UI elements according to the Aidbox design system.

Core Features & Use Cases

  • Component Discovery: Browse and understand available React components, their purpose, and available props.
  • Design Token Application: Learn how to apply colors, spacing, typography, and corner radii from the design system.
  • Code Generation: Get example JSX code snippets for various components, correctly configured with design tokens.
  • Use Case: A developer needs to create a form with a dropdown selector and a primary action button. They can consult this Skill to find the Combobox and Button components, see their available variants and props, and get example JSX to implement them.

Quick Start

Use the UI Component Library Reference skill to find an example of a primary action button.

Frequently Asked Questions about UI Component Library Reference

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

FAQPage Schema
How do I find available React components for the Aidbox design system?▼

To find available React components for the Aidbox design system, this reference provides a detailed catalog of UI components, their purposes, available props, and import paths. It facilitates UI development by offering component discovery and usage examples.

How do I apply design tokens when building frontend UI components?▼

To apply design tokens when building frontend UI components, consult the design token application guidelines. These guidelines explain how to correctly implement colors, spacing, typography, and corner radii from the Aidbox design system in your JSX code.

Can I get example JSX code snippets for Aidbox UI components?▼

Yes, you can get example JSX code snippets for Aidbox UI components. This reference facilitates code generation by offering correctly configured example JSX code snippets for various elements, such as forms with dropdown selectors and primary action buttons.

Does this component library reference include typography and icons?▼

Yes, this component library reference includes typography and icons. Alongside React UI components and design tokens, it provides a detailed reference for typography and icons to support building user interfaces with the Aidbox design system.

Related Skills

Explore More Software Engineering Skills→
lava-chenlava-chen
1

react-component

Create typed, reusable React components with hooks and TypeScript patterns.

Community
Basic
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
ic-facetic-facet

nextjs-15

Provides guidance on building apps with the Neovim ecosystem and improving workflow efficiency.

Official
Intermediate
otto-poblyshotto-poblysh

frontend-design

Generate production-grade React/HTML/CSS frontend interfaces with cohesive typography and motion.

Community
Intermediate