Skills
.Work. You
Rest

cpn-basic-badge

Official

Guide AI to use the UDesign Badge component.

Design & Creative#ui#react#demo#design-system#badge#placement
AuthorUCloud-FE
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill guides AI to correctly apply the UDesign Badge component in UI development, ensuring consistent usage and reducing missteps when adding badges to interfaces.

Core Features & Use Cases

  • Standard import and usage patterns for the Badge component in React projects.
  • Supports configurations such as value, dot mode, placement, color, and maxValue to maintain consistent visuals.
  • Use case: add informative badges to dashboards, lists, and cards to indicate counts or status at a glance.

Quick Start

Import the Badge component from the UDesign React package and render a basic badge in a demo container to verify correct behavior.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: cpn-basic-badge
Download link: https://github.com/UCloud-FE/udesign-cli/archive/main.zip#cpn-basic-badge

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.