Claude Code Skills

Invoke Atomic CSS related Skills in Claude Code via slash commands, and AI generates HTML using accurate classes. Three Skills are available.

What is a Skill?

A Skill in Claude Code is an extension invoked via slash commands (/skill-name). Once installed, Skills enable Claude to fully understand domain-specific rules and workflows to produce accurate results.

Skill List

/atomic — Atomic CSS Component Generator

Describe a UI component in text, and it generates HTML using only Atomic CSS classes. No inline styles, no separate CSS files — class names are the styles.

/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>

✓Complete class reference with 300+ fixed classes + unlimited dynamic patterns

✓14 responsive breakpoints + 32 pseudo-classes

✓Grid-first layouts, 4px spacing rhythm, 6-digit HEX colors

✓3-step auto-validation via MCP server (lookup → generate → validate)

Korean version: /atomic-ko

/figma — Figma Design → HTML Conversion

Paste a Figma design URL, and it reads the design via Figma MCP and generates HTML with Atomic CSS classes.

/figma https://www.figma.com/design/xxxxx?node-id=123-456

✓Exact Figma HEX color values used, never rounded

✓Non-4px spacing snapped to nearest 4px multiple

✓Figma Auto Layout → CSS Grid automatic conversion

✓9-step post-validation verifies all classes

Requirement: Figma MCP must be connected. Use Claude Desktop built-in or manual configuration.

/markup — HTML Markup Convention + Accessibility

Applies consistent markup conventions when generating or reviewing HTML. Automatically validates naming, accessibility, and structure rules.

/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 naming convention

✓Table accessibility (caption, colgroup, th scope, aria-label)

✓Semantic structure first (eliminates unnecessary div nesting)

✓Auto-validation via Convention Lint MCP

Korean version: /markup-ko

Installation

Option 1: Plugin Marketplace

Install from the 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

Clone directly from 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: Copy Directly

Copy each Skill's skills/ directory to your project's .claude/skills/ path.

MCP Server Integration (Recommended)

Using Skills with MCP servers together yields the best results. Skills provide rules and structure, while MCP servers handle real-time validation.

.mcp.json

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

Note: See the MCP documentation for server setup.

Recommended Workflow

Combine the 3 Skills to create a complete workflow from design to code.

1/figma — Generate initial HTML structure from Figma design

2/atomic — Quickly generate additional components or layouts from text

3/markup — Validate conventions and accessibility of generated HTML