majiayu000/claude-arsenal
xiaohongshu
xiaohongshu
286 148
View 
심볼 상태 컴포넌트 생성
create-symbol-state-component
인라인 SVG HTML을 상태 기반 동적 컴포넌트로 변환합니다. CSS 변수로 색상을 제어하고 런타임 API를 제공합니다.
SKILL.md
Full skill instructions
심볼 상태 컴포넌트 생성
인라인 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 })필수
관련 자료
More skills from majiayu000
majiayu000/claude-arsenal
technical-spec
technical spec
286 141
View majiayu000/claude-arsenal
product-ux-expert
product ux expert
286 133
View majiayu000/claude-arsenal
database-patterns
database patterns
286 119
View majiayu000/claude-skill-registry
agent-task-conductor
Conduct multi-agent task orchestration and workflow coordination.
663 1
View majiayu000/claude-skill-registry
conductor-setup
Initialize project with Conductor artifacts (product definition,
663 1
View majiayu000/claude-skill-registry
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
663 1
View majiayu000/claude-skill-registry
diagramming
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
663 1
View majiayu000/claude-skill-registry-data
h3-pg
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
23 1
View majiayu000/claude-skill-registry
conductor-development
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
663 1
View majiayu000/claude-skill-registry
conductor-status
Display project status, active tracks, and next actions
663 1
View majiayu000/claude-skill-registry
dockerization
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
663 1
View Popular AI tools
Video
Kaiber
Generate, edit, and beat-sync AI video with leading models in one workspace.
Paid
View Productivity
Vimcal
The world's fastest calendar for remote work
Free
View I
Images
IMGCreator.ai
Transform Your Design with AI Designer by ImgCreator.ai
Freemium
View Content & writing
Akool AI
Revolutionizing Video Production with AI-Powered Creativity
Paid
View Images
Clipdrop Uncrop
Extend an image past the frame and let AI fill the new aspect ratio.
Freemium
View Security
StarByFace
Discover your celebrity doppelgänger with StarByFace!
Free
View C
Finance
ChainClarity
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Freemium
View Coding & apps
Opus Clip
Opus.ai: Revolutionize Your Web Experience
Free
View