Cafe24 Smart Design
Description
Cafe24 Smart Design module, variable, and modifier reference for Claude Code skill
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
Cafe24 Smart Design Skill
AI 코딩 에이전트를 위한 카페24 스마트디자인 레퍼런스 툴킷
모듈 89개 · 변수 194개 · 수정자 13종 · 검증 가능한 Registry
공개 GitHub Pages 보기 · 이번 업데이트 · 빠른 시작 · 구성 · AI 도구별 사용법 · 소스 검증
소개
`cafe24-smart-design`는 카페24 쇼핑몰 스킨 작업에서 AI가 자주 틀리는 **모듈명, 변수 scope, modifier 문법, 실전 템플릿 패턴**을 한곳에 정리한 오픈소스 레퍼런스입니다.
단순 문서 모음이 아니라, AI 도구와 자동화가 재사용할 수 있도록 `data/*.json` registry와 검증 스크립트까지 포함합니다.
목표: Claude Code, Cursor, GitHub Copilot, Windsurf, GPT, Gemini 같은 AI 도구가 카페24 스마트디자인 코드를 더 안전하고 정확하게 생성하도록 돕기.
이번 업데이트에서 추가된 것
이번 확장은 기존 registry 숫자만 늘리는 업데이트가 아니라, 실제 작업자가 어디를 봐야 하는지 바로 알 수 있도록 **공개 뷰어의 신규 문서 진입점**을 정리한 업데이트입니다.
| 추가 영역 | 사람들이 바로 확인할 위치 | 무엇을 알 수 있나 |
|---|---|---|
| 공개 GitHub Pages | https://kimyoungwopo.github.io/cafe24-smart-design | 검색 가능한 레퍼런스 뷰어를 설치 없이 확인 |
| SEO/GEO 메타 | index.html, robots.txt, sitemap.xml, llms.txt |
검색엔진·AI 검색·에이전트가 canonical, 범위, 데이터 출처를 파악 |
| 공식 디자인 문서 맵 | index.html#official-map |
개발자센터 Design 문서군을 제작/운영/컴포넌트로 분류 |
| 스킨 제작 흐름 | index.html#skin-workflow |
구상 → 편집 → 로컬 확인 → 테스트 스킨 preview → 상품화 단계 |
| AI 안전 규칙 | index.html#ai-guardrails |
module, {$...}, action/form 변수, ec-base-* 보존 체크 |
| URL/템플릿 모달 | index.html#url-template-map |
URL별 수정 후보 파일·모듈·위험 포인트를 카드/모달로 확인 |
먼저 볼 링크: **https://kimyoungwopo.github.io/cafe24-smart-design**
무엇이 들어있나요
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Design Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Design Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Design Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Design Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Design Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations
Design Related Agents
Codemod Runner
Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css
Designguru
Expert Design Guidance & Analysis Specialist who provides professional UI/UX insights, design system guidance,
Html Css
| Web standards for semantic markup, maintainable styling, and accessibility. | - | [wshobson/agents](https://