atomic-css-cli 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,610 @@
+# Atomic CSS CLI
+
+HTML 클래스명을 기반으로 CSS 규칙을 자동 생성하는 CLI 도구입니다.
+
+사전 정의된 패턴을 인식하여 각 클래스에 대응하는 스타일을 즉시 생성함으로써 CSS 작성의 번거로움을 획기적으로 줄여줍니다. 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스를 조합하여 다양한 디자인을 만들 수 있습니다.
+
+> **VSCode 확장도 있습니다**: [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.atomicss)에서 설치하면 파일 저장 시 자동으로 CSS가 생성됩니다.
+
+## 왜 Atomic CSS인가?
+
+- **제로 CSS 작성**: 별도 CSS 파일 작성이 불필요합니다. HTML 클래스명만으로 모든 시각적 스타일을 처리합니다.
+- **무제한 자유도**: 다른 유틸리티 프레임워크와 달리 미리 정해진 값에 제한받지 않습니다. `gap37px`, `w847px`, `fs1-3rem` 등 어떤 수치와 단위든 자유롭게 조합할 수 있습니다.
+- **직관적 네이밍**: CSS 속성과 값의 앞글자를 조합하는 규칙 하나만 알면, 문서 없이도 대부분의 클래스명을 추론할 수 있습니다.
+- **14단계 반응형**: QHD(2560px)부터 Ultra Small(420px)까지 14개 브레이크포인트를 지원하여 세밀한 반응형 대응이 가능합니다.
+- **32개 의사 클래스**: hover, focus, disabled, valid 등 32개 의사 클래스를 프리픽스 방식으로 간편하게 적용합니다.
+- **협업 효율**: HTML에서 바로 디자인 변경 및 조정이 가능하여, CSS 파일을 오가며 작업하는 시간이 대폭 줄어듭니다.
+- **제로 의존성**: 외부 CSS 라이브러리 없이 사용 가능합니다.
+- **스타일 일관성**: 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용하므로 스타일의 일관성이 자연스럽게 유지됩니다.
+
+## 핵심 컨셉
+
+CSS 속성과 값의 **앞글자를 조합**하여 클래스명을 만듭니다.
+
+```
+display: flex           → df
+justify-content: center → jcc
+align-items: center     → aic
+flex-direction: column  → fdc
+white-space: nowrap     → wsn
+text-overflow: ellipsis → toe
+object-fit: cover       → ofc
+```
+
+이 규칙만 알면 문서에 없는 속성도 추론할 수 있습니다.
+
+```html
+<div class="df jcc aic gap2rem p2rem bgFFFFFF br8px">Hello Atomic CSS!</div>
+```
+
+생성되는 CSS:
+
+```css
+.df {
+    display: flex;
+}
+.jcc {
+    justify-content: center;
+}
+.aic {
+    align-items: center;
+}
+.gap2rem {
+    gap: 2rem;
+}
+.p2rem {
+    padding: 2rem;
+}
+.bgFFFFFF {
+    background-color: #ffffff;
+}
+.br8px {
+    border-radius: 8px;
+}
+```
+
+---
+
+## 설치
+
+```bash
+npm install -g atomic-css-cli
+```
+
+## 사용법
+
+### 명령어
+
+| 명령어 | 설명 |
+| --- | --- |
+| `atomic-css build [dir]` | 파일을 스캔하고 CSS를 일괄 생성 (1회) |
+| `atomic-css watch [dir]` | 파일 변경을 감지하여 CSS 자동 생성 |
+| `atomic-css init` | `.atomic.json` 설정 파일 생성 |
+
+### 옵션
+
+| 옵션 | 설명 |
+| --- | --- |
+| `-o, --output <path>` | CSS 출력 디렉토리 |
+| `-d, --debug` | 미니파이되지 않은 `atomic.css`도 함께 생성 |
+| `-e, --extensions <exts>` | 스캔할 파일 확장자 (쉼표 구분) |
+| `-c, --config <path>` | `.atomic.json`이 위치한 프로젝트 루트 경로 |
+
+### 빠른 시작
+
+```bash
+# 1. 설정 파일 생성
+atomic-css init
+
+# 2. 일괄 빌드
+atomic-css build
+
+# 3. 워치 모드 (개발 중)
+atomic-css watch
+```
+
+### 사용 예시
+
+```bash
+# 현재 디렉토리의 HTML 파일을 스캔하여 CSS 생성
+atomic-css build
+
+# src 디렉토리를 스캔하고 dist/css에 출력
+atomic-css build src -o dist/css
+
+# tsx, jsx 파일도 포함하여 스캔
+atomic-css build src -e tsx,jsx,html
+
+# 디버그 모드 (미니파이 + 원본 CSS 모두 생성)
+atomic-css build -d
+
+# 워치 모드로 개발
+atomic-css watch src -o dist/css -e html,tsx
+```
+
+### Programmatic API
+
+```js
+const {
+    generateCSSRules,
+    parseClassName,
+    build,
+    watch,
+    extractClassesFromText,
+    loadConfig
+} = require("atomic-css-cli");
+
+// 텍스트에서 클래스 추출
+const classes = extractClassesFromText('<div class="df jcc aic">');
+
+// 클래스명 → CSS 규칙 생성
+const rules = generateCSSRules(["df", "jcc", "aic"]);
+
+// 프로그래밍 방식으로 빌드
+await build("./src", { output: "./dist/css" });
+```
+
+## 설정 파일 (.atomic.json)
+
+프로젝트 루트에 `.atomic.json` 파일을 생성하면 프로젝트별로 동작을 커스터마이징할 수 있습니다. 파일이 없으면 기본 설정으로 동작합니다.
+
+### 옵션 상세
+
+| 옵션 | 타입 | 기본값 | 설명 |
+| --- | --- | --- | --- |
+| `cssDirectoryPath` | `string` | `"/assets/css/common/"` | 생성될 CSS 파일의 저장 경로. 워크스페이스 루트 기준 상대 경로 |
+| `extensions` | `string[]` | `[".html"]` | 클래스를 추출할 대상 파일 확장자 |
+| `selectedLanguages` | `string[]` | `["html"]` | VSCode 확장 전용 옵션 (CLI에서는 미사용) |
+| `projects` | `array` | — | 멀티프로젝트 설정. 파일 경로에 따라 서로 다른 위치에 CSS를 생성 |
+
+### 기본 설정 (HTML 프로젝트)
+
+```json
+{
+    "cssDirectoryPath": "/assets/css/common/",
+    "extensions": [".html"]
+}
+```
+
+### React / Next.js
+
+```json
+{
+    "cssDirectoryPath": "/src/assets/css/",
+    "extensions": [".html", ".tsx", ".jsx"]
+}
+```
+
+### Vue / Nuxt
+
+```json
+{
+    "cssDirectoryPath": "/src/assets/css/",
+    "extensions": [".html", ".vue"]
+}
+```
+
+### PHP (Laravel, WordPress 등)
+
+```json
+{
+    "cssDirectoryPath": "/public/css/",
+    "extensions": [".html", ".php", ".blade.php"]
+}
+```
+
+### 멀티프로젝트 (다국어/멀티 출력)
+
+`projects` 배열을 사용하면 파일 경로에 따라 CSS 출력 위치를 분리할 수 있습니다.
+
+```json
+{
+    "cssDirectoryPath": "/assets/css/common/",
+    "extensions": [".html", ".php"],
+    "projects": [
+        {
+            "name": "korean",
+            "sources": ["/src/ko/", "/pages/ko/"],
+            "output": "/assets/css/ko/"
+        },
+        {
+            "name": "english",
+            "sources": ["/src/en/", "/pages/en/"],
+            "output": "/assets/css/en/"
+        }
+    ]
+}
+```
+
+| projects 옵션 | 타입 | 설명 |
+| --- | --- | --- |
+| `name` | `string` | 프로젝트 식별 이름 (CSS 파일 상단에 표시) |
+| `sources` | `string[]` | 이 프로젝트에 속하는 소스 디렉토리 경로 목록 |
+| `output` | `string` | 이 프로젝트의 CSS 출력 경로 |
+
+### HTML에 연결
+
+```html
+<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
+```
+
+---
+
+## 네이밍 규칙
+
+### 단위
+
+| 단위 | 표기 | 예시 |
+| --- | --- | --- |
+| px | `px` | `w100px`, `gap8px` |
+| % | `p` | `w50p` → `width: 50%` |
+| rem | `rem` | `fs1-5rem` → `font-size: 1.5rem` |
+| em | `em` | `p1em` |
+| vh / vw | `vh`, `vw` | `h100vh`, `w100vw` |
+| vmin / vmax | `vmin`, `vmax` | `w50vmin` |
+| fr | `fr` | `gtc1fr-2fr` |
+
+> `html { font-size: 10px }` 기준: `1rem = 10px` → `2rem = 20px`, `10rem = 100px`
+
+### 하이픈(-) 사용
+
+| 용도 | 예시 | 결과 |
+| --- | --- | --- |
+| 소수점 | `gap1-5rem` | `1.5rem` |
+| 값 구분 | `gtc1fr-2fr-1fr` | `1fr 2fr 1fr` |
+| 미디어 쿼리 | `sm-dn` | `@media(max-width:768px)` |
+| 의사 클래스 | `hover-bg000000` | `:hover` |
+
+### 특수 표기
+
+| 표기 | 설명 | 예시 | 결과 |
+| --- | --- | --- | --- |
+| `i` 접미사 | `!important` | `w100pxi` | `width: 100px !important` |
+| `neg-` 접두사 | 음수값 | `neg-mt10px` | `margin-top: -10px` |
+
+---
+
+## Display
+
+| 클래스 | CSS |
+| --- | --- |
+| `df` | `display: flex` |
+| `dif` | `display: inline-flex` |
+| `dg` | `display: grid` |
+| `db` | `display: block` |
+| `dib` | `display: inline-block` |
+| `di` | `display: inline` |
+| `dn` | `display: none` |
+| `dt` | `display: table` |
+| `dtc` | `display: table-cell` |
+
+## Flexbox
+
+| 클래스 | CSS |
+| --- | --- |
+| `fdr` / `fdrr` | `flex-direction: row / row-reverse` |
+| `fdc` / `fdcr` | `flex-direction: column / column-reverse` |
+| `fwn` / `fww` / `fwr` | `flex-wrap: nowrap / wrap / wrap-reverse` |
+| `jcfs` / `jcfe` / `jcc` | `justify-content: flex-start / flex-end / center` |
+| `jcsb` / `jcsa` / `jcse` | `justify-content: space-between / space-around / space-evenly` |
+| `ais` / `aifs` / `aife` / `aic` | `align-items: stretch / flex-start / flex-end / center` |
+| `fs0` / `fs1` | `flex-shrink: 0 / 1` |
+| `fg1` / `fg2` | `flex-grow: 1 / 2` |
+| `fa` / `fi` | `flex: auto / initial` |
+
+## Grid
+
+| 패턴 | 예시 | CSS |
+| --- | --- | --- |
+| 직접 지정 | `gtc1fr-2fr-1fr` | `grid-template-columns: 1fr 2fr 1fr` |
+| repeat | `gtcr3-1fr` | `repeat(3, 1fr)` |
+| auto-fit | `gtcrfit-minmax28rem-1fr` | `repeat(auto-fit, minmax(28rem, 1fr))` |
+| auto-fill | `gtcrfill-minmax250px-1fr` | `repeat(auto-fill, minmax(250px, 1fr))` |
+| rows | `gtrauto-1fr-auto` | `grid-template-rows: auto 1fr auto` |
+| rows repeat | `gtrr3-1fr` | `repeat(3, 1fr)` |
+| minmax | `gtcminmax100px-1fr` | `minmax(100px, 1fr)` |
+| calc | `gtccalc100p-200px-1fr` | `calc(100% - 200px) 1fr` |
+
+## Spacing
+
+| 패턴 | 속성 |
+| --- | --- |
+| `m`, `mt`, `mr`, `mb`, `ml` | margin (방향) |
+| `p`, `pt`, `pr`, `pb`, `pl` | padding (방향) |
+| `gap`, `rg`, `cg` | gap, row-gap, column-gap |
+| `mta`, `mra`, `mba`, `mla` | margin-방향: auto |
+| `p10px-20px` | padding shorthand (2~4값) |
+
+> 간격값은 4의 배수 권장: `4px`, `8px`, `12px`, `16px`, `2rem`, `2-4rem`...
+
+## Color
+
+| 패턴 | 예시 | CSS |
+| --- | --- | --- |
+| `c` + HEX 6자리 | `cFFFFFF` | `color: #FFFFFF` |
+| `bg` + HEX 6자리 | `bg000000` | `background-color: #000000` |
+| `bc` + HEX 6자리 | `bcDDDDDD` | `border-color: #DDDDDD` |
+| RGBA | `c255-0-0-50` | `color: rgba(255,0,0,0.5)` |
+| RGBA 배경 | `bg0-0-0-80` | `background-color: rgba(0,0,0,0.8)` |
+| Opacity | `o50`, `o80` | `opacity: 0.5`, `opacity: 0.8` |
+
+> 소문자 HEX 입력 시 자동 대문자 변환: `cffffff` → `cFFFFFF`
+
+## Border
+
+| 패턴 | 예시 | CSS |
+| --- | --- | --- |
+| 단축 | `b1pxsolidDDDDDD` | `border: 1px solid #DDDDDD` |
+| 방향 | `bt2pxdashed000000` | `border-top: 2px dashed #000000` |
+| radius | `br8px`, `br1rem` | `border-radius` |
+| none | `bn` | `border: none` |
+| 방향 제거 | `bt0`, `br0`, `bb0`, `bl0` | `border-방향: 0` |
+
+## Shadow
+
+| 패턴 | 예시 | CSS |
+| --- | --- | --- |
+| Box Shadow (HEX) | `bs0px4px12px0px0-0-0-10` | `box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1)` |
+| Box Shadow (RGBA) | `bs2px4px10px0pxFF0000` | `box-shadow: 2px 4px 10px 0px #FF0000` |
+| Inset | `bsi...` | `box-shadow: inset ...` |
+| Text Shadow | `ts0px0px10pxFF00FF` | `text-shadow: 0px 0px 10px #FF00FF` |
+| None | `bsn` | `box-shadow: none` |
+
+## Transform
+
+| 클래스 | CSS |
+| --- | --- |
+| `ttx10px` | `transform: translateX(10px)` |
+| `tty20px` | `transform: translateY(20px)` |
+| `tr45deg` | `transform: rotate(45deg)` |
+| `ts1-5` | `transform: scale(1.5)` |
+| `ts1-5_2` | `transform: scale(1.5, 2)` |
+
+## Transition
+
+| 클래스 | CSS |
+| --- | --- |
+| `tall200msease` | `transition: all 200ms ease` |
+| `tall300ms` | `transition: all 300ms` |
+| `topacity500ms` | `transition: opacity 500ms` |
+| `tall200mscb0-50-50-100` | `transition: all 200ms cubic-bezier(...)` |
+| `tnone` | `transition: none` |
+
+## Filter
+
+| 클래스 | CSS |
+| --- | --- |
+| `fb5px` | `filter: blur(5px)` |
+| `fbr120p` | `filter: brightness(120%)` |
+| `fc80p` | `filter: contrast(80%)` |
+| `fg100p` | `filter: grayscale(100%)` |
+| `fhr90deg` | `filter: hue-rotate(90deg)` |
+| `fi100p` | `filter: invert(100%)` |
+| `fo80p` | `filter: opacity(80%)` |
+| `fsa150p` | `filter: saturate(150%)` |
+| `fse50p` | `filter: sepia(50%)` |
+| `fds2px4px8pxFF0000` | `filter: drop-shadow(2px 4px 8px #FF0000)` |
+
+> Backdrop Filter: `bf` 접두사 동일 (예: `bfb10px` → `backdrop-filter: blur(10px)`)
+
+## 미디어 쿼리 (14개 Breakpoint)
+
+모든 클래스에 프리픽스를 붙여 반응형 적용:
+
+| 프리픽스 | Breakpoint | | 프리픽스 | Breakpoint |
+| --- | --- | --- | --- | --- |
+| `qh-` | 2560px | | `rg-` | 1080px |
+| `uh-` | 2160px | | `md-` | 1024px |
+| `kk-` | 2048px | | `sm-` | 768px |
+| `fh-` | 1920px | | `es-` | 640px |
+| `hl-` | 1800px | | `us-` | 420px |
+| `sl-` | 1700px | | | |
+| `ul-` | 1600px | | | |
+| `el-` | 1440px | | | |
+| `lg-` | 1280px | | | |
+
+```html
+<!-- 3열 → 2열 → 1열 반응형 -->
+<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
+    <!-- 반응형 숨김 -->
+    <div class="db sm-dn">데스크탑만</div>
+    <div class="dn sm-db">모바일만</div>
+</div>
+```
+
+## Pseudo Class (32개)
+
+모든 클래스에 프리픽스를 붙여 상태별 스타일 적용:
+
+| 카테고리 | 프리픽스 |
+| --- | --- |
+| 인터랙션 | `hover-`, `focus-`, `active-`, `focus-within-`, `focus-visible-` |
+| 입력 상태 | `disabled-`, `enabled-`, `checked-`, `indeterminate-` |
+| 폼 검증 | `valid-`, `invalid-`, `required-`, `optional-`, `in-range-`, `out-of-range-` |
+| 링크 | `link-`, `visited-`, `any-link-`, `target-` |
+| 기타 | `placeholder-shown-`, `empty-`, `read-only-`, `fullscreen-`, `autofill-`, `modal-` 등 |
+
+```html
+<button class="bg007BFF hover-bg0056B3 active-ts0_98 disabled-o50 tall200msease cp">버튼</button>
+```
+
+## Pseudo Element
+
+| 키워드 | CSS |
+| --- | --- |
+| `before` | `::before` |
+| `after` | `::after` |
+
+## 관계 선택자
+
+부모 요소의 상태에 따라 자식/형제 요소를 스타일링:
+
+| 결합자 | 키워드 | CSS |
+| --- | --- | --- |
+| `>` 직접 자식 | `child` | `.trigger:hover > target` |
+| ` ` 모든 자손 | `children` | `.trigger:hover target` |
+| `+` 인접 형제 | `next` | `.trigger:hover + target` |
+| `~` 일반 형제 | `siblings` | `.trigger:hover ~ target` |
+
+```html
+<!-- card에 hover 시 자식 img에 scale 적용 -->
+<div class="card-hover-child-img-ts1-1"></div>
+```
+
+## 기타 클래스
+
+| 클래스 | CSS |
+| --- | --- |
+| `ar16-9` | `aspect-ratio: 16/9` |
+| `lc3-1-5rem` | 3줄 제한 (line-clamp) |
+| `fw100`~`fw900` | `font-weight` |
+| `zi10`, `zi999` | `z-index` |
+| `w100p`, `h100vh` | `width: 100%`, `height: 100vh` |
+| `wa`, `ha` | `width: auto`, `height: auto` |
+| `mxa` | `margin-left: auto; margin-right: auto` |
+| `cp` | `cursor: pointer` |
+| `usn` | `user-select: none` |
+| `pen` | `pointer-events: none` |
+| `oh` | `overflow: hidden` |
+| `wsn` | `white-space: nowrap` |
+| `toe` | `text-overflow: ellipsis` |
+
+---
+
+## 실전 예제
+
+### Flexbox 센터 정렬
+
+```html
+<div class="df jcc aic gap2rem p2rem">
+    <span>센터 정렬된 콘텐츠</span>
+</div>
+```
+
+### 반응형 그리드 카드
+
+```html
+<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2rem">
+    <div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 1</div>
+    <div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 2</div>
+    <div class="bgFFFFFF br8px p2rem bs0px4px12px0px0-0-0-10">카드 3</div>
+</div>
+```
+
+### 글래스모피즘
+
+```html
+<div class="bfb10px bg255-255-255-20 br16px p2-4rem">
+    <h2 class="fs2-4rem fw700 mb16px cFFFFFF">제목</h2>
+    <p class="fs1-6rem lh1-6 c255-255-255-80">내용</p>
+</div>
+```
+
+### 호버 버튼
+
+```html
+<button
+    class="
+    p12px-2-4rem bg007BFF cFFFFFF br8px fs1-6rem fw600
+    cp tall200msease hover-bg0056B3 active-ts0_98
+    md-p8px-2rem md-fs1-4rem
+"
+>
+    클릭하세요
+</button>
+```
+
+### 풀스크린 레이아웃
+
+```html
+<div class="dg gtrauto-1fr-auto h100vh">
+    <header class="p16px bg000000 cFFFFFF">헤더</header>
+    <main class="p2rem oa">콘텐츠</main>
+    <footer class="p16px bgF0F0F0">푸터</footer>
+</div>
+```
+
+### 사이드바 레이아웃
+
+```html
+<div class="dg gtc25rem-1fr gap2rem md-gtc1fr">
+    <aside class="p2rem bgF5F5F5 md-order2">사이드바</aside>
+    <main class="p2rem md-order1">콘텐츠</main>
+</div>
+```
+
+### 텍스트 말줄임
+
+```html
+<p class="lc3-1-5rem">이 텍스트는 3줄까지만 표시되고 나머지는 ...으로 말줄임 처리됩니다.</p>
+```
+
+## AI Integration — MCP Server
+
+> **AI가 Atomic CSS를 완벽하게 이해합니다.**
+
+Atomic CSS는 AI 코딩 도구를 위한 전용 **MCP(Model Context Protocol) 서버**를 제공합니다. 이것은 단순한 문서 참조가 아닙니다. AI가 Atomic CSS의 모든 클래스 체계를 **실시간으로 조회하고, 검색하고, 생성**할 수 있도록 설계된 AI 전용 인터페이스입니다.
+
+### 왜 MCP인가?
+
+일반적인 CSS 프레임워크를 AI와 사용할 때의 문제:
+
+- AI가 클래스명을 **추측**하거나 **잘못된 클래스**를 생성
+- 문서를 매번 컨텍스트에 넣어야 하는 **토큰 낭비**
+- 프레임워크 업데이트 시 AI가 **구버전 정보**를 사용
+
+**Atomic CSS + MCP는 이 문제를 완전히 해결합니다:**
+
+- AI가 클래스명을 추측하지 않고 MCP 서버에 **직접 질의**
+- 항상 **최신 데이터** 기반으로 정확한 클래스 반환
+- 컨텍스트 오염 없이 **필요한 순간에만** 정보를 가져옴
+
+### 제공 도구 (Tools)
+
+| 도구 | 설명 | 예시 입력 |
+| --- | --- | --- |
+| `lookup_class` | 클래스명 → CSS 변환 결과 조회 | `df jcc aic gap2rem` |
+| `search_by_css` | CSS 속성/값으로 클래스 역검색 | `justify-content`, `hidden`, `shadow` |
+| `list_classes` | 카테고리별 전체 클래스 목록 | `flexbox`, `grid`, `pseudo`, `media` |
+
+### 설정 방법
+
+프로젝트 루트에 `.mcp.json` 파일을 생성하면 **설정 없이 즉시 연동**됩니다:
+
+```json
+{
+    "mcpServers": {
+        "atomic-css": {
+            "type": "sse",
+            "url": "https://mcp.atomiccss.dev/sse"
+        }
+    }
+}
+```
+
+> `https://mcp.atomiccss.dev`는 Atomic CSS 전용 원격 MCP 서버입니다. 로컬 설치가 필요 없으며, 인터넷 연결만으로 모든 AI 도구에서 사용할 수 있습니다.
+
+### 지원 도구
+
+| AI 도구 | 설정 파일 | 비고 |
+| --- | --- | --- |
+| **Claude Code** | `.mcp.json` | 프로젝트 루트에 배치 |
+| **Cursor** | `.cursor/mcp.json` | SSE 타입 지원 |
+| **Windsurf** | `.windsurf/mcp.json` | SSE 타입 지원 |
+
+---
+
+## 문서 및 링크
+
+| | 링크 | 설명 |
+| --- | --- | --- |
+| Web | [atomiccss.dev](https://atomiccss.dev) | 공식 문서 — 전체 클래스 레퍼런스, 실시간 미리보기 |
+| MCP | [mcp.atomiccss.dev](https://mcp.atomiccss.dev) | AI 전용 MCP 서버 — Claude, Cursor 등에서 즉시 연동 |
+| Marketplace | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.atomicss) | VSCode 확장 설치 |
+| npm | [atomic-css-cli](https://www.npmjs.com/package/atomic-css-cli) | npm 패키지 |
+
+---
+
+## 지원 및 문의
+
+eorud0713@gmail.com

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "atomic-css-cli",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "Atomic CSS generator CLI — watch files and generate atomic.min.css automatically",
     "main": "index.js",
     "bin": {