--- name: slur-guidelines description: SLUR Guidelines — SLUR UX/UI System의 문법(규칙) 스킬. 프론트엔드 UI 개발 표준 규칙. HTML/CSS/JS/컴포넌트 작성, 네이밍 규칙, 상태(data-state), 접근성, 반응형 구현 등 모든 UI 작업에 이 스킬을 사용한다. 사용자가 컴포넌트 만들기, HTML 구조 작성, CSS 스타일링, 기존 코드 리팩토링, 네이밍 규칙 적용, UI 설계, Next.js/React 컴포넌트 작성을 요청할 때 반드시 이 스킬을 참고한다. "슬러 시스템", "SLUR 시스템", "슬러 규칙", "슬러 가이드라인", "우리 시스템대로", "규칙대로 만들어줘" 라는 말이 나오면 무조건 이 스킬을 사용한다. 호칭 구분 — "슬러 시스템"(단독)은 이 스킬만 가리키며 기존 디자인은 그대로 두고 문법만 적용한다(동봉된 공통 레이어 assets/global.css는 룩 무관이므로 함께 쓴다). "슬러 디자인"이라고 하면 slur-design 스킬을 이 스킬과 함께 사용한다. --- # SLUR Guidelines — SLUR UX/UI System 문법 ## 적용 범위 (중요) 이 스킬은 **문법**만 규정한다 — 구조, 네이밍, 상태(`data-state`), CSS 작성 규칙, 단위·토큰 운영 원칙. **색·크기·모양 같은 시각 값(디자인)은 규정하지 않는다.** 문서와 예시에 등장하는 색상·수치는 설명용 예시일 뿐이며, 실제 값은 언제나 **해당 프로젝트의 기존 디자인과 토큰**을 따른다. 단, 실제 UI에 쓰는 색 조합은 WCAG 2.2 AA(일반 텍스트 4.5:1, 큰 텍스트·UI 경계·포커스·필수 그래픽 3:1)를 통과해야 하며 실패한 기존 값은 유지 대상이 아니다. 기존 디자인이 있는 프로젝트에 이 스킬을 적용해도 룩이 불필요하게 바뀌어서는 안 된다 — 바뀌는 것은 코드의 구조와 표기법뿐이다. SLUR Design System의 시각 어휘(토큰 값·컴포넌트 룩)가 필요한 경우에만 `slur-design` 스킬을 함께 쓴다. ### 층 구조와 이 스킬의 자리 SLUR은 네 층으로 나뉜다. 이 스킬은 **guidelines** 층이고, 나머지 셋은 `slur-design` 스킬이 담는다. | 층 | 내용 | 스킬 | |---|---|---| | **guidelines** | 규칙 문서(이 파일 + `references/`) + 동봉 파일 **`assets/global.css`**(공통 레이어) · **`assets/slur.js`**(동작 층) | `slur-guidelines` | | tokens | 디자인 토큰 CSS | `slur-design` | | components | 컴포넌트 CSS | `slur-design` | | patterns | 조합 레시피(후순위) | `slur-design` | 문서 사이트 `https://docs.slur.co.kr`가 두 스킬 폴더를 같은 경로로 서빙한다(`/skill/slur-guidelines/SKILL.md`, `/skill/slur-design/...`). 설치: `curl -fsSL https://docs.slur.co.kr/skill/install.sh | sh`(두 스킬 → `.claude/skills/`). 설치본의 버전은 각 스킬 폴더의 `VERSION` 파일(빌드 때 생성 — 저장소 원본에는 없다), 최신 버전은 `https://docs.slur.co.kr/skill/VERSION`. 디자인시스템 섹션 `/design/`, AI 퀵스타트 `/design/ai-quickstart/`. ### 동봉 파일 — `assets/global.css` (공통 레이어) 규칙이 전제하는 최소 CSS를 이 스킬이 직접 동봉한다: 리셋(iOS 글자 자동 확대 방지 `text-size-adjust` 포함), 폼 컨트롤 상속, **포커스 링 한 쌍**(`outline:none` + 대체 링, 링크·`[tabindex]`·`summary` 포함), `.a11y_hidden`, **4상태 스위치**(블록의 `data-state`가 `loading|empty|error`일 때만 `i_status` 상자 안의 해당 슬롯 `i_loading`/`i_empty`/`i_error`를 보이고 `i_body`를 숨김), `prefers-reduced-motion`. 색·크기는 토큰을 `var(--x, 폴백)`으로 **참조만** 하므로 토큰이 없는 프로젝트(규칙만 적용)에서도 그대로 쓸 수 있다. 룩은 바꾸지 않는다. - 프로젝트에 넣을 때: 이 스킬 폴더의 `assets/global.css`를 프로젝트 CSS 폴더로 복사해 **가장 먼저** ``한다. 로드 순서 `global.css → (tokens → components → patterns) → 레이아웃 → 컴포넌트 → 페이지 → 반응형`. - 프로젝트에 이미 리셋 파일이 있으면 두 개를 두지 않고 **합친다**(포커스 링·`a11y_hidden`·4상태 토글·reduced-motion은 반드시 남긴다). 파일명 관례는 `global.css`. `common.css` 같은 "공통 통"은 만들지 않는다 — 공통처럼 보이는 스타일은 `layout_*` 또는 컴포넌트로 간다. ### 동봉 파일 — `assets/slur.js` (동작 층) 네이티브가 해 주지 않는 동작만 담은 바닐라 JS(의존성 0, 프레임워크 무관, ~250줄). `references/accessibility.md` 5장의 규칙을 그대로 구현한 **참조 구현**이며, 클래스가 아니라 역할·속성(`role`, `popover`, `data-action`)에 위임 바인딩한다. | 모듈 | 바인딩 | 하는 일 | |---|---|---| | `tabs` | `[role="tablist"]` | ←→(또는 ↑↓)·Home/End, roving tabindex, 자동 활성화(`data-activation="manual"`로 끔) | | `menu` | `[popover][role="menu"]` | 트리거 기준 위치, 열리면 첫 항목 포커스, ↑↓·Home/End, Tab·항목 선택 시 닫기 | | `tooltip` | `[role="tooltip"][popover="manual"]` + 트리거 `aria-describedby` | 호버+포커스로 열림, Esc 닫힘, 툴팁 위 유지 | | `toast` | `.toast_message[role="status|alert"]` 선존재 컨테이너 | `slur.toast(text, { level, duration })` — 큐·자동 소멸·닫기 | | `drawer` | `[data-action="drawer_open"][aria-controls]` | 열린 동안 형제 `inert`, 첫 포커스, Esc·`drawer_close`로 닫고 연 버튼 복귀 | | `theme` | `[data-action="theme_toggle"]` | `` 전환 + `localStorage` 저장 | 동작의 우선순위는 **네이티브 → slur.js → 위임**이다: 모달은 `