npm - atomic-css-cli - Versions diffs - 1.0.0 → 1.0.2 - Mend

atomic-css-cli 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +838 -0
package/package.json +1 -1

package/README.md ADDED Viewed

@@ -0,0 +1,838 @@
+# Atomic CSS CLI
+HTML 클래스명을 기반으로 CSS 규칙을 자동 생성하는 CLI 도구입니다.
+사전 정의된 패턴을 인식하여 각 클래스에 대응하는 스타일을 즉시 생성함으로써 CSS 작성의 번거로움을 획기적으로 줄여줍니다. 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스를 조합하여 다양한 디자인을 만들 수 있습니다.
+> **VSCode 확장도 있습니다**: [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.atomicss)에서 설치하면 파일 저장 시 자동으로 CSS가 생성됩니다.
+---
+## 설치
+```bash
+# 글로벌 설치 (어디서든 atomic-css 명령 사용)
+npm install -g atomic-css-cli
+# 또는 프로젝트 로컬 설치
+npm install --save-dev atomic-css-cli
+```
+로컬 설치 시에는 `npx`를 붙여 실행합니다:
+```bash
+npx atomic-css build
+npx atomic-css watch
+```
+설치 확인:
+```bash
+atomic-css --version
+```
+---
+## 빠른 시작
+### 1단계: 프로젝트에서 설정 파일 생성
+```bash
+cd my-project
+atomic-css init
+```
+프로젝트 루트에 `.atomic.json` 파일이 생성됩니다:
+```json
+{
+    "selectedLanguages": ["html"],
+    "cssDirectoryPath": "/assets/css/common/",
+    "extensions": [".html"],
+    "projects": []
+}
+```
+### 2단계: HTML에 Atomic CSS 클래스 작성
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
+</head>
+<body>
+    <div class="df jcc aic h100vh">
+        <h1 class="fs3-2rem fw700 c333333">Hello Atomic CSS!</h1>
+    </div>
+</body>
+</html>
+```
+### 3단계: CSS 빌드
+```bash
+# 일괄 빌드 (1회)
+atomic-css build
+```
+실행하면 `.atomic.json`의 `cssDirectoryPath`에 `atomic.min.css`가 생성됩니다:
+```
+my-project/
+├── index.html
+├── .atomic.json
+└── assets/css/common/
+    └── atomic.min.css    ← 자동 생성!
+```
+### 4단계: 개발 중에는 워치 모드
+```bash
+# 파일 변경을 감지하여 CSS 자동 재생성
+atomic-css watch
+```
+워치 모드는:
+- 시작 시 초기 빌드를 자동 실행합니다
+- HTML 파일이 수정/추가/삭제될 때마다 자동으로 CSS를 재생성합니다
+- 300ms 디바운스가 적용되어 연속 변경 시 불필요한 빌드를 방지합니다
+- `Ctrl+C`로 종료합니다
+출력 예시:
+```
+  atomic-css watch
+  Watching: /Users/you/my-project
+  Extensions: .html
+  Debug: OFF (atomic.min.css only)
+  Initial build: 5 files, 42 classes, 42 new rules
+  [14:30:15] Rebuilding... +3 rules
+  [14:30:22] Rebuilding... no changes
+```
+---
+## 명령어 상세
+### `atomic-css build [dir]`
+지정된 디렉토리(기본: 현재 디렉토리)의 파일을 스캔하고 CSS를 일괄 생성합니다.
+```bash
+# 현재 디렉토리 빌드
+atomic-css build
+# 특정 디렉토리 빌드
+atomic-css build src
+# 출력 경로 지정
+atomic-css build src -o dist/css
+# 스캔할 확장자 지정 (쉼표 구분)
+atomic-css build src -e html,tsx,jsx
+# 디버그 모드: atomic.min.css + atomic.css(원본) 모두 생성
+atomic-css build -d
+# 설정 파일 경로 지정 (.atomic.json이 다른 위치에 있을 때)
+atomic-css build src -c /path/to/project-root
+# 옵션 조합
+atomic-css build src -o dist/css -e html,tsx,jsx -d
+```
+| 옵션 | 설명 | 기본값 |
+| --- | --- | --- |
+| `-o, --output <path>` | CSS 출력 디렉토리 | `.atomic.json`의 `cssDirectoryPath` |
+| `-d, --debug` | 미니파이되지 않은 `atomic.css`도 함께 생성 | `false` |
+| `-e, --extensions <exts>` | 스캔할 파일 확장자 (쉼표 구분, `.` 생략 가능) | `.atomic.json`의 `extensions` |
+| `-c, --config <path>` | `.atomic.json`이 위치한 프로젝트 루트 경로 | 소스 디렉토리와 동일 |
+### `atomic-css watch [dir]`
+파일 변경을 실시간으로 감지하여 CSS를 자동 재생성합니다. `build`와 동일한 옵션을 지원합니다.
+```bash
+# 현재 디렉토리 워치
+atomic-css watch
+# 특정 디렉토리 워치 + 출력 경로 지정
+atomic-css watch src -o dist/css
+# React 프로젝트 워치
+atomic-css watch src -e html,tsx,jsx
+# 디버그 모드 워치
+atomic-css watch -d
+```
+감시 대상에서 자동 제외되는 파일:
+- `atomic.css`, `atomic.min.css` (출력 파일)
+- `.atomic.json` (설정 파일)
+- `node_modules/` 하위 전체
+### `atomic-css init`
+현재 디렉토리에 `.atomic.json` 기본 설정 파일을 생성합니다. 이미 존재하면 생성하지 않습니다.
+```bash
+atomic-css init
+```
+---
+## 설정 파일 (.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 출력 위치를 분리할 수 있습니다. `sources`에 해당하는 경로의 파일은 `output` 경로로, 매칭되지 않는 파일은 `cssDirectoryPath`로 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` | 프로젝트 식별 이름 (콘솔 출력에 표시) |
+| `sources` | `string[]` | 이 프로젝트에 속하는 소스 디렉토리 경로 목록 |
+| `output` | `string` | 이 프로젝트의 CSS 출력 경로 |
+---
+## 출력 파일
+| 파일 | 생성 조건 | 설명 |
+| --- | --- | --- |
+| `atomic.min.css` | 항상 | 미니파이된 CSS (프로덕션용) |
+| `atomic.css` | `-d` 플래그 사용 시 | 포매팅된 CSS (디버그/확인용) |
+HTML에서 연결:
+```html
+<!-- 프로덕션 -->
+<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
+<!-- 디버그 (개발 중 확인용) -->
+<link rel="stylesheet" href="/assets/css/common/atomic.css" />
+```
+---
+## 실전 워크플로우 예시
+### HTML 프로젝트
+```bash
+mkdir my-site && cd my-site
+npm init -y
+npm install --save-dev atomic-css-cli
+# 설정 생성
+npx atomic-css init
+# index.html 작성 후
+npx atomic-css watch
+```
+`package.json`에 스크립트 추가:
+```json
+{
+    "scripts": {
+        "css": "atomic-css build",
+        "css:watch": "atomic-css watch",
+        "css:debug": "atomic-css build -d"
+    }
+}
+```
+```bash
+npm run css:watch    # 개발 중
+npm run css          # 배포 전 빌드
+```
+### React / Next.js 프로젝트
+```bash
+cd my-react-app
+npm install --save-dev atomic-css-cli
+# .atomic.json 생성 후 수정
+npx atomic-css init
+```
+`.atomic.json` 수정:
+```json
+{
+    "cssDirectoryPath": "/src/assets/css/",
+    "extensions": [".html", ".tsx", ".jsx"]
+}
+```
+```bash
+# tsx/jsx 파일의 className에서 클래스 추출
+npx atomic-css watch src -e html,tsx,jsx
+```
+CSS import (React):
+```tsx
+// src/App.tsx
+import "./assets/css/atomic.min.css";
+```
+### Vue / Nuxt 프로젝트
+`.atomic.json`:
+```json
+{
+    "cssDirectoryPath": "/src/assets/css/",
+    "extensions": [".html", ".vue"]
+}
+```
+```bash
+npx atomic-css watch src -e html,vue
+```
+### CI/CD 파이프라인
+```yaml
+# GitHub Actions 예시
+- name: Generate Atomic CSS
+  run: npx atomic-css-cli build src -o dist/css -e html,tsx,jsx
+```
+---
+## Programmatic API
+Node.js에서 직접 import하여 사용할 수 있습니다.
+```js
+const {
+    generateCSSRules,
+    parseClassName,
+    build,
+    watch,
+    extractClassesFromText,
+    loadConfig,
+    minifyCss
+} = require("atomic-css-cli");
+// 텍스트에서 클래스 추출
+const classes = extractClassesFromText('<div class="df jcc aic gap2rem">');
+// → ["df", "jcc", "aic", "gap2rem"]
+// 클래스명 → CSS 규칙 생성
+const rules = generateCSSRules(["df", "jcc", "aic"]);
+// CSS 미니파이
+const minified = minifyCss(rules);
+// 프로그래밍 방식으로 빌드
+await build("./src", {
+    output: "./dist/css",
+    debug: false,
+    extensions: [".html", ".tsx"]
+});
+// 프로그래밍 방식으로 워치
+const watcher = watch("./src", {
+    output: "./dist/css",
+    extensions: [".html", ".tsx"]
+});
+```
+---
+## 왜 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;
+}
+```
+---
+## 네이밍 규칙
+### 단위
+| 단위 | 표기 | 예시 |
+| --- | --- | --- |
+| 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 전용 인터페이스입니다.
+### 제공 도구 (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"
+        }
+    }
+}
+```
+| 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 CHANGED Viewed

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