skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

component-usage-ux

Select and load the correct UI-kit component usage skill for a given component.

2|Updated Dec 2, 2024
Search Tags:#react#tokens#design-system#props#ui-kit#component-usage#framework-adapters
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill component-usage-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-usage-ux
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/component-usage-ux
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill component-usage-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines selecting and loading the correct UI-kit component usage skill for a given component.

Core Features & Use Cases

  • Orchestrates per-component usage skills for apps using the UI-kit.
  • Loads usage paths before configuring props, variants, themes, sizes, slots, framework adapters, and token overrides.
  • Supports different component usage flows to adapt to various design-system configurations.

Quick Start

Load the appropriate usage skill path for a chosen UI-kit component and its usage rules.

Frequently Asked Questions about component-usage-ux

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

FAQPage Schema
How do I orchestrate UI-kit component usage across multiple React apps?▼

To orchestrate UI-kit component usage across React apps, load the specific usage skill for a chosen component to configure props, variants, themes, sizes, slots, and framework adapters before rendering.

What is the best way to apply token overrides to design-system components?▼

Applying token overrides to design-system components requires loading the specific component usage skill, which validates frontmatter metadata and configures the necessary token overrides before rendering the final usage decisions.

How do I configure framework adapters for UI-kit components?▼

Configuring framework adapters for UI-kit components involves loading the correct component usage skill path, which then allows you to set adapter configurations alongside props, variants, and themes for safe operation.

Does the UI-kit component usage orchestrator validate component dependencies?▼

Yes, the UI-kit component usage orchestrator validates frontmatter metadata presence, specifically checking for name and description, and reports optional dependencies and resource components if present to ensure safe operation.

Can I use this approach to manage component variants and slots for different apps?▼

Yes, you can use this approach to manage component variants and slots across different apps, as it adapts to various design-system configurations and loads usage paths tailored to each specific UI-kit component.

Related Skills

Explore More Software Engineering Skills→
AlvaroBianoAlvaroBiano

hermes-agent-skill-authoring

Define and validate in-repo skill structure with required frontmatter fields.

Community
Basic
TechsioCZTechsioCZ
2

badge-usage

Render compact token-backed status labels with the @techsio/ui-kit Badge component.

Official
Intermediate
alfadocsalfadocs

alfadocs-design-review

Audit AlfaDocs app screens for @alfadocs/ui-kit design-system compliance.

Official
Advanced
BurburtonBurburton

component-design

Generate UI component design specifications covering anatomy, variants, props, styling, accessibility, and design system integration.

Community
Advanced