Claude-skill-registry create-symbol-state-component

인라인 SVG HTML을 상태 기반 동적 컴포넌트로 변환합니다. CSS 변수로 색상을 제어하고 런타임 API를 제공합니다.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/create-symbol-state-component" ~/.claude/skills/majiayu000-claude-skill-registry-create-symbol-state-component && rm -rf "$T"

manifest: skills/data/create-symbol-state-component/SKILL.md

심볼 상태 컴포넌트 생성

인라인 SVG HTML을 상태 기반 동적 컴포넌트로 변환합니다.

data-status

속성과 CSS 셀렉터로 색상을 제어합니다.

기본 원칙은 create-standard-component 참조

⚠️ 작업 전 필수 확인

코드 작성 전 반드시 다음 파일들을 Read 도구로 읽으세요. 이전에 읽었더라도 매번 다시 읽어야 합니다 - 캐싱하거나 생략하지 마세요.

/RNBT_architecture/README.md - 아키텍처 이해
/.claude/guides/CODING_STYLE.md - 코딩 스타일

핵심 원리

SVG <defs>에 3세트 gradient 정의 (paint0-green, paint0-yellow, paint0-red)
  ↓
SVG path에 layer 클래스 부여 (layer-grad0, layer-fill-primary)
  ↓
CSS [data-status="xxx"] 셀렉터로 fill URL 제어
  ↓
JS에서 dataset.status만 변경 → CSS가 색상 전환

장점: innerHTML 교체 없이 속성만 변경 (DOM 효율적)

입출력

입력:

Figma_Conversion/Static_Components/[프로젝트명]/[컴포넌트명]/

출력:

components/[ComponentName]/
├── views/component.html       # SVG + 3세트 gradient + layer 클래스
├── styles/component.css       # [data-status] 셀렉터
├── scripts/
│   ├── register.js            # setStatus, getStatus API
│   └── beforeDestroy.js
├── preview.html
└── README.md

Layer 클래스 명명 규칙

클래스	용도
`layer-grad0` ~ `layer-grad9`	gradient fill
`layer-fill-primary`	주요 solid color
`layer-fill-secondary`	보조 solid color
`layer-stroke`	외곽선

핵심 API

// 상태 변경 - data-status 속성만 변경
function setStatus(config, status) {
    container.dataset.status = status;  // CSS가 색상 제어
    this._currentStatus = status;
}

// 현재 상태 반환
function getStatus() {
    return this._currentStatus;
}

금지 사항

❌ innerHTML 교체로 색상 변경
❌ 생성/정리 불일치

❌

function(response)

사용 →

function({ response })

필수