cc-coui#
CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
CoUI cross-platform component library skills (Flutter + Jaspr Web)
Skills#
| 이름 | 설명 |
|---|---|
| coui-accordion | 접을 수 있는 콘텐츠 섹션, 확장형 패널, FAQ 스타일 아코디언, 토글 리스트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Acc |
| coui-alert | 알림 메시지, 알림 패널, 닫을 수 있는 정보/성공/경고/오류 알림(본문/섹션 안에 계속 표시되는 인라인 패널 — 페이지 최상단 고정 스트립은 coui-banner, 잠깐 떴다 사 |
| coui-aspect-ratio-box | 콘텐츠를 고정된 가로세로 비율(16:9 비디오 프레임, 정사각형 썸네일, 4:3 이미지 플레이스홀더)로 제한할 때, CoUI Flutter(coui_flutter) 또는 CoUI |
| coui-autocomplete | 자동완성 입력창, 검색어 제안 드롭다운, 타이프어헤드 필드(타이핑한 자유 텍스트 자체가 값 — 목록 안에서만 골라야 하면 coui-select 참조)를 CoUI Flutter(co |
| coui-avatar | 사용자 아바타, 프로필 이미지, 이니셜 대체 표시, 아바타 위 상태 점 배지, 겹쳐진 아바타 스택을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_ |
| coui-badge | 상태 배지, 개수 표시기, 라벨 태그, 작은 인라인 표시기를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Badge 위젯과 CoreB |
| coui-banner | 알림 배너, 경고 바, 페이지 상단 정보/성공/경고/파괴적(destructive) 안내 스트립(페이지 최상단 고정 — 본문 안 인라인 알림은 coui-alert, 잠깐 떴다 사라지 |
| coui-breadcrumb | 브레드크럼 내비게이션 경로, 계층적 페이지 경로, 현재 위치 표시기를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Breadcrumb |
| coui-button | 버튼을 만들거나, 누름/클릭 이벤트를 처리하거나, 버튼의 변형(variant)/크기/모양을 선택할 때(CoreButtonVariant, CoreComponentSize, CoreB |
| coui-calendar | 캘린더 위젯, 날짜 선택 인터페이스, 범위 또는 다중 날짜 선택, 월/연 내비게이션을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 C |
| coui-card | 카드 컨테이너, 상품/프로필 카드, 탭 가능한 그룹화된 콘텐츠 표면을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 슬롯 기반 Card |
| coui-card-image | 클릭 가능한 이미지 카드, 썸네일 타일, 미디어 카드, 이미지 + 제목/부제목 레이아웃을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-carousel | 이미지 캐러셀, 콘텐츠 슬라이더, 자동재생/점 표시기/화살표 내비게이션/드래그 제스처가 있는 슬라이드쇼를 CoUI Flutter(coui_flutter) 또는 CoUI Web(co |
| coui-chat | 채팅 인터페이스, 메시지 버블, 대화 스레드, 메신저 UI를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Chat, ChatGroup |
| coui-checkbox | 체크박스, 3상태(indeterminate) 체크박스, 전체 선택 리스트, 약관 동의 체크박스를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_we |
| coui-chip | 칩, 태그, 필터 옵션, 선택 가능한 라벨, 제거/닫기 가능한 태그 요소를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Chip 위젯 |
| coui-chip-group | 선택 가능한 칩 그룹, 필터 칩 행, 태그 선택기, 단일/다중 선택 칩 리스트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Chip |
| coui-chip-input | 칩 입력, 태그 입력, 다중 값 텍스트 필드, 토큰 필드, 이메일 수신자 입력을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Chip |
| coui-code-diff | 줄 단위 코드 diff, 전/후 코드 비교, 추가/삭제된 줄 뷰어를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 CodeDiff 위젯 |
| coui-code-snippet | 구문 강조 코드 블록, 복사 가능한 코드 예제, 줄 번호가 있는 코드 표시를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 CodeSn |
| coui-collapsible | 접을 수 있는 섹션, 확장형 패널, 토글로 펼치는 공개 영역을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Collapsible과 e |
| coui-color-picker | 색상 선택기, 색상 셀렉터, hex/RGB/HSL/HSV 색상 입력, 색상 스와치를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr |
| coui-command | 커맨드 팔레트(Cmd+K 스타일의 검색 가능한 메뉴), 키보드 중심 액션 런처, 필터링된 명령 리스트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(cou |
| coui-composition-and-extension | CoUI 컴포넌트가 요구되는 디자인을 직접 커버하지 못할 때(커스텀 frosted/blur 표면, 투명 패널, 테두리 없는 투명 텍스트 에디터, 맞춤형 메뉴/팝오버 크롬, Figm |
| coui-context-menu | 우클릭 메뉴, 롱프레스 컨텍스트 액션, 포인터 기준 액션 리스트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 ContextMenu |
| coui-countdown | 페이드 전환 애니메이션이 있는 단일 숫자 카운트다운 값을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Countdown 위젯과 Cor |
| coui-datalist | 미리 정의된 제안 목록이 있는 텍스트 입력(브라우저 스타일의 datalist), 타이핑에 따라 필터링되는 제안 드롭다운, 또는 전체 값 선택기(목록 밖 값도 그대로 입력 가능 — |
| coui-date-picker | 날짜 선택기, 날짜 범위 선택기, 제어된(controlled) 날짜 선택을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr)에서 D |
| coui-description-card | 라벨-값 메타데이터 리스트, 주문/상세 요약 카드, 스펙 시트, 키-값 설명 패널을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 De |
| coui-dialog | 모달 다이얼로그, 알림 다이얼로그, 확인 프롬프트, 오버레이 콘텐츠 패널을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Dialog( |
| coui-diff | 전/후 비교 슬라이더, 이미지 비교 뷰어, 드래그 가능한 분할 화면 리빌을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Diff 위젯 |
| coui-divider | 시각적 구분선, 수평/수직 디바이더 라인, "OR" 라벨이 있는 디바이더, 콘텐츠 섹션 구분선을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_we |
| coui-dock | 하단 내비게이션 바, 탭 독, 앱 하단 메뉴를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Dock 위젯과 CoreDockItemDa |
| coui-dot-indicator | 점 표시기, 페이지 표시기, 캐러셀 위치 점, 페이지네이션 점을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 DotIndicator와 |
| coui-draggable-panel | 떠 있는 드래그 가능한 도구 팔레트, 가장자리에 도킹되는 오버레이 패널, PencilKit 스타일의 이동 가능한 핸들+패널 표면을 CoUI Flutter(coui_flutter) |
| coui-drawer | 사이드 드로어, 바텀 시트, 슬라이딩 엣지 오버레이 패널을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Drawer와 openCoDr |
| coui-dropdown-menu | 드롭다운 액션 메뉴, 트리거 기반 옵션 리스트, 버튼으로 트리거되는 메뉴 팝업을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Drop |
| coui-empty-state | 아이콘, 제목, 설명, 액션 버튼이 있는 빈 상태 뷰, 데이터 없음 플레이스홀더, 빈 리스트 표시기, 제로 상태 화면을 CoUI Flutter(coui_flutter) 또는 CoU |
| coui-fab | 플로팅 액션 버튼(FAB), 스피드 다이얼 FAB, 주요 플로팅 액션 메뉴를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Fab 위젯 |
| coui-fade-scroll | 넘치는 콘텐츠를 스크롤 가장자리에 부드러운 페이드 그라디언트가 있는 자동 스크롤 뷰포트로 감쌀 때(스크롤 페이드 마스크, 엣지 페이드, 오버플로 힌트) CoUI Flutter(co |
| coui-fieldset | 관련 폼 필드를 legend 제목이 있는 테두리 섹션으로 그룹화할 때 — 폼 그룹, 폼 섹션, 그룹화된 입력 — CoUI Flutter(coui_flutter) 또는 CoUI We |
| coui-file-input | 파일 입력, 파일 업로드 드롭존, 파일 선택기를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web / Jaspr)에서 FileInput과 Cor |
| coui-filter | 세그먼트형 필터 바, 상호 배타적인 단일 선택 옵션 그룹, 선택적 리셋 버튼이 있는 필터 컨트롤을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_w |
| coui-footer | 페이지 푸터, 푸터 내비게이션 링크 섹션, 사이트 전체 하단 바, 저작권/브랜딩 영역을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-form | 폼(양식)을 만들 때 — 폼 컨테이너, 필수 표시가 있는 라벨 필드, 오류/도움말 텍스트, 프로그래밍 방식 검증 — CoUI Flutter(coui_flutter) 또는 CoUI |
| coui-formatted-input | 마스킹되거나 구간이 나뉜 입력창 — 전화번호, 신용카드, 날짜, 커스텀 고정 형식 코드 — 를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web |
| coui-gap | 플렉스 자식 요소 사이에 간격을 추가하거나, 디자인 토큰 간격을 삽입하거나, Row/Column/Flex/sliver에서 공간을 채울 때 CoUI Flutter(coui_flutt |
| coui-getting-started | CoUI v0.127+(Flutter 또는 Web)로 새 프로젝트를 설정하거나, coui_flutter/coui_web 의존성을 추가하거나, 단일 배럴 임포트를 하거나, bare- |
| coui-group | 자식 요소를 절대 위치로 배치하거나 겹칠 때(Stack/Positioned 유사 레이아웃, 모서리 고정, 이미지 오버레이, 자유 배치 캔버스) CoUI Flutter(coui_fl |
| coui-hero-section | 랜딩 페이지 히어로 섹션, 전체 폭 인트로 배너, 가운데 정렬된 콘텐츠 블록이 있는 배경 이미지 헤더를 CoUI Flutter(coui_flutter) 또는 CoUI Web(cou |
| coui-hover-card | 마우스 오버로 뜨는 떠다니는 정보 카드, 사용자 프로필 미리보기, 풍부한 콘텐츠 호버 팝업을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web) |
| coui-hover-gallery | 마우스 오버 이미지 갤러리, 상품 이미지 호버 미리보기, 위치 기반 이미지 전환 디스플레이를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/ |
| coui-icon | Iconify 아이콘 세트(LucideIcons, BootstrapIcons, RadixIcons, HeroIcons)에서 벡터 아이콘을 렌더링할 때 CoUI Flutter(cou |
| coui-index | CoUI 컴포넌트 패밀리 인덱스 — Control·Form·Display·Navigation·Overlay·Layout·Menu 7개 패밀리에서 알맞은 coui-* 스킬로 라우팅합 |
| coui-indicator | 다른 요소(아바타, 아이콘, 카드)의 모서리/가장자리에 상태 점, 카운트 배지, "NEW" 라벨을 얹을 때 CoUI Flutter(coui_flutter) 또는 CoUI Web(c |
| coui-input | 한 줄짜리 텍스트 입력 필드(text, password, email, number, tel, url, search)를 coui_flutter 또는 coui_web(Jaspr)에서 |
| coui-input-otp | OTP 입력, PIN 코드 필드, SMS 인증번호 입력, 일회용 비밀번호 필드를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Inpu |
| coui-item-picker | 검색 가능한 단일 선택 항목 목록, 인라인 옵션 피커, 리스트/그리드 값 선택기(카드형 인라인 목록 — 드롭다운 팝업이 필요하면 coui-select 참조)를 CoUI Flutte |
| coui-join | 이어붙인 버튼 그룹, 세그먼트 스트립, 페이지네이션 바, 툴바 클러스터, 입력창-버튼 조합을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web) |
| coui-kbd | 키보드 키, 단축키 힌트, 키 조합 배지를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Kbd 위젯(Kbd.single)과 CoreK |
| coui-keyboard-shortcut | 키보드 단축키 시퀀스(예: Ctrl+S)를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 KeyboardShortcut 위젯과 Keyb |
| coui-label | 정적인 폼 필드 텍스트 라벨, 필수 표시(*), 비활성 라벨 상태, 라벨-입력 연결(htmlFor)을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui |
| coui-link | 텍스트 하이퍼링크, 인라인 링크, 내비게이션 링크, 외부 URL 링크, 스타일이 적용된 링크 텍스트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui |
| coui-listing | 세로 목록 레이아웃, 연락처/설정/미디어 행, 행-열 목록 구조를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Listing, Lis |
| coui-loading | 로딩 인디케이터, 스피너, 점 로더, 막대 로더, 펄스 애니메이션을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Loading 위젯과 |
| coui-menu | 정적 메뉴 패널, 사이드바 내비게이션 목록, 인라인 중첩 서브메뉴를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr)에서 Menu |
| coui-menubar | 데스크톱 스타일의 가로 메뉴바, 애플리케이션 메뉴 시스템, 중첩 드롭다운 패널이 있는 최상위 메뉴를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_ |
| coui-mockup | 기기 프레임 목업, 브라우저 창 프레임, 휴대폰 미리보기, 코드 편집기 프레임, 데스크톱 창 시뮬레이션을 CoUI Flutter(coui_flutter) 또는 CoUI Web(co |
| coui-mockup-browser | 브라우저 창 목업, 웹사이트 미리보기, URL 프레임이 있는 데모 콘텐츠를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 MockupB |
| coui-mockup-code | 정적 코드 블록, 터미널 출력 프레임, 줄 번호가 있는 코드 편집기 목업을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 MockupC |
| coui-mockup-phone | 휴대폰 기기 목업, 앱 스크린샷 프레임, 모바일 미리보기 프레임을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 MockupPhone |
| coui-mockup-window | OS 창 목업, 데스크톱 앱 프레임 미리보기, 신호등 점이 있는 macOS 스타일 창 크롬을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web) |
| coui-motion |
앱 코드에서 애니메이션 지속시간·이징·스프링을 정할 때 —
Duration(milliseconds: 300)
·
Curves.easeInOut
같은 하드코딩 대신 coui 모션
|
| coui-multi-answer-card | 퀴즈, 설문조사, 다중 선택 옵션 목록을 위한 선택 가능한 답변 카드를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 MultiAnsw |
| coui-multiple-choice | 단일 선택 옵션 그룹, 세그먼트 옵션 행, 라디오 버튼처럼 하나만 고르는 선택 바를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Mu |
| coui-navigation | 앱 내비게이션 — 하단 바, 사이드 레일, 사이드바, 메가 메뉴, 브레드크럼, 페이지네이션 — 을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_w |
| coui-navigation-bar | 내비게이션 바, 하단 내비게이션, 내비게이션 레일, 내비게이션 사이드바를 coui_flutter 또는 coui_web(Jaspr)에서 CoUI NavigationBar 컴포넌트 — |
| coui-navigation-menu | 호버/클릭 드롭다운 패널이 있는 가로형 상단 내비게이션 메가 메뉴를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 NavigationM |
| coui-number-ticker | 애니메이션 숫자 표시, 롤링 카운터, 통계 카운트업 애니메이션, 부드러운 숫자 값 전환을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-object-input | 구조화된 다중 구간 키-값 입력(날짜 YYYY/MM/DD, 시간 HH:MM, IP 주소, 카드번호 구간)을 CoUI Flutter(coui_flutter) 또는 CoUI Web(c |
| coui-outlined-container | 콘텐츠를 테두리 있는 패널, 아웃라인 박스, 파선/점선 프레임, 입체감 있는(elevated) 표면, 흐림 배경 컨테이너로 감쌀 때 CoUI Flutter(coui_flutter) |
| coui-overflow-marquee | 넘치는 텍스트를 자동 스크롤(마퀴/티커 라벨)하거나, 고정된 박스 안에서 긴 제목이 왕복하게 하거나, 호버 시 스크롤을 멈출 때 CoUI Flutter(coui_flutter) 또 |
| coui-pagination | 페이지 이동 컨트롤, 페이지로 나뉜 목록, 번호가 매겨진 페이지 바를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Pagination |
| coui-phone-input | 전화번호 입력, 국가 코드 선택기, 국제 전화 필드, 국가번호(dial code) 입력을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Ja |
| coui-popover | 팝오버 오버레이, 트리거 위젯에 앵커된 떠다니는 패널, 호버/포커스 인터랙션을 CoUI Flutter 또는 Web에서 Popover, PopoverController, CorePo |
| coui-popup | 메뉴, 드롭다운, 툴팁 유사 오버레이 뒤에 있는 떠다니는 패널 표면을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Popup 위젯과 |
| coui-progress | 선형 진행 막대, 백분율 인디케이터, 원형/방사형 진행 링을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Progress 또는 Rad |
| coui-radio-group | 라디오 버튼 그룹, 단일 선택 옵션 목록, 라디오 입력을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 RadioGroup, Radio |
| coui-range | 듀얼 핸들 range slider, 최소-최대 구간 선택기, 가격/값 범위 필터를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Ran |
| coui-rating | 별점 입력, 리뷰 점수 선택기, 읽기 전용 별점 표시를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Rating 위젯과 CoreRat |
| coui-refresh-trigger | pull-to-refresh 인터랙션, 새로고침 인디케이터, 스크롤 트리거 콘텐츠 업데이트를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web) |
| coui-resizable | 크기 조절 가능한 분할 패널, 드래그 가능한 구분선, 터치 드래그 핸들, 조절 가능한 레이아웃 패널을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui |
| coui-responsive-grid | 반응형 그리드 레이아웃, 다중 컬럼 카드나 대시보드 그리드, 브레이크포인트에 따라 컬럼 수가 바뀌는 레이아웃, 다중 셀 span을 CoUI Flutter(coui_flutter) |
| coui-scaffold | 화면 레이아웃 구조 — 헤더/푸터가 쌓인 앱 셸(AppBar), 사이드바, 플로팅 액션 버튼, 상단 로딩 진행 바 — 를 CoUI Flutter(coui_flutter) 또는 Co |
| coui-scroll-area | 넘치는 콘텐츠를 디자인 시스템의 슬림 스크롤바가 있는 스크롤 가능한 뷰포트로 감쌀 때, CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-scrollbar | 스크롤 가능한 콘텐츠를 디자인 시스템 스크롤바로 감싸거나, 스크롤 축을 제한하거나, thumb의 표시 여부/두께를 제어할 때, CoUI Flutter(coui_flutter) 또는 |
| coui-select | 드롭다운 선택 메뉴, 단일 값 옵션 선택기, 검색 가능한 select(목록 안에서만 선택 — 자유 텍스트 입력은 불가, 그런 경우는 coui-autocomplete/coui-dat |
| coui-separator | 단순한 시각적 구분선, 얇은 가로/세로 룰 라인, 콘텐츠 섹션 구분을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Separator와 |
| coui-skeleton | 로딩 placeholder, 스켈레톤 화면, pulse/shimmer 로딩 상태, placeholder 레이아웃을 CoUI Flutter(coui_flutter) 또는 CoUI W |
| coui-slider | 단일 값 슬라이더(Slider 위젯) 또는 듀얼 핸들 range slider(Range 위젯)를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_we |
| coui-sortable | 정렬 가능한 리스트, 드래그 앤 드롭 재정렬, 드래그 핸들이 있는 재정렬 가능한 행, 제거 가능한 드래그 아이템을 CoUI Flutter(coui_flutter) 또는 CoUI W |
| coui-stacks | 요소를 겹치거나 레이어링(z-stack 레이아웃, 오버레이 배지, 떠 있는 코너 요소, 이미지 스크림)하거나 자식을 절대 위치로 배치할 때, CoUI Flutter(coui_flu |
| coui-star-rating | 별점, 리뷰 점수, 소수/반쪽 별점, 읽기 전용 평점 표시를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr)에서 StarRatin |
| coui-stat | 통계 표시, 대시보드 지표, KPI 카드, 추세/변화 인디케이터를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Stat과 CoreSt |
| coui-status | 상태 점 인디케이터, 접속 상태 점, online/offline/error 상태 점, 시스템 상태 표시를 CoUI Flutter(coui_flutter) 또는 CoUI Web(co |
| coui-stepper | 다단계 폼, 위저드 플로우, 결제 진행 인디케이터, 단계별 내비게이션을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Stepper와 |
| coui-steps | 읽기 전용 단계 진행 인디케이터, 주문/배송 추적 표시, 단계 완료 시각화를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr)에서 |
| coui-swap | 애니메이션이 있는 두 상태 토글, 상태 전환 아이콘, 회전/뒤집기 스왑 효과를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Swap과 |
| coui-swiper | 스와이프로 드러나는 엣지 오버레이 — 스와이프 제스처로 열리는 drawer나 sheet 패널 — 를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_ |
| coui-switch-field | switch 필드, 라벨이 있는 토글, 설정 on/off 행, 설명이 붙은 토글 스위치를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-switcher | 애니메이션이 있는 뷰 전환기, 스와이프 가능한 컨테이너, 자식 뷰 간 slide/fade 전환을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_we |
| coui-table | 데이터 테이블, 그리드, 크기 조절 가능한 테이블, 헤더/컬럼 고정 테이블, header/body/footer 행과 cell span, hover/selection이 있는 표 레이 |
| coui-tabs | 탭 바, 탭 내비게이션, 탭 콘텐츠 패널을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Tabs, Tabs.labels, TabPan |
| coui-text | CoUI Flutter 또는 Web에서 텍스트를 스타일링할 때 — 시맨틱 타이포그래피 체인(.bodyMedium, .titleSmall, .headlineLarge), 굵기/색상/ |
| coui-text-block | 의미 기반 산문 텍스트 — 문단, 제목, 인용문, 서식 있는/인라인 코드, 흐린 캡션, 리드 부제 — 를 CoUI Flutter(coui_flutter) 또는 CoUI Web(co |
| coui-text-field | 한 줄 텍스트 입력, label/description/errorText가 있는 폼 필드, 표시 토글이 있는 비밀번호 필드, 지우기 가능한 입력을 CoUI Flutter(coui_f |
| coui-textarea | 여러 줄 텍스트 입력, 크기 조절 가능한 텍스트 영역, label/description/error 메타데이터가 있는 댓글/메모/자기소개 필드를 CoUI Flutter(coui_fl |
| coui-theme | Flutter나 Web 전반에서 CoUI 테마를 구성할 때 — ThemeData, CoreThemeData, CoreThemePresets, CoreColorScheme M3 시맨 |
| coui-theme-controller | 테마 선택기, 테마 스와치 그리드, 팔레트 선택기를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 ThemeController 위젯과 |
| coui-time-picker | 시간 선택기, 시/분/초 선택기, 12시간제나 24시간제 시간 입력, popover/dialog 시간 선택을 CoUI Flutter(coui_flutter) 또는 CoUI Web( |
| coui-timeline | 시간순 이벤트 표시, 활동 로그, 주문 추적, 히스토리 뷰, 시간순 레이아웃을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/Jaspr)에서 |
| coui-toast | 임시 알림 메시지, snackbar 스타일 알림, 토스트 팝업, success/error/destructive 알림, 자동으로 사라지는 메시지(오버레이로 잠깐 떴다 사라짐 — 페이 |
| coui-toggle | on/off 스위치, 토글 컨트롤, 스위치 설정 행을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Toggle 위젯과 ToggleCo |
| coui-tooltip | hover 툴팁, 상황별 도움말 말풍선, hover 시 표시되는 정보 힌트, 힌트 오버레이를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web) |
| coui-tracker | 구간으로 나뉜 상태 바, 가동 시간 모니터, 습관/연속 기록 추적 표시, 빌드 히스토리 바를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web/ |
| coui-tree | 계층형 트리 뷰, 파일 탐색기, 조직도, 중첩 카테고리 선택기를 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 Tree와 CoreTre |
| coui-triple-dots | 생략 부호 점, "more" 오버플로우 글리프, 로딩 점 접미사, 균등 간격의 점 배열을 CoUI Flutter(coui_flutter) 또는 CoUI Web(coui_web)에서 |
| coui-validation-badge | 폼 검증 인디케이터, 비밀번호 규칙 체크리스트, valid/invalid/pending 상태 칩, 입력 검증 피드백을 CoUI Flutter(coui_flutter) 또는 CoUI |
| coui-window | 데스크톱 스타일 다중 윈도우 UI — 떠 있고, 드래그 가능하고, 크기 조절 가능하고, 가장자리에 스냅되는 윈도우 — 를 CoUI Flutter(coui_flutter) 또는 Co |
| coui-window-panel | 데스크톱 스타일 윈도우 프레임, 플로팅 패널, minimize/maximize/close 컨트롤이 있는 타이틀 바를 CoUI Flutter(coui_flutter) 또는 CoUI |
관련 플러그인#
| 플러그인 | 설명 |
|---|---|
| cc-bricks | cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init |
| cc-compass | 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내 |
| cc-designer | 디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-skills에서 v |
| cc-dev | 개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams) |
| cc-flutter | Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트) |
| cc-pixel-loop | Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Comp |
| cc-security | 보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장) |
설치#
claude plugins install coco-de/skills/plugins/cc-coui