AAtomic CSS

Claude Code Skills

Claude Code에서 슬래시 명령어로 Atomic CSS 관련 Skill을 호출하면, AI가 정확한 클래스를 사용하여 HTML을 생성합니다. 3가지 Skill을 제공합니다.

Skill이란?

Claude Code의 Skill은 슬래시 명령어(/skill-name)로 호출하는 확장 기능입니다. Skill을 설치하면 Claude가 특정 도메인의 규칙과 워크플로우를 완벽히 이해하고 정확한 결과를 생성합니다.

Skill 목록

/atomic — Atomic CSS 컴포넌트 생성

텍스트로 UI 컴포넌트를 설명하면, Atomic CSS 클래스만 사용하여 HTML을 생성합니다. 인라인 스타일이나 별도 CSS 파일 없이, 클래스명이 곧 스타일입니다.

/atomic Create a responsive card grid with hover effects

Output:

<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2rem">
    <div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10 hover-bs0px8px24px0px0-0-0-20 tall200msease">
        <h3 class="fs2rem fw700 mb8px c333333">Card Title</h3>
        <p class="fs1-4rem lh1-6 c666666">Card content</p>
    </div>
</div>
✓300+ 고정 클래스 + 무한한 동적 패턴의 완전한 클래스 레퍼런스
✓14개 반응형 브레이크포인트 + 32개 의사 클래스
✓Grid 우선 레이아웃, 4px 간격 리듬, HEX 6자리 컬러
✓MCP 서버로 3단계 자동 검증 (조회 → 생성 → 검증)

한국어 버전: /atomic-ko

/figma — Figma 디자인 → HTML 변환

Figma 디자인 URL을 입력하면, Figma MCP로 디자인을 읽고 Atomic CSS 클래스로 HTML을 생성합니다.

/figma https://www.figma.com/design/xxxxx?node-id=123-456
✓Figma HEX 색상값 그대로 사용, 반올림 없음
✓4px이 아닌 간격은 가장 가까운 4의 배수로 스냅
✓Figma Auto Layout → CSS Grid 자동 변환
✓9단계 사후 검증으로 모든 클래스 확인

필수 요구사항: Figma MCP가 연결되어 있어야 합니다. Claude Desktop 내장 또는 수동 설정이 필요합니다.

/markup — HTML 마크업 컨벤션 + 접근성

HTML 생성 또는 리뷰 시 일관된 마크업 컨벤션을 적용합니다. 네이밍, 접근성, 구조 규칙을 자동으로 검증합니다.

/markup Create a login form with email and password fields

Output:

<form class="dg gap2rem maxw40rem mxa">
    <fieldset class="dg gap16px">
        <legend>Login</legend>
        <div class="dg gap8px">
            <label for="inputEmail"><span>Email</span></label>
            <input type="email" id="inputEmail" />
        </div>
        <div class="dg gap8px">
            <label for="inputPassword"><span>Password</span></label>
            <input type="password" id="inputPassword" />
        </div>
        <button class="btn btn-blue">
            <span>Sign In</span>
        </button>
    </fieldset>
</form>
✓class: kebab-case, id: camelCase 네이밍 규칙
✓테이블 접근성 (caption, colgroup, th scope, aria-label)
✓시맨틱 구조 우선 (불필요한 div 중첩 제거)
✓Convention Lint MCP로 자동 검증

한국어 버전: /markup-ko

설치 방법

Option 1: Plugin Marketplace

Claude Code의 Plugin Marketplace에서 설치합니다.

# /atomic Skill
/plugin marketplace add Yoodaekyung/atomic-css-skill
/plugin install atomic@Yoodaekyung-atomic-css-skill

# /figma Skill
/plugin marketplace add Yoodaekyung/figma-skill
/plugin install figma@Yoodaekyung-figma-skill

# /markup Skill
/plugin marketplace add Yoodaekyung/markup-skill
/plugin install markup-convention@Yoodaekyung-markup-skill

Option 2: Git Clone

GitHub에서 직접 클론합니다.

# /atomic Skill
git clone https://github.com/Yoodaekyung/atomic-css-skill.git

# /figma Skill
git clone https://github.com/Yoodaekyung/figma-skill.git

# /markup Skill
git clone https://github.com/Yoodaekyung/markup-skill.git

Option 3: 직접 복사

각 Skill의 skills/ 디렉토리를 프로젝트의 .claude/skills/ 경로에 복사합니다.

MCP 서버 연동 (권장)

Skill과 MCP 서버를 함께 사용하면 최상의 결과를 얻을 수 있습니다. Skill이 규칙과 구조를 제공하고, MCP 서버가 실시간 검증을 담당합니다.

.mcp.json
{
    "mcpServers": {
        "atomic-css": {
            "type": "sse",
            "url": "https://mcp.atomiccss.dev/sse"
        },
        "convention-lint": {
            "type": "sse",
            "url": "https://mcp.atomiccss.dev/convention/sse"
        }
    }
}

참고: MCP 서버 설정은 MCP 문서를 참고하세요.

권장 워크플로우

3가지 Skill을 조합하면 디자인부터 코드까지 완전한 워크플로우를 구성할 수 있습니다.

1/figma — Figma 디자인에서 초기 HTML 구조 생성
2/atomic — 추가 컴포넌트나 레이아웃을 텍스트로 빠르게 생성
3/markup — 생성된 HTML의 컨벤션과 접근성 검증
MCPQuick StartNaming Conventionatomic-css-skillfigma-skillmarkup-skillVS Code Extension