coui-badge

Generate status badge UI components for Flutter and Web platforms.

Updated Aug 27, 2026

Search Tags:#ui #flutter #web #badge #label #indicator

Ready to run

npx skills add https://github.com/coco-de/skills --skill coui-badge

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coui-badge
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-badge
Command: npx skills add https://github.com/coco-de/skills --skill coui-badge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of visual status indicators, labels, and counters using pre-defined badge components for both Flutter and Web applications.

Core Features & Use Cases

Consistent UI Elements: Apply uniform styling for badges across different application states.
Multiple Variants: Utilize primary, secondary, outline, and destructive variants for clear visual communication.
Use Case: Quickly add a 'New' badge to a list item in a Flutter app or display an 'Active' status indicator in a web table.

Quick Start

Use the coui-badge skill to create a primary badge with the text 'New' for a Flutter application.

Frequently Asked Questions about coui-badge

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

FAQPage Schema

How do I create status badges and indicators for a Flutter app?▼

To create status badges and indicators for a Flutter app, this Skill generates UI components with pre-defined variants like primary, secondary, outline, and destructive. It facilitates implementing visual cues for states like new items, active processes, drafts, or errors.

Can I use the same badge component for both Web and Flutter platforms?▼

Yes, you can use the same badge component approach for both Web and Flutter platforms. The Skill generates status badges and indicators across both environments, ensuring consistent theming and uniform styling for visual cues like active processes or error states.

What badge variants are available for displaying UI status labels?▼

The available badge variants for displaying UI status labels are primary, secondary, outline, and destructive. These pre-defined variants facilitate clear visual communication and consistent theming for different application states such as new items, drafts, or errors.

What is the best way to show a 'New' status indicator in a Web table?▼

The best way to show a 'New' status indicator in a Web table is using a pre-defined primary badge variant. This Skill generates the UI component to display active status indicators or new item labels with consistent styling across your application.

Do I need any external dependencies to implement outline or destructive badges?▼

No, you do not need any external dependencies to implement outline or destructive badges. The Skill operates with an empty dependencies list, directly generating the UI components for uniform styling and visual feedback.