Skills
.Work. You
Rest

nazim-status-badges

Community

Consistent status display for Nazim UI.

Software Engineering#ui#frontend#design system#status#badges#nazim
AuthorAHMADJAN-New
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Ensures that status indicators across the Nazim application are displayed consistently and semantically, improving user understanding and application aesthetics.

Core Features & Use Cases

  • Standardized Badge Variants: Utilizes predefined shadcn/ui badge variants (default, secondary, outline, destructive) mapped to common status meanings (success, neutral, info, error).
  • Semantic Color Mapping: Provides a clear mapping of status types to semantic colors (green for success, red for error, yellow for warning, etc.) for both light and dark modes.
  • Pattern Examples: Offers clear TypeScript code examples for implementing status badges based on simple variants or variant + custom color combinations.
  • Use Case: When displaying a student's enrollment status in a table, use this skill to ensure 'active' students show a green 'default' badge, 'pending' students show an orange 'outline' badge, and 'withdrawn' students show a red 'destructive' badge.

Quick Start

Apply the statusBadgeVariant function to the student's status to determine the correct badge variant for display.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: nazim-status-badges
Download link: https://github.com/AHMADJAN-New/nazim-web/archive/main.zip#nazim-status-badges

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 223,000+ vetted skills library on demand.