cc-coui#
CoUI Component Library (85 cross-platform components) + composition/extension guidance
CoUI cross-platform component library skills (Flutter + Jaspr Web)
Skills#
| ์ด๋ฆ | ์ค๋ช |
|---|---|
| coui-accordion | Activate when creating collapsible content sections, expandable panels, FAQ-style accordions, or tog |
| coui-alert | Activate when creating alert messages, notification panels, or dismissible info/success/warning/erro |
| coui-aspect-ratio-box | Activate when constraining content to a fixed width-to-height ratio (16:9 video frames, square thumb |
| coui-autocomplete | Activate when creating autocomplete inputs, search suggestion dropdowns, or typeahead fields using t |
| coui-avatar | Activate when creating user avatars, profile images, initials fallbacks, status-dot badges on avatar |
| 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, or top-of-page info/success/warning/destruc |
| coui-breadcrumb | Activate when creating breadcrumb navigation trails, hierarchical page paths, or current-location in |
| coui-button | Activate when creating buttons, handling press/click events, or choosing button variants/sizes/shape |
| coui-calendar | Activate when creating calendar widgets, date selection interfaces, range or multi-date selection, o |
| coui-card | Activate when creating card containers, product/profile cards, or tappable grouped-content surfaces |
| coui-card-image | Activate when creating clickable image cards, thumbnail tiles, media cards, or image + title/subtitl |
| coui-carousel | Activate when creating image carousels, content sliders, or slideshows with autoplay, dot indicators |
| coui-chat | Activate when creating chat interfaces, message bubbles, conversation threads, or messenger UIs usin |
| coui-checkbox | Activate when creating checkboxes, tri-state (indeterminate) checkboxes, select-all lists, or terms- |
| coui-chip | Activate when creating chips, tags, filter options, selectable labels, or removable/dismissible tag |
| coui-chip-group | Activate when creating selectable chip groups, filter chip rows, tag selectors, or single/multi-sele |
| coui-chip-input | Activate when creating chip inputs, tag inputs, multi-value text fields, token fields, or email-reci |
| coui-code-diff | Activate when rendering line-by-line code diffs, before/after code comparisons, or added/removed lin |
| coui-code-snippet | Activate when displaying syntax-highlighted code blocks, copyable code examples, or line-numbered co |
| coui-collapsible | Activate when creating collapsible sections, expandable panels, or toggle-to-reveal disclosure areas |
| coui-color-picker | Activate when creating color pickers, color selectors, hex/RGB/HSL/HSV color inputs, or color swatch |
| coui-command | Activate when creating command palettes (Cmd+K style searchable menus), keyboard-centric action laun |
| coui-composition-and-extension | Activate when a CoUI component does not directly cover a required design (custom frosted/blur surfac |
| coui-context-menu | Activate when creating right-click menus, long-press context actions, or pointer-anchored action lis |
| coui-countdown | Activate when displaying a single numeric countdown value with fade-transition animation using the C |
| coui-datalist | Activate when creating a text input with a predefined suggestion list (browser-style datalist), a fi |
| coui-date-picker | Activate when creating date pickers, date range pickers, or controlled date selection using DatePick |
| coui-description-card | Activate when displaying label-value metadata lists, order/detail summary cards, spec sheets, or key |
| coui-dialog | Activate when creating modal dialogs, alert dialogs, confirmation prompts, or overlay content panels |
| coui-diff | Activate when creating before/after comparison sliders, image compare viewers, or draggable split-vi |
| coui-divider | Activate when creating visual separators, horizontal/vertical divider lines, labeled "OR" dividers, |
| coui-dock | Activate when creating bottom navigation bars, tab docks, or app bottom menus using the Dock widget |
| coui-dot-indicator | Activate when creating dot indicators, page indicators, carousel position dots, or pagination dots u |
| coui-draggable-panel | Activate when creating floating draggable tool palettes, edge-docking overlay panels, or PencilKit-s |
| coui-drawer | Activate when creating side drawers, bottom sheets, or sliding edge-overlay panels using Drawer with |
| 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, speed-dial FABs, or primary floating action me |
| coui-fade-scroll | Activate when wrapping overflowing content in an auto-scrolling viewport with soft fade gradients on |
| coui-fieldset | Activate when grouping related form fields into a bordered section with a legend title โ form groups |
| coui-file-input | Activate when creating file inputs, file upload drop zones, or file pickers using FileInput with Cor |
| coui-filter | Activate when creating segmented filter bars, mutually exclusive single-select option groups, or fil |
| coui-footer | Activate when creating page footers, footer navigation link sections, site-wide bottom bars, or copy |
| coui-form | Activate when building forms โ form containers, labeled fields with required indicators, error/helpe |
| coui-formatted-input | Activate when creating masked or segmented inputs โ phone numbers, credit cards, dates, or custom fi |
| coui-gap | Activate when adding spacing between flex children, inserting design-token gaps, or filling space in |
| coui-getting-started | Activate when setting up a new project with CoUI v0.127+ (Flutter or Web), adding coui_flutter or co |
| coui-group | Activate when absolutely positioning or overlaying children (Stack/Positioned-like layouts, pinned c |
| coui-hero-section | Activate when creating landing-page hero sections, full-width intro banners, or background-image hea |
| coui-hover-card | Activate when creating hover-triggered floating info cards, user profile previews, or rich-content h |
| coui-hover-gallery | Activate when creating hover image galleries, product image hover previews, or position-based image |
| coui-icon | Activate when rendering vector icons from Iconify icon sets (LucideIcons, BootstrapIcons, RadixIcons |
| coui-indicator | Activate when overlaying a status dot, count badge, or "NEW" label on the corner/edge of another ele |
| coui-input | Activate when creating single-line text input fields (text, password, email, number, tel, url, searc |
| coui-input-otp | Activate when creating OTP inputs, PIN code fields, SMS verification code inputs, or one-time passwo |
| coui-item-picker | Activate when creating searchable single-select item lists, inline option pickers, or list/grid valu |
| coui-join | Activate when creating joined button groups, segmented strips, pagination bars, toolbar clusters, or |
| coui-kbd | Activate when displaying keyboard keys, shortcut hints, or key-combination badges using the Kbd widg |
| coui-keyboard-shortcut | Activate when displaying keyboard shortcut key sequences (e.g. Ctrl+S) using the KeyboardShortcut wi |
| coui-label | Activate when creating static form-field text labels, required indicators (*), disabled label states |
| coui-link | Activate when creating text hyperlinks, inline links, navigation links, external URL links, or style |
| coui-listing | Activate when building vertical list layouts, contact/settings/media rows, or row-and-column list st |
| coui-loading | Activate when creating loading indicators, spinners, dot loaders, bar loaders, or pulse animations u |
| coui-menu | Activate when building static menu panels, sidebar navigation lists, or inline nested submenus with |
| 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-mockup-browser | Activate when displaying browser-window mockups, website previews, or URL-framed demo content using |
| coui-mockup-code | Activate when displaying static code blocks, terminal output frames, or line-numbered code editor mo |
| coui-mockup-phone | Activate when creating phone device mockups, app-screenshot frames, or mobile preview frames using t |
| coui-mockup-window | Activate when creating OS window mockups, desktop app frame previews, or macOS-style window chrome w |
| coui-multi-answer-card | Activate when creating selectable answer cards for quizzes, surveys, or multi-select option lists us |
| coui-multiple-choice | Activate when creating single-select option groups, segmented option rows, or radio-like pick-one ch |
| coui-navigation | Activate when building app navigation โ bottom bars, side rails, sidebars, mega-menus, breadcrumbs, |
| coui-navigation-bar | Activate when creating navigation bars, bottom navigation, navigation rails, or navigation sidebars |
| coui-navigation-menu | Activate when building a horizontal top-navigation mega-menu with hover/click dropdown panels using |
| coui-number-ticker | Activate when creating animated number displays, rolling counters, statistic count-up animations, or |
| coui-object-input | Activate when creating structured multi-segment key-value inputs (date YYYY/MM/DD, time HH:MM, IP ad |
| coui-outlined-container | Activate when wrapping content in a bordered panel, outlined box, dashed/dotted frame, elevated surf |
| coui-overflow-marquee | Activate when making overflowing text auto-scroll (marquee/ticker labels), bouncing long titles insi |
| coui-pagination | Activate when creating page navigation controls, paginated lists, or numbered page bars using Pagina |
| 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 trigger widgets, or hover/focus |
| coui-popup | Activate when building the floating panel surface behind menus, dropdowns, or tooltip-like overlays |
| coui-progress | Activate when creating linear progress bars, percentage indicators, or circular/radial progress ring |
| coui-radio-group | Activate when creating radio button groups, single-select option lists, or radio inputs using RadioG |
| coui-range | Activate when creating dual-handle range sliders, min-max interval selectors, or price/value range f |
| coui-rating | Activate when creating star rating inputs, review score selectors, or read-only star score displays |
| 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, touch drag handles, or adjustable |
| coui-responsive-grid | Activate when building responsive grid layouts, multi-column card or dashboard grids, breakpoint-ada |
| coui-scaffold | Activate when building screen layout structure โ an app shell with stacked headers/footers (AppBar), |
| coui-scroll-area | Activate when wrapping overflowing content in a scrollable viewport with a design-system slim scroll |
| coui-scrollbar | Activate when wrapping scrollable content with a design-system scrollbar, constraining the scroll ax |
| coui-select | Activate when creating dropdown select menus, single-value option pickers, searchable selects, or ha |
| coui-separator | Activate when creating plain visual separators, thin horizontal/vertical rule lines, or content sect |
| coui-skeleton | Activate when creating loading placeholders, skeleton screens, pulse/shimmer loading states, or plac |
| coui-slider | Activate when creating single-value sliders (Slider widget) or dual-handle range sliders (Range widg |
| coui-sortable | Activate when creating sortable lists, drag-and-drop reordering, reorderable rows with drag handles, |
| coui-stacks | Activate when overlapping or layering elements (z-stack layouts, overlay badges, floating corner ele |
| coui-star-rating | Activate when creating star ratings, review scores, fractional/half-star ratings, or read-only ratin |
| coui-stat | Activate when creating statistic displays, dashboard metrics, KPI cards, or trend/change indicators |
| coui-status | Activate when creating status dot indicators, presence dots, online/offline/error state dots, or sys |
| coui-stepper | Activate when creating multi-step forms, wizard flows, checkout progress indicators, or step-by-step |
| coui-steps | Activate when creating read-only step progress indicators, order/delivery tracking displays, or stag |
| coui-swap | Activate when creating animated two-state toggles, state-switching icons, or rotate/flip swap effect |
| coui-swiper | Activate when creating swipe-to-reveal edge overlays โ a drawer or sheet panel revealed by a swipe g |
| coui-switch-field | Activate when creating switch fields, labeled toggles, settings on/off rows, or toggle switches with |
| coui-switcher | Activate when creating animated view-switchers, swipeable containers, or slide/fade transitions betw |
| coui-table | Activate when building data tables, grids, resizable tables, frozen-header/column tables, or tabular |
| coui-tabs | Activate when creating tab bars, tab navigation, or tabbed content panels using Tabs, Tabs.labels, o |
| coui-text | Activate when styling text in CoUI Flutter or Web โ semantic typography chains (.bodyMedium, .titleS |
| coui-text-block | Activate when rendering semantic prose text โ paragraphs, headings, blockquotes, preformatted/inline |
| coui-text-field | Activate when creating single-line text inputs, form fields with label/description/errorText, passwo |
| coui-textarea | Activate when creating multi-line text inputs, resizable text areas, or comment/memo/bio fields with |
| coui-theme | Activate when configuring CoUI theming across Flutter or Web โ ThemeData, CoreThemeData, CoreThemePr |
| coui-theme-controller | Activate when building theme pickers, theme-swatch grids, or palette selectors using the ThemeContro |
| coui-time-picker | Activate when creating time pickers, hour/minute/second selectors, 12-hour or 24-hour time inputs, o |
| coui-timeline | Activate when creating chronological event displays, activity logs, order tracking, history views, o |
| coui-toast | Activate when showing temporary notification messages, snackbar-style alerts, toast popups, success/ |
| coui-toggle | Activate when creating on/off switches, toggle controls, or switch settings rows using the Toggle wi |
| coui-tooltip | Activate when adding hover tooltips, contextual help bubbles, info hints on hover, or hint overlays |
| coui-tracker | Activate when creating segmented status bars, uptime monitors, habit/streak tracking displays, or bu |
| coui-tree | Activate when creating hierarchical tree views, file explorers, organizational charts, or nested cat |
| coui-triple-dots | Activate when rendering ellipsis dots, "more" overflow glyphs, loading-dot affixes, or evenly-spaced |
| coui-validation-badge | Activate when creating form validation indicators, password rule checklists, valid/invalid/pending s |
| coui-window | Activate when building desktop-style multi-window UIs โ floating, draggable, resizable, edge-snappab |
| coui-window-panel | Activate when creating desktop-style window frames, floating panels, or title bars with minimize/max |
๊ด๋ จ ํ๋ฌ๊ทธ์ธ#
| ํ๋ฌ๊ทธ์ธ | ์ค๋ช |
|---|---|
| cc-dev-cycle | Development cycle automation (Issue Cycle, Bug Cycle, Session, ZenHub, Agent Teams) |
์ค์น#
claude plugins install coco-de/skills/plugins/cc-coui