coui-chip

Generate interactive chip UI components for Flutter and Web with CoUI.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/coco-de/skills --skill coui-chip
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coui-chip
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-chip
Command: npx skills add https://github.com/coco-de/skills --skill coui-chip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation and management of interactive chip elements, commonly used for tags, filters, and selectable labels in user interfaces.

Core Features & Use Cases

  • Versatile Chip Creation: Design filled or outlined chips with optional avatars and delete buttons.
  • Interactive States: Implement selectable chips with clear visual feedback for user interaction.
  • Use Case: Quickly generate a group of filter chips for an e-commerce product listing, allowing users to select multiple categories like 'Electronics', 'Clothing', and 'Home Goods'.

Quick Start

Create a removable chip with the label 'Dart' and a delete handler.

Frequently Asked Questions about coui-chip

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

FAQPage Schema
How do I create interactive chips and tags for Flutter and Web apps?

You can create interactive chips for Flutter and Web apps by generating UI components that support labels, avatars, delete actions, and selection states. This allows you to quickly build configurable tags and filters.

What's the best way to add filter chips for e-commerce product listings?

The best way to add filter chips for e-commerce listings is by generating a group of selectable chip components. This provides clear visual feedback, allowing users to select multiple categories like Electronics or Clothing.

Can I include a delete action button when designing UI tags?

Yes, you can include a delete action button when designing UI tags. The generated chip components support removable configurations, allowing you to attach delete handlers for interactive tag management.

Does this UI component generation support both filled and outlined chip styles?

Yes, the UI component generation supports both filled and outlined chip styles. You can design versatile chips that include optional avatars and delete buttons to match your specific application interface requirements.

Do I need any external dependencies to build selectable labels using the CoUI design system?

No, you do not need any external dependencies to build selectable labels. The Skill uses the CoUI design system to generate interactive chip components natively for both Flutter and Web environments without extra setup.