Badge Consistency Verifier FAQs

Question 1

What specifically does this skill check for in my code?

Accepted Answer

It scans for raw span or Badge usage where StatusBadge should be used, verifies that badge colors use the correct BadgeColor type, checks for duplicated inline styles, and ensures labels are in types.ts while colors are in constants.ts.

Question 2

Can I still use raw spans for simple decorative badges?

Accepted Answer

Yes, purely decorative badges like a 'NEW' tag or 'Sale' label are allowed. This skill specifically targets status-driven badges that represent domain states.

Question 3

How does it detect raw CSS badges?

Accepted Answer

The skill uses specific grep patterns to look for Tailwind-style background and text color utility classes inside TSX files that don't import the standard StatusBadge component.

Question 4

Why does it require labels and colors to be in separate files?

Accepted Answer

Separation of concerns: labels are often tied to domain types (types.ts), while specific color values are UI constants (constants.ts) that may change independently of the business logic.

Question 5

Does this skill work with any React project?

Accepted Answer

While it is optimized for the bitda-plan-master architecture, its logic for detecting hardcoded styles and enforcing type-safe records can be adapted for any design system.

Badge Consistency Verifier

Key Features

Use Cases

Badge Consistency Verifier

Key Features

Use Cases