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

badge-usage

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use after component-usage-ux when an app needs @techsio/ui-kit Badge for compact status, category, discount, or metadata labels without duplicating token-backed color and spacing classes in JSX.

Core Features & Use Cases

  • Provides usage guidance for the Badge component to render compact, consistent labels.
  • Demonstrates applying variants (for example, success, warning) and sizes while honoring the design tokens.

Quick Start

Render a compact label by using the Badge component from @techsio/ui-kit.

Frequently Asked Questions about badge-usage

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

FAQPage Schema
How do I add compact status labels in React without duplicating color and spacing classes?▼

Use the Badge component from @techsio/ui-kit to render compact status labels in React without duplicating token-backed classes. It applies design tokens directly, ensuring color and spacing conformity across UI screens without manual CSS overrides.

Can I use different variants and sizes for UI badges while maintaining design system tokens?▼

Yes, you can apply variants like success or warning and adjust sizes for UI badges while maintaining design system tokens. The Badge component accepts props that automatically map styling to predefined color and spacing tokens for visual consistency.

What is the best way to display metadata or discount labels consistently across app screens?▼

The best way to display metadata or discount labels consistently is using a token-backed Badge component. It renders compact, standardized labels for categories or discounts, pulling styling from a central design system to ensure UI conformity.

Does the Badge component require any external dependencies to render design-system-compliant labels?▼

The Badge component requires the @techsio/ui-kit package to render design-system-compliant labels. It relies on internal badge.tsx files and related tokens to guarantee color and spacing conformity without needing external UI libraries.

Related Skills

Explore More Software Engineering Skills→
TechsioCZTechsioCZ
2

select-usage

Render labeled single or multiple selects with Zag.js in React apps.

Official
Intermediate
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
TechsioCZTechsioCZ
2

tabs-usage

Generate Zag.js Tabs UI patterns with configurable orientation and activation for @techsio/ui-kit apps.

Official
Intermediate
CodenburgCodenburg

react-19

Optimize React 19 components using the React Compiler without manual memoization.

Community
Intermediate