.axe-* CSS 계약을 같은 문서에서 읽습니다. 이름을 외우기보다, 만들려는 인터페이스의 역할로 탐색하세요.페이지 전체 레이아웃 chrome — 슬롯 골격과 Design/Gate 공용 workspace 표면.
페이지 하단 — 로고 + 링크 컬럼 + 소셜 + 하단 바.
Stack · Cluster · Grid · Container — inline flex/grid 재발명을 대체하는 레이아웃 프리미티브 4종.
반응형 2컬럼 master/detail 패턴(모바일에서 스택 + back).
키보드·a11y 갖춘 2-pane 리사이즈 컨테이너.
단일 날짜 선택 그리드(월 단위) — 외부 dep 0, 순수 날짜 산술 + role="grid".
Enter 전송·자동 높이 조절·툴바 슬롯을 갖춘 AI 채팅 입력창.
Radix 기반 tri-state 체크박스 (checked / unchecked / indeterminate).
타이핑으로 필터링하는 인라인 자동완성 (input + listbox).
Label · hint · error · 필수(*) 마크를 묶는 폼 필드 컴포지션 래퍼.
테마 토큰 기반 텍스트 입력 필드 — 단일행 Input 과 다행 Textarea.
Radix 기반 단일 선택 라디오 그룹 (roving tabindex).
옵션 목록에서 하나를 고르는 커스텀 셀렉트 (Radix Select 기반).
범위 안에서 단일 값을 고르는 슬라이더 (네이티브 range, dep 0).
on/off 를 즉시 전환하는 토글 스위치 (Radix Switch 기반).
collapsible disclosure 스택(single/multiple).
콘텐츠를 담는 elevated 표면 컨테이너.
단일 disclosure 영역(한 트리거 ↔ 한 컨텐츠 show/hide).
페이지 첫 화면 — eyebrow·title(h1)·subtitle·badges·actions·image 슬롯.
페이지 본문 한 블록 — eyebrow·heading·subtitle 헤더 + children 본문.
접근성 탭 네비게이션(가로/세로) — Radix Tabs 위 .axe-tabs 스타일.
user/agent 신원 배지 — 이미지 실패 시 initials 폴백.
상태·분류를 나타내는 소형 인라인 라벨.
인라인 코드 토큰 <code>.
복사 버튼이 있는 클라이언트 코드 블록.
임의 마크다운/HTML 트리에 AXE 타이포·간격·컬러를 입히는 본문 래퍼.
shiki 문법 하이라이팅 서버 코드 블록(RSC).
시맨틱 <table> 을 감싼 최소 표 — 가로 스크롤 래퍼 + 기본 표 스타일만.
되돌릴 수 없는 행동을 확인시키는 경고 모달 (Radix AlertDialog 기반).
⌘K 스타일 검색·명령 팔레트 오버레이.
우클릭(또는 길게 누르기)으로 대상 영역 위에 여는 컨텍스트 액션 메뉴 (Radix ContextMenu 기반).
포커스를 가두는 모달 다이얼로그 (Radix Dialog 기반).
버튼 클릭으로 여는 메뉴 — 액션·토글·라디오·단축키를 한 표면에 묶는다 (Radix DropdownMenu 기반).
hover(또는 focus)만으로 뜨는 가벼운 미리보기 카드 — @-멘션·링크 프리뷰용 (Radix HoverCard 기반).
트리거에 앵커되어 뜨는 인터랙티브 부동 패널 (Radix Popover 기반).
화면 가장자리에서 슬라이드인하는 드로어 패널 (Radix Dialog 기반).
화면 모서리에 쌓이는 비동기 알림 — sonner 래퍼 + AXE 토큰/클래스.
hover/focus 로 뜨는 가벼운 힌트 — 인터랙티브 컨텐츠는 담지 않는다 (Radix Tooltip 기반).
본문 흐름 안에 끼우는 시맨틱 강조 박스(info/success/warning/danger/note).
"데이터/결과 없음" 상태의 표준 placeholder — icon·title·description·action 4파트.
렌더 중 throw 를 격리·복구하는 React 에러 경계.
측정 가능한 비동기 작업의 진척 바 — determinate / indeterminate.
콘텐츠 도착 전 자리를 차지하는 placeholder — shimmer 로딩 시각.
진척률을 알 수 없는 로딩 시그널 — CSS-only 회전 원.
폼/영역 옆에 고정되는 동적 상태 전이 알림 — SR 자동 발화.
운영자 대시보드용 색 dot(+선택 label/timestamp) — 4-state 색 표준.
recharts 를 axe 토큰으로 감싼 얇은 wrapper — LineChart · BarChart · AreaChart 3종이 동일한 data/xKey/series API 를 공유.
정렬·페이지 슬라이싱·행 클릭을 갖춘 제네릭 데이터 표.
레코드 하나의 필드를 세로로 읽는 키·값 목록(<dl>).
인쇄 문서(.axe-doc)용 서버 SVG 데이터 비주얼 5종.
React.lazy + Suspense로 recharts 청크를 실제 렌더 시점까지 지연 로드하는 framework-neutral LazyLineChart · LazyBarChart · LazyAreaChart — props는 각 즉시 로드 차트와 동일.
운영자·에이전트 대시보드용 KPI 타일 — 값 + 증감(delta) + 미니 스파크라인.
run/job/agent 상태 행에 특화된 표 — 행 좌측 status dot + drill-down 클릭.
날짜로 묶은 활동 피드 — 좌측 dot + 수직 레일, 한국어 상대 날짜 헤더.
재귀 collapsible 트리 — 키보드 nav·단일 선택·텍스트 필터 내장(Radix 무의존).
Phase 8 AI-first 컴포지트 — 채팅 셸(AgentExecutor) + 점진 테이블(StreamingTable) + 멀티모달 입력(MultiModalChatInput).
아바타·역할 라벨·본문 슬롯을 가진 채팅 메시지 한 줄.
MessageBubble 확장 — 본문에 출처 인용·신뢰도 배지·토큰 메타·복사 버튼을 합친 RAG 응답 카드.
스트리밍 중인 LLM 응답을 Prose 로 감싸고 끝에 깜박이는 cursor 를 얹는 얇은 래퍼.
에이전트 도구 호출 하나를 접이식 카드로 — 이름·상태 배지 + 펼치면 input/output.
AI 응답 생성 중을 나타내는 3-dot wave 애니메이션 인디케이터.