cc-coui#
CoUI Component Library (85 cross-platform components)
CoUI cross-platform component library skills (Flutter + Jaspr Web)
Skills#
| ě´ëŚ | ě¤ëŞ |
|---|---|
| coui-accordion | Use when creating collapsible content sections, expandable panels, FAQ-style accordions, or toggle l |
| coui-alert | Activate when creating alert messages, notification banners, status indicators, or dismissible info/ |
| coui-autocomplete | Activate when creating autocomplete inputs, search suggestions, async search fields, or typeahead co |
| coui-avatar | Activate when creating avatar images, user profile icons, initials displays, placeholder avatars, av |
| coui-badge | Activate when creating status badges, count indicators, label tags, or small inline indicators using |
| coui-banner | Activate when creating notification banners, alert bars, info/success/warning/error messages at top |
| coui-breadcrumb | Activate when creating breadcrumb navigation trails, hierarchical page paths, or location indicators |
| coui-button | Activate when creating buttons, handling click/tap events, or choosing button variants (PrimaryButto |
| coui-calendar | Use when creating calendar widgets, date pickers, date selection interfaces, range date selection, o |
| coui-card | Activate when creating card containers for grouping related content. Covers Flutter Card/SurfaceCard |
| coui-carousel | Activate when creating image carousels, slideshows, content sliders with autoplay, indicators, or ar |
| coui-chat | Activate when creating chat interfaces, message lists, chat bubbles, or messaging UIs using Chat/Cha |
| coui-checkbox | Activate when creating checkboxes, tri-state checkboxes, controlled checkboxes, radio buttons, toggl |
| coui-chip | Activate when creating chips, tags, filter options, selectable labels, or removable tag elements usi |
| coui-chip-input | Activate when creating chip inputs, tag inputs, multi-value text inputs, or token fields using ChipI |
| coui-code-snippet | Activate when creating code displays, syntax-highlighted code blocks, or copyable code examples usin |
| coui-collapsible | Activate when creating collapsible sections, expandable panels, or toggle-to-reveal content areas us |
| coui-color-picker | Activate when creating color pickers, color selectors, hex/rgb/hsl color inputs, or color swatches u |
| coui-command | Activate when creating command palettes, keyboard-centric navigation, search commands, or action men |
| coui-context-menu | Activate when creating right-click menus, long-press context actions, or contextual action lists usi |
| coui-countdown | Activate when creating countdown timers, time-remaining displays, event countdowns, or session timeo |
| coui-date-picker | Activate when creating date picker inputs, date range pickers, or controlled date selection using Da |
| coui-dialog | Use when creating modal dialogs, alert dialogs, confirmation prompts, overlay content panels, or usi |
| coui-divider | Activate when creating visual separators, horizontal/vertical dividers, labeled dividers, or content |
| coui-dot-indicator | Activate when creating dot indicators, page indicators, carousel position dots, or pagination dots u |
| coui-drawer | Use when creating side drawers, bottom sheets, sliding overlay panels, slide-out navigation, or over |
| coui-dropdown-menu | Activate when creating dropdown action menus, trigger-based option lists, or button-triggered menu p |
| coui-empty-state | Activate when creating empty state views, no-data placeholders, empty list indicators, or zero-state |
| coui-fab | Activate when creating floating action buttons, FABs, extended FABs, or primary action buttons using |
| coui-fieldset | Activate when creating fieldsets, form groups, form sections, or grouped form fields with legends us |
| coui-file-input | Activate when creating file inputs, file upload fields, file pickers, or file icon mappings using Fi |
| coui-form | Activate when creating form validation, form fields with labels and error messages, or using validat |
| coui-gap | Activate when adding consistent spacing between widgets, using design-token gaps, or inserting blank |
| coui-getting-started | Activate when setting up a new project with CoUI (Flutter or Web), adding coui_flutter or coui_web d |
| coui-hover-card | Activate when creating hover-triggered info cards, user profile previews, or tooltip-like rich conte |
| coui-hover-gallery | Activate when creating hover image galleries, product image previews, or sequential image transition |
| coui-icon | Activate when creating icons, vector icon displays, or using CouiIcons preset icons with Icon (Flutt |
| coui-input | Activate when creating text input fields, textareas, or handling input features (password toggle, cl |
| coui-input-otp | Activate when creating OTP inputs, PIN code fields, verification code inputs, or one-time password f |
| coui-join | Activate when creating joined button groups, input-button combinations, or visually connected elemen |
| coui-kbd | Activate when creating keyboard key displays, shortcut key indicators, or key combination badges usi |
| coui-keyboard-shortcut | Activate when creating keyboard shortcut displays with labels, shortcut lists for settings/help scre |
| coui-link | Activate when creating text links, navigation links, external URL links, or styled hyperlinks using |
| coui-loading | Activate when creating loading indicators, spinners, dot loaders, progress bars, or pulse animations |
| coui-menu | Use when creating context menus, dropdown menus, menu bars, navigation menus, or sidebar menus using |
| coui-menubar | Activate when creating desktop-style horizontal menu bars, application menu systems, or top-level me |
| coui-mockup | Activate when creating device frame mockups, browser window frames, phone previews, code editor fram |
| coui-navigation | Activate when creating navigation bars, navigation rails, sidebars, breadcrumbs, or pagination in Co |
| coui-navigation-bar | Activate when creating bottom navigation bars, tab bars, or primary section navigation using Navigat |
| coui-number-ticker | Activate when creating animated number displays, rolling counters, statistic animations, or numeric |
| coui-pagination | Activate when creating page navigation controls, paginated lists, or multi-page content navigation u |
| coui-phone-input | Activate when creating phone number inputs, country code selectors, international phone fields, or d |
| coui-popover | Activate when creating popover overlays, floating panels anchored to widgets, or hover cards in CoUI |
| coui-progress | Activate when creating progress bars, loading indicators, spinners, or circular/radial progress disp |
| coui-radio-group | Activate when creating radio button groups, single-select option lists, or radio inputs using RadioG |
| coui-refresh-trigger | Activate when creating pull-to-refresh interactions, refresh indicators, or scroll-triggered content |
| coui-resizable | Activate when creating resizable split panels, draggable dividers, or adjustable layout panes using |
| coui-select | Activate when creating dropdown select menus, multi-select pickers, select groups, option lists, or |
| coui-separator | Activate when creating visual dividers, horizontal/vertical lines, labeled separators, or content se |
| coui-skeleton | Activate when creating loading placeholders, skeleton screens, content shimmer effects, or placehold |
| coui-slider | Activate when creating range sliders, value sliders, or controlled sliders in CoUI Flutter or Web us |
| coui-sortable | Activate when creating sortable lists, drag-and-drop reordering, reorderable items, or draggable lis |
| coui-star-rating | Activate when creating star ratings, review ratings, half-star ratings, or read-only rating displays |
| coui-stat | Activate when creating statistic displays, dashboard metrics, KPI cards, or trend indicators using S |
| coui-status | Activate when creating status indicators, online/offline dots, user presence indicators, or system s |
| coui-stepper | Activate when creating multi-step forms, wizard flows, step-by-step processes, or interactive step n |
| coui-steps | Activate when creating read-only step progress indicators, delivery tracking displays, or stage comp |
| coui-swap | Activate when creating animated toggle widgets, state-switching icons, or two-state visual toggles w |
| coui-swiper | Activate when creating swipe-to-dismiss items, swipeable cards, or gesture-based navigation using Sw |
| coui-switch-field | Activate when creating switch fields, labeled toggles, settings toggles, or on/off switches with des |
| coui-switcher | Activate when creating view switchers, segmented controls, tab-style toggles, or filter selectors us |
| coui-table | Activate when creating data tables, sortable tables, tabular data displays, or table layouts with he |
| coui-tabs | Use when creating tab navigation, tab lists, tab panes, or tabbed content panels in CoUI Flutter or |
| coui-text | Activate when styling text in CoUI Flutter or Web using text extensions like .bold, .large, .base200 |
| coui-textarea | Activate when creating multi-line text inputs, auto-expanding text areas, or text fields with charac |
| coui-theme | Activate when configuring CoUI theming across Flutter or Web â ThemeData, ColorScheme, Typography, R |
| coui-time-picker | Activate when creating time pickers, hour/minute selectors, 12-hour or 24-hour time inputs, or time |
| coui-timeline | Activate when creating chronological event displays, activity logs, history views, or time-sequentia |
| coui-toast | Use when showing temporary notification messages, snackbar-style alerts, toast popups, success/error |
| coui-toggle | Activate when creating on/off switches, toggle controls, or controlled toggles in CoUI Flutter or We |
| coui-tooltip | Activate when adding hover tooltips, contextual help text, info popups on hover, or hint overlays us |
| coui-tracker | Activate when creating segmented progress trackers, uptime monitors, habit tracking displays, or str |
| coui-tree | Activate when creating hierarchical tree views, file explorers, organizational charts, or nested cat |
| coui-validation-badge | Activate when creating form validation indicators, password strength checkers, input validation stat |
ě¤ěš#
claude plugins install coco-de/skills/plugins/cc-coui