cc-coui
CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드
CoUI cross-platform component library skills (Flutter + Jaspr Web)
Skills#
| 이름 | 설명 |
|---|---|
| coui-accordion | CoUI로 FAQ나 여러 개의 접이식 섹션을 만들 때 사용합니다. Accordion의 항목·제목·펼침 동작과 스타일을 구성합니다. |
| coui-alert | CoUI로 본문 안에 계속 표시되는 안내·성공·경고·오류 메시지를 만들 때 사용합니다. Alert의 상태와 닫기 동작을 구성합니다. 상단 공지는 Banner, 잠시 표시하는 알림은 |
| coui-aspect-ratio-box | CoUI에서 이미지·영상 영역의 가로세로 비율을 고정할 때 사용합니다. AspectRatioBox로 정사각형 썸네일이나 16:9 프레임 등 콘텐츠 영역을 구성합니다. |
| coui-autocomplete | CoUI로 입력 중에 추천어를 보여주는 자유 입력창을 만들 때 사용합니다. Autocomplete의 제안과 텍스트 반영 방식을 설정합니다. 정해진 항목만 선택해야 한다면 Selec |
| coui-avatar | CoUI로 사용자 프로필 이미지와 대체 이니셜을 표시할 때 사용합니다. Avatar, 상태 배지와 여러 아바타를 겹친 그룹을 구성합니다. |
| coui-badge | CoUI로 작은 상태 라벨이나 개수 배지를 표시할 때 사용합니다. Badge의 색상·크기·표현 종류를 선택합니다. |
| coui-banner | CoUI로 페이지 상단에 공지·경고 배너를 표시할 때 사용합니다. Banner의 상태와 스타일을 구성합니다. 본문 알림은 Alert, 잠시 뜨는 알림은 Toast를 참고합니다. |
| coui-breadcrumb | CoUI로 현재 페이지의 위치와 상위 경로를 표시할 때 사용합니다. Breadcrumb의 경로 항목과 이동 링크를 구성합니다. |
| coui-button | CoUI로 버튼을 만들거나 클릭 동작을 연결할 때 사용합니다. Button의 용도별 스타일, 크기와 모양을 선택합니다. |
| coui-calendar | CoUI로 달력과 날짜 선택 화면을 만들 때 사용합니다. Calendar의 단일·범위·다중 선택과 월·연도 이동을 구성합니다. |
| coui-card | CoUI로 상품·프로필 등 관련 정보를 카드로 묶을 때 사용합니다. Card의 이미지·제목·본문·하단 슬롯과 배경·테두리·크기를 구성합니다. |
| coui-card-image | CoUI로 이미지와 제목을 함께 보여주는 클릭 가능한 카드를 만들 때 사용합니다. CardImage의 배치·간격과 마우스 올림 효과를 구성합니다. |
| coui-carousel | CoUI로 이미지나 콘텐츠를 넘겨 보는 슬라이드쇼를 만들 때 사용합니다. Carousel의 전환 효과, 자동 재생과 화살표·점·드래그 조작을 구성합니다. |
| coui-chat | CoUI로 채팅 메시지와 대화 화면을 만들 때 사용합니다. Chat·ChatGroup·ChatBubble로 메시지 정렬, 그룹과 말풍선 스타일을 구성합니다. |
| coui-checkbox | CoUI로 다중 선택이나 약관 동의 체크박스를 만들 때 사용합니다. Checkbox의 선택·해제·일부 선택 상태와 크기를 설정합니다. |
| coui-chip | CoUI로 태그나 선택·제거 가능한 작은 라벨을 만들 때 사용합니다. Chip의 색·형태·강조와 닫기 동작을 구성합니다. |
| coui-chip-group | CoUI로 여러 칩 중 하나나 여럿을 고르는 목록을 만들 때 사용합니다. ChipGroup의 선택 방식·최대 개수와 줄바꿈·스크롤 배치를 설정합니다. |
| coui-chip-input | CoUI로 태그나 이메일 수신자처럼 여러 값을 입력받을 때 사용합니다. ChipInput으로 입력값을 칩으로 만들고 추가·삭제 동작을 구성합니다. |
| coui-code-diff | CoUI로 코드의 수정 전후 차이를 줄 단위로 표시할 때 사용합니다. CodeDiff로 추가·삭제·유지된 줄을 구분해 보여줍니다. |
| coui-code-snippet | CoUI로 구문 강조와 복사 기능이 있는 코드 예제를 표시할 때 사용합니다. CodeSnippet의 언어, 줄 번호와 복사 버튼 스타일을 구성합니다. |
| coui-collapsible | CoUI로 하나의 영역을 접거나 펼치는 UI를 만들 때 사용합니다. Collapsible의 펼침 상태와 상태 변경 동작을 연결합니다. |
| coui-color-picker | CoUI로 색상을 고르거나 색상 코드를 입력받을 때 사용합니다. ColorPicker의 색상 모드, 선택 창과 최근 색상 기록을 구성합니다. |
| coui-command | CoUI로 검색 가능한 명령 팔레트를 만들 때 사용합니다. Command의 명령 그룹·목록과 키보드 중심의 검색·실행 흐름을 구성합니다. |
| coui-composition-and-extension | 기존 CoUI 부품만으로 원하는 디자인을 표현하기 어려울 때 사용합니다. 스타일 슬롯과 부품 조합을 먼저 검토하고, 필요한 경우 기존 사용처와 호환되는 Flutter·Web 확장과 |
| coui-context-menu | CoUI로 우클릭이나 길게 누르기로 여는 메뉴를 만들 때 사용합니다. ContextMenu의 실행 항목·구분선과 포인터 기준 팝업을 구성합니다. |
| coui-countdown | CoUI로 바뀌는 카운트다운 숫자를 표시할 때 사용합니다. Countdown의 숫자 전환, 글자 스타일과 애니메이션 시간을 설정합니다. |
| coui-datalist | CoUI로 제안 목록과 자유 입력을 함께 제공할 때 사용합니다. Datalist에서 입력에 맞는 제안을 보여주고 목록 밖의 값도 받습니다. 목록 안에서만 고르는 경우는 Select |
| coui-date-picker | CoUI로 날짜 하나나 날짜 범위를 고르는 입력창을 만들 때 사용합니다. DatePicker·DateRangePicker의 팝오버·대화상자와 선택 상태를 구성합니다. |
| coui-description-card | CoUI로 주문·상품 정보 등을 이름과 값의 쌍으로 표시할 때 사용합니다. DescriptionCard와 DescriptionRow로 행의 배치·정렬·강조를 구성합니다. |
| coui-dialog | CoUI로 확인 요청이나 별도 내용을 담는 모달 대화상자를 만들 때 사용합니다. Dialog의 제목·본문·행동 버튼과 열기·닫기 흐름을 구성합니다. |
| coui-diff | CoUI로 두 이미지를 겹쳐 전후를 비교하는 화면을 만들 때 사용합니다. Diff의 분할선을 드래그하거나 키보드로 이동해 비교 영역을 조절합니다. |
| coui-divider | CoUI로 콘텐츠 사이의 수평·수직 구분선을 만들 때 사용합니다. Divider의 방향과 스타일을 정하고 필요한 경우 가운데 라벨을 넣습니다. |
| coui-dock | CoUI로 앱 하단의 주요 이동 메뉴를 만들 때 사용합니다. Dock의 항목·크기와 표시 스타일을 구성합니다. |
| coui-dot-indicator | CoUI로 슬라이드나 페이지의 현재 위치를 점으로 표시할 때 사용합니다. DotIndicator의 방향·스타일과 선택 변경 동작을 연결합니다. |
| coui-draggable-panel | CoUI로 화면 위에서 이동하거나 가장자리에 붙는 도구 패널을 만들 때 사용합니다. DraggablePanel의 드래그·도킹 상태와 패널 스타일을 구성합니다. |
| coui-drawer | CoUI로 화면 가장자리에서 열리는 패널이나 바텀 시트를 만들 때 사용합니다. Drawer의 열리는 방향, 표시 내용과 열기·닫기 동작을 구성합니다. |
| coui-dropdown-menu | CoUI로 버튼을 누르면 펼쳐지는 실행 메뉴를 만들 때 사용합니다. DropdownMenu의 항목·구분선과 팝업 스타일을 구성합니다. |
| coui-empty-state | CoUI로 목록이나 화면에 데이터가 없을 때의 안내를 만들 때 사용합니다. EmptyState에 아이콘·제목·설명과 다음 행동 버튼을 배치합니다. |
| coui-fab | CoUI로 화면 위에 떠 있는 주요 행동 버튼을 만들 때 사용합니다. Fab의 위치·크기와 펼쳐지는 추가 행동 메뉴를 구성합니다. |
| coui-fade-scroll | CoUI에서 스크롤할 내용이 더 있음을 가장자리 흐림 효과로 표시할 때 사용합니다. FadeScroll의 방향과 시작·끝 그라데이션을 설정합니다. |
| coui-fieldset | CoUI로 관련 입력 항목을 제목이 있는 영역으로 묶을 때 사용합니다. Fieldset의 그룹 제목, 테두리와 내부 스타일을 구성합니다. |
| coui-file-input | CoUI로 파일 선택이나 드래그 업로드 영역을 만들 때 사용합니다. FileInput의 허용 형식·다중 선택과 선택한 파일 표시·전달을 구성합니다. |
| coui-filter | CoUI로 여러 조건 중 하나를 고르는 필터 바를 만들 때 사용합니다. Filter의 항목·단일 선택과 선택 초기화 동작을 구성합니다. |
| coui-footer | CoUI로 페이지 하단의 안내와 링크 영역을 만들 때 사용합니다. Footer의 메뉴, 저작권·브랜드 표시와 가로·세로 배치를 구성합니다. |
| coui-form | CoUI로 라벨·도움말·오류 안내가 있는 입력 폼을 만들 때 사용합니다. Form·FormField·FormLabel을 구성하고 Flutter에서는 FormController와 검 |
| coui-formatted-input | CoUI로 전화번호·카드번호·날짜처럼 형식이 정해진 값을 입력받을 때 사용합니다. FormattedInput의 입력 구간과 마스크를 설정합니다. |
| coui-gap | CoUI에서 요소 사이의 여백을 디자인 토큰으로 맞출 때 사용합니다. Gap·MaxGap·SliverGap과 CoreSpace로 방향과 배치에 맞는 간격을 적용합니다. |
| coui-getting-started | Flutter·Jaspr 프로젝트에서 CoUI 사용을 시작할 때 사용합니다. 패키지 추가, 기본 컴포넌트·토큰, CoUIApp 테마와 플랫폼별 작성 규칙을 안내합니다. |
| coui-group | CoUI에서 요소를 겹치거나 정해진 위치에 배치할 때 사용합니다. Group으로 이미지 위 콘텐츠, 모서리 고정과 자유 배치 영역을 구성합니다. |
| coui-hero-section | CoUI로 랜딩 페이지의 큰 소개 영역을 만들 때 사용합니다. HeroSection의 배경·오버레이와 콘텐츠 정렬·높이·여백을 구성합니다. |
| coui-hover-card | CoUI로 요소에 마우스를 올렸을 때 정보 미리보기를 띄울 때 사용합니다. HoverCard의 표시 위치와 프로필 등 내부 콘텐츠·스타일을 구성합니다. |
| coui-hover-gallery | CoUI로 마우스 위치에 따라 이미지가 바뀌는 미리보기를 만들 때 사용합니다. HoverGallery의 이미지 목록과 전환 표시를 구성합니다. |
| coui-icon | CoUI로 아이콘을 표시하거나 아이콘 스타일을 통일할 때 사용합니다. Icon과 Iconify 아이콘 이름을 연결하고 크기·색상과 SVG 미리 읽기를 설정합니다. |
| coui-index | 만들려는 UI에 맞는 CoUI 컴포넌트를 찾을 때 사용합니다. 입력·표시·탐색·오버레이·배치 등 용도별로 부품을 분류해 해당 coui 스킬로 안내합니다. |
| coui-indicator | CoUI로 아이콘·아바타·카드 위에 작은 상태 표시를 얹을 때 사용합니다. Indicator의 점·개수·라벨을 모서리나 가장자리에 배치합니다. |
| coui-input | 기존 코드나 문서에서 CoUI Input 위젯을 찾거나 옮길 때 사용합니다. 제거된 Input 대신 TextField와 CoreInputType을 사용하도록 안내하며, 새 입력창은 |
| coui-input-otp | CoUI로 인증번호·OTP·PIN을 입력받을 때 사용합니다. InputOtp의 자릿수 표현, 크기와 오류 안내를 구성하고 플랫폼별 값 형식을 확인합니다. |
| coui-item-picker | CoUI로 화면 안의 목록·그리드에서 항목 하나를 선택할 때 사용합니다. ItemPicker의 검색·선택과 카드형 배치를 구성합니다. 팝업 선택창은 Select를 참고합니다. |
| coui-join | CoUI에서 버튼이나 입력 요소를 틈 없이 이어 붙일 때 사용합니다. Join으로 버튼 그룹, 페이지 이동 바와 입력창·버튼 조합의 경계를 구성합니다. |
| coui-kbd | CoUI로 키보드 키 모양의 표시를 만들 때 사용합니다. Kbd로 단일 키와 짧은 키 조합의 안내 배지를 구성합니다. |
| coui-keyboard-shortcut | CoUI로 Ctrl+S 같은 단축키 조합을 표시할 때 사용합니다. KeyboardShortcut으로 키 순서와 플랫폼별 표시 형식을 구성합니다. |
| coui-label | CoUI로 입력 항목의 이름과 필수 여부를 표시할 때 사용합니다. Label의 필수·비활성 상태와 입력창 연결을 구성합니다. |
| coui-link | CoUI로 본문이나 메뉴의 텍스트 링크를 만들 때 사용합니다. Link의 이동 대상과 색·스타일을 설정합니다. |
| coui-listing | CoUI로 연락처·설정·미디어 등의 세로 목록을 만들 때 사용합니다. Listing·ListRow·ListCol로 행·열 구성과 구분선 스타일을 맞춥니다. |
| coui-loading | CoUI로 처리 중임을 나타내는 로딩 표시를 만들 때 사용합니다. Loading의 회전·점·막대·맥박형 표현과 크기를 선택합니다. |
| coui-menu | CoUI로 화면 안의 메뉴나 사이드바 목록을 만들 때 사용합니다. Menu에 실행·체크·단일 선택 항목과 중첩 하위 메뉴를 구성합니다. |
| coui-menubar | CoUI로 데스크톱 앱 형태의 가로 메뉴바를 만들 때 사용합니다. Menubar의 최상위 메뉴와 중첩 드롭다운 항목을 구성합니다. |
| coui-mockup | CoUI로 앱·웹 화면을 기기나 창 모양의 프레임에 넣어 보여줄 때 사용합니다. 브라우저·휴대폰·코드·데스크톱 창 목업 중 알맞은 부품을 선택합니다. |
| coui-mockup-browser | CoUI로 웹 화면을 브라우저 창 형태로 보여줄 때 사용합니다. MockupBrowser의 주소창과 내부 미리보기 콘텐츠를 구성합니다. |
| coui-mockup-code | CoUI로 코드나 터미널 출력을 편집기 프레임에 표시할 때 사용합니다. MockupCode의 코드 줄·줄 번호와 창 스타일을 구성합니다. |
| coui-mockup-phone | CoUI로 앱 화면을 휴대폰 프레임 안에 표시할 때 사용합니다. MockupPhone의 크기·스타일과 내부 스크린샷·콘텐츠를 구성합니다. |
| coui-mockup-window | CoUI로 콘텐츠를 데스크톱 창 모양으로 보여줄 때 사용합니다. MockupWindow의 창 테두리·제목 영역과 내부 콘텐츠를 구성합니다. |
| coui-motion | CoUI에서 애니메이션 시간·속도 변화·스프링을 정할 때 사용합니다. CoreDuration·CoreEasing·CoreSpringConfig 토큰을 적용하고 직접 입력한 모션 값 |
| coui-multi-answer-card | CoUI로 퀴즈·설문의 선택 가능한 답변 카드를 만들 때 사용합니다. MultiAnswerCard의 값·선택 상태와 변경 동작을 연결합니다. |
| coui-multiple-choice | CoUI로 옵션 중 하나만 고르는 선택 바를 만들 때 사용합니다. MultipleChoice의 항목·선택 변경과 선택 해제 허용 여부를 구성합니다. |
| coui-navigation | CoUI로 앱이나 웹의 화면 이동 구조를 만들 때 사용합니다. 하단 바·사이드바·메가 메뉴·현재 경로·페이지 이동 중 목적에 맞는 탐색 부품을 선택합니다. |
| coui-navigation-bar | CoUI로 하단 바·사이드 레일·사이드바를 만들 때 사용합니다. NavigationBar의 표시 모드, 항목·라벨·정렬과 넘치는 메뉴의 처리를 구성합니다. |
| coui-navigation-menu | CoUI로 펼쳐지는 패널이 있는 상단 메가 메뉴를 만들 때 사용합니다. NavigationMenu의 메뉴별 콘텐츠·링크와 마우스 올림·클릭 동작을 구성합니다. |
| coui-number-ticker | CoUI로 값이 바뀔 때 움직이는 숫자 표시를 만들 때 사용합니다. NumberTicker의 숫자 형식과 전환 스타일을 설정합니다. |
| coui-object-input | CoUI로 날짜·시간·IP 주소처럼 여러 구간으로 나뉜 값을 입력받을 때 사용합니다. ObjectInput의 구간별 필드와 값 구조를 구성합니다. |
| coui-outlined-container | CoUI로 콘텐츠를 테두리·그림자·흐림 효과가 있는 영역에 담을 때 사용합니다. OutlinedContainer의 선 종류, 표면 효과와 내부 스타일을 구성합니다. |
| coui-overflow-marquee | CoUI에서 영역보다 긴 제목이나 문구를 자동으로 흘려 보여줄 때 사용합니다. OverflowMarquee의 방향·이동 속도·대기와 마우스 올림 시 동작을 구성합니다. |
| coui-pagination | CoUI로 여러 페이지에 나뉜 목록의 이동 버튼을 만들 때 사용합니다. Pagination의 페이지 번호·스타일과 페이지 변경 동작을 연결합니다. |
| coui-phone-input | CoUI로 국가번호가 포함된 전화번호 입력창을 만들 때 사용합니다. PhoneInput의 국가 선택과 번호 값을 구성합니다. |
| coui-popover | CoUI로 버튼이나 입력창에 연결된 작은 떠 있는 패널을 만들 때 사용합니다. Popover의 열리는 조건, 기준 위치·크기와 화면 경계 충돌 처리를 구성합니다. |
| coui-popup | CoUI로 메뉴 등에서 재사용할 떠 있는 패널의 바탕을 만들 때 사용합니다. Popup의 열림 상태, 콘텐츠 방향과 표면 스타일을 구성합니다. |
| coui-progress | CoUI로 작업의 진행률을 막대나 원형으로 표시할 때 사용합니다. Progress·RadialProgress의 값과 표시 스타일을 구성합니다. |
| coui-radio-group | CoUI로 하나의 값만 선택하는 라디오 버튼 목록을 만들 때 사용합니다. RadioGroup·Radio의 항목, 방향과 크기를 구성합니다. |
| coui-range | CoUI로 가격 등 최솟값·최댓값 범위를 선택할 때 사용합니다. Range의 두 손잡이, 선택 간격과 값 변경 동작을 구성합니다. |
| coui-rating | CoUI로 별점을 입력받거나 기본 별점 표시를 만들 때 사용합니다. Rating의 크기·선택 동작과 활성·비활성 스타일을 설정합니다. |
| coui-refresh-trigger | CoUI로 당겨서 새로고침하는 동작을 만들 때 사용합니다. RefreshTrigger의 방향과 당김·갱신 중·완료 상태를 구성합니다. |
| coui-resizable | CoUI로 구분선을 끌어 크기를 바꾸는 분할 화면을 만들 때 사용합니다. Resizable의 패널·방향·드래그 핸들과 크기 변경 동작을 구성합니다. |
| coui-responsive-grid | CoUI로 화면 폭에 따라 열 수가 바뀌는 그리드를 만들 때 사용합니다. ResponsiveGrid와 GridItem의 전환 기준·간격·셀 차지 범위를 설정합니다. |
| coui-scaffold | CoUI로 화면의 기본 틀을 구성할 때 사용합니다. Scaffold·AppBar에 헤더·푸터·사이드바와 떠 있는 행동 버튼·진행 표시를 배치합니다. |
| coui-scroll-area | CoUI로 높이나 너비가 제한된 스크롤 영역을 만들 때 사용합니다. ScrollArea의 방향·영역 크기와 얇은 스크롤바 스타일을 설정합니다. |
| coui-scrollbar | CoUI로 기존 스크롤 콘텐츠의 스크롤바를 조정할 때 사용합니다. Scrollbar의 축, 표시 조건과 손잡이 두께·스타일을 설정합니다. |
| coui-select | CoUI로 정해진 항목 중 하나를 고르는 드롭다운을 만들 때 사용합니다. Select의 옵션·패널 폭·배치와 키보드 접근성을 구성합니다. 자유 입력과 추천이 필요하면 Autocom |
| coui-separator | CoUI로 단순한 가로·세로 구분선을 넣을 때 사용합니다. Separator의 방향과 선 스타일을 설정해 콘텐츠 영역을 구분합니다. |
| coui-skeleton | CoUI로 로딩 중 콘텐츠의 자리와 형태를 보여줄 때 사용합니다. Skeleton의 사각형·원형·텍스트 표현과 LoadingRegion의 영역 단위 안내를 구성합니다. |
| coui-slider | CoUI로 숫자 하나나 값의 범위를 슬라이더로 선택할 때 사용합니다. Slider·Range의 선택 간격·값 변경 이벤트와 손잡이·트랙 스타일을 구성합니다. |
| coui-sortable | CoUI로 드래그해 순서를 바꾸는 목록을 만들 때 사용합니다. Sortable의 항목·드래그 핸들과 재정렬·제거 동작을 구성합니다. |
| coui-stacks | CoUI로 요소를 여러 겹으로 쌓거나 모서리에 고정할 때 사용합니다. Stacks·Position으로 겹침 순서, 위치와 영역 넘침 처리를 구성합니다. |
| coui-star-rating | CoUI로 소수·반쪽 값을 포함한 별점 표시나 입력을 만들 때 사용합니다. StarRating의 점수·선택 상태를 구성하고 제어형 위젯·컨트롤러를 연결합니다. |
| coui-stat | CoUI로 대시보드의 수치와 증감을 표시할 때 사용합니다. Stat에 지표 값, 변화 방향과 카드 스타일을 구성합니다. |
| coui-status | CoUI로 접속 여부나 시스템 상태를 작은 점으로 표시할 때 사용합니다. Status의 의미에 맞는 색상과 크기를 선택합니다. |
| coui-stepper | CoUI로 다단계 입력·결제의 진행과 단계 이동을 만들 때 사용합니다. Stepper의 항목과 가로·세로 배치를 구성합니다. |
| coui-steps | CoUI로 주문·배송 등 단계별 진행 상황을 표시할 때 사용합니다. Steps의 현재·완료 단계와 가로·세로 표시를 구성합니다. |
| coui-swap | CoUI로 두 상태의 아이콘이나 콘텐츠를 바꿔 보여줄 때 사용합니다. Swap의 켜짐·꺼짐 콘텐츠와 회전·뒤집기 전환 효과를 구성합니다. |
| coui-swiper | CoUI로 스와이프하면 가장자리에서 열리는 패널을 만들 때 사용합니다. Swiper의 방향과 드로어·시트 형태를 설정합니다. |
| coui-switch-field | CoUI로 이름과 설명이 붙은 켜기·끄기 설정을 만들 때 사용합니다. SwitchField의 라벨·토글 배치와 크기·스타일을 구성합니다. |
| coui-switcher | CoUI로 여러 자식 화면을 애니메이션으로 전환할 때 사용합니다. Switcher의 이동 방향과 슬라이드·페이드 효과를 구성합니다. |
| coui-table | CoUI로 데이터를 표로 표시할 때 사용합니다. Table·ResizableTable의 행·열, 셀 병합·고정·선택과 크기 조절을 구성합니다. |
| coui-tabs | CoUI로 탭과 탭별 콘텐츠를 만들 때 사용합니다. Tabs·TabPane의 항목, 선택 상태와 밑줄·알약형 스타일을 구성합니다. |
| coui-text | CoUI에서 글자 스타일과 줄바꿈을 지정할 때 사용합니다. Text의 용도별 스타일 체인, 굵기·색상·장식과 한국어 어절 줄바꿈·고정폭 숫자를 적용합니다. |
| coui-text-block | CoUI로 문단·제목·인용 등 구조가 있는 글을 표시할 때 사용합니다. TextBlock의 의미별 요소와 문단·제목·코드·캡션 스타일을 선택합니다. |
| coui-text-field | CoUI로 한 줄 입력창이나 비밀번호 필드를 만들 때 사용합니다. TextField의 라벨·도움말·오류와 지우기·비밀번호 표시 기능을 구성합니다. |
| coui-textarea | CoUI로 댓글·메모처럼 여러 줄의 텍스트를 입력받을 때 사용합니다. TextArea의 크기 조절, 라벨·설명과 오류 상태를 구성합니다. |
| coui-theme | Flutter·Jaspr 앱의 CoUI 테마를 연결하거나 조정할 때 사용합니다. CoUIApp·CoUIWeb의 색·글꼴·밝기 모드와 테마 토큰 접근 방식을 설정합니다. |
| coui-theme-controller | CoUI로 사용자가 테마를 고르는 화면을 만들 때 사용합니다. ThemeController의 테마 옵션·색상 미리보기와 선택기 스타일을 구성합니다. |
| coui-time-picker | CoUI로 시·분·초를 선택하는 시간 입력창을 만들 때 사용합니다. TimePicker의 12·24시간 형식과 팝오버·대화상자 방식을 설정합니다. |
| coui-timeline | CoUI로 활동이나 사건을 시간순으로 표시할 때 사용합니다. Timeline의 이벤트 항목과 시간 흐름에 따른 배치를 구성합니다. |
| coui-toast | CoUI로 잠시 나타났다가 사라지는 결과 알림을 만들 때 사용합니다. Toast의 상태·위치와 표시 동작을 구성합니다. 계속 보이는 본문 알림은 Alert, 상단 공지는 Banne |
| coui-toggle | CoUI로 켜기·끄기 스위치를 만들 때 사용합니다. Toggle의 선택 상태·크기·표현과 컨트롤러를 연결합니다. |
| coui-tooltip | CoUI로 요소에 마우스를 올렸을 때 짧은 도움말을 표시할 때 사용합니다. Tooltip의 위치와 말풍선 스타일을 설정합니다. |
| coui-tracker | CoUI로 시간 구간별 상태나 연속 기록을 표시할 때 사용합니다. Tracker의 구간과 정상·경고·위험·미확인 상태를 구성합니다. |
| coui-tree | CoUI로 파일·조직·카테고리의 계층형 목록을 만들 때 사용합니다. Tree의 노드, 펼침·접힘과 선택 동작을 연결합니다. |
| coui-triple-dots | CoUI로 더 보기 기호나 점 세 개 표시를 만들 때 사용합니다. TripleDots의 가로·세로 방향과 점의 스타일을 설정합니다. |
| coui-validation-badge | CoUI로 입력 검증 결과나 비밀번호 규칙 충족 여부를 표시할 때 사용합니다. ValidationBadge의 대기·유효·오류 상태와 크기를 구성합니다. |
| coui-window | CoUI로 이동·크기 조절이 가능한 여러 창을 만들 때 사용합니다. Window·WindowNavigator로 창의 상태, 드래그와 가장자리 맞춤 동작을 구성합니다. |
| coui-window-panel | CoUI로 제목 표시줄이 있는 데스크톱형 패널을 만들 때 사용합니다. WindowPanel의 최소화·최대화·닫기 버튼과 제목 영역 드래그를 구성합니다. |
관련 플러그인#
| 플러그인 | 설명 |
|---|---|
| cc-bricks | cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init |
| cc-compass | 코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내 |
| cc-coui-sync | CoUI 디자인 시스템의 Figma↔코드 동기화 — 캔버스 드리프트 감지(/absorb), 플러그인이 그리는 코드의 출처 측정(/status), 디자이너 결정의 코드 흡수 전 과정 |
| cc-coui-upgrade | 앱이 참조하는 coui 버전 올리기(Flutter 앱·Jaspr 웹 앱) — 형제 패키지를 한 커밋으로 고정하는 핀 계산·검사(coui_pin.py), 홉 계획, 시각 회귀 게이트 |
| cc-designer | 디자인 실무 레퍼런스 + 의사결정 스킬 (UI 디자인, 인터랙션 디자인, 정보 구조, 디자인 시스템, 디자인 옵스, 비주얼 크리틱). owl-listener/designer-ski |
| 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 확장) |
설치#
curl -fsSL https://skills.cocode.im/install.sh | bash -s -- --plugin cc-coui