Claude Code 라이믹스 다크모드 구현 스킬 — "다크모드 넣어줘" (rhymix-darkmode)

스킬 파일 제공

구매하시면 SKILL.md(다크모드 구현 규칙과 예시)와 설치 안내 README 가 담긴 압축 파일을 받으실 수 있습니다. 라이믹스 폴더의 .claude/skills/ 에 폴더째 두면 자동으로 인식됩니다.

Claude Code 라이믹스 다크모드 구현 스킬 —

레이아웃에 다크모드 토글을 붙이는 것 자체는 어렵지 않습니다. 어려운 건 라이믹스가 이미 가진 다크모드 체계와 맞추는 일입니다. 따로 localStorage 에 저장하면 코어의 색상 설정과 어긋나고, 새로고침할 때마다 화면이 한 번 하얗게 번쩍입니다.

왜 필요한가

라이믹스는 색상 모드를 rx_color_scheme 쿠키로 기억하고, <body> 에 color_scheme_dark·color_scheme_light 클래스를 붙입니다. 자바스크립트용 Rhymix.getColorScheme()·Rhymix.setColorScheme() 도 있습니다. AI 는 이걸 모르면 처음부터 새로 만듭니다. 이 스킬은 Claude Code 가 코어의 쿠키·클래스·API 에 맞춰 구현하도록 합니다.

무엇을 담았나

코어 API 정리 — JS 함수, body 클래스, 쿠키 이름·값, PHP 에서 읽는 법
깜빡임(FOUC) 방지 — 서버에서 쿠키를 읽어 첫 화면부터 맞는 색으로
CSS 변수 설계 — html.dark 와 body.color_scheme_dark 를 함께 받는 변수 세트
Tailwind·Alpine.js 연결 — darkMode: 'class' 설정과 토글 컴포넌트 예시
템플릿 v1·v2 조건문 — 다크모드일 때만 보이는 블록
피해야 할 패턴과 색상 팔레트 — 라이트·다크 9가지 용도별 색

핵심 — 서버에서 쿠키를 읽는다

쿠키에 값이 있으면 라이믹스는 서버에서 <body> 에 클래스를 붙여 내보내고, 그 뒤 코어 스크립트는 이미 붙은 클래스를 존중합니다. 그래서 레이아웃도 서버에서 같은 쿠키를 읽어 첫 화면을 그리면 깜빡임이 없습니다.

구매 후 전체 프롬프트 확인 가능

유료 프롬프트의 전문과 복사용 프롬프트는 구매자에게만 제공됩니다. 공개 본문에서는 구성, 활용 범위, 업데이트 내역만 확인할 수 있습니다.

토글 버튼은 Rhymix.setColorScheme(next) 로 쿠키와 body 클래스를 함께 바꾸고, Tailwind 용 html.dark 만 따로 맞춥니다.

코어 코드로 확인한 함정

자주 나오는 코드	실제
깜빡임 방지 스크립트를 `<head>` 에	`document.body` 가 아직 없어 오류. 라이믹스 레이아웃은 body 안에 출력되므로 레이아웃 파일 맨 위에
`@if($_COOKIE['rx_color_scheme'] ?? '' === 'dark')`	`===` 가 먼저 계산되어 쿠키가 light 여도 참. `(... ?? '') === 'dark'` 로 괄호
`document.cookie = 'rx_color_scheme=dark'`	경로가 없으면 현재 페이지 경로에만 저장. 코어 API 를 쓰거나 `path` 를 맞춘다

구성

파일	역할
`rhymix-darkmode/SKILL.md`	코어 API·body 클래스·쿠키, 깜빡임 방지, CSS 변수, Tailwind·Alpine.js 토글, 피해야 할 패턴, 색상 팔레트
`rhymix-darkmode/README.md`	설치 안내

설치

unzip rhymix-darkmode.zip
# 라이믹스 프로젝트에서만 쓰려면(권장) — 라이믹스 설치 폴더에서
mkdir -p .claude/skills && cp -r rhymix-darkmode .claude/skills/
# 모든 프로젝트에서 쓰려면
mkdir -p ~/.claude/skills && cp -r rhymix-darkmode ~/.claude/skills/

따로 부를 필요는 없습니다. 작업 요청에 다크모드, darkmode, 테마, color_scheme 같은 말이 나오면 Claude Code 가 스킬을 읽습니다.

요구 사항

Claude Code
Rhymix(라이믹스) — 쿠키·body 클래스·API 동작은 작성자 환경 2.1.34 코어 코드로 확인했습니다
전체 예시는 템플릿 v2(@version(2)) 기준이고, v1 조건문 예시도 함께 있습니다
Tailwind CSS·Alpine.js 는 선택입니다(쓸 때의 설정 예시만 담았습니다)

이런 분께

라이믹스 레이아웃·스킨에 다크모드 토글을 붙이려는 분
새로고침할 때마다 화면이 한 번 하얗게 번쩍이는 문제를 겪은 분
Tailwind 의 dark: 클래스와 라이믹스 색상 설정을 한 번에 맞추고 싶은 분