From f7c0ca261499724ad2da369f5f88679efeca1cea Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 16 Dec 2025 21:05:46 +0900
Subject: [PATCH 1/4] Update docs

---
 .gitignore                                    |   1 +
 README.md                                     | 179 +++++---
 README_ko.md                                  | 208 ++++++----
 SKILL.md                                      | 384 ++++++++++++++++++
 .../src/app/(detail)/docs/features/page.mdx   | 232 ++++++++---
 .../src/app/(detail)/docs/overview/page.mdx   |  87 +++-
 6 files changed, 908 insertions(+), 183 deletions(-)
 create mode 100644 SKILL.md

diff --git a/.gitignore b/.gitignore
index 3563db9f..9a0e6679 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ tarpaulin-report.html
 tarpaulin-report.json
 *storybook.log
 storybook-static
+.claude
diff --git a/README.md b/README.md
index 11a98191..3c96c5fe 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,13 @@
 </div>
 
 <h3 align="center">
-    Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
+    The Future of CSS-in-JS — Zero Runtime, Full Power
 </h3>
 
+<p align="center">
+    <strong>Zero Config · Zero FOUC · Zero Runtime · Complete CSS-in-JS Syntax Coverage</strong>
+</p>
+
 ---
 
 <div>
@@ -31,6 +35,18 @@
 
 English | [한국어](README_ko.md)
 
+## Why Devup UI?
+
+**Devup UI isn't just another CSS-in-JS library — it's the next evolution.**
+
+Traditional CSS-in-JS solutions force you to choose between developer experience and performance. Devup UI eliminates this trade-off entirely by processing all styles at build time using a Rust-powered preprocessor.
+
+- **Complete Syntax Coverage**: Every CSS-in-JS pattern you know — variables, conditionals, responsive arrays, pseudo-selectors — all fully supported
+- **Familiar API**: `styled()` API compatible with styled-components and Emotion patterns
+- **True Zero Runtime**: No JavaScript execution for styling at runtime. Period.
+- **Smallest Bundle Size**: Optimized class names (`a`, `b`, ... `aa`, `ab`) minimize CSS output
+- **Fastest Build Times**: Rust + WebAssembly delivers unmatched preprocessing speed
+
 ## Install
 
 ```sh
@@ -51,25 +67,15 @@ npm install @devup-ui/webpack-plugin
 
 ## Features
 
-- Preprocessor
-- Zero Config
-- Zero FOUC
-- Zero Runtime
-- RSC Support
-- Must not use JavaScript, client-side logic, or hybrid solutions
-- Support Library mode
-- Zero Cost Dynamic Theme Support based on CSS Variables
-- Theme with Typing
-- Smallest size, fastest speed
-
-## Inspirations
-
-- Styled System
-- Chakra UI
-- Theme UI
-- Vanilla Extract
-- Rainbow Sprinkles
-- Kuma UI
+- **Preprocessor** — All CSS extraction happens at build time
+- **Zero Config** — Works out of the box with sensible defaults
+- **Zero FOUC** — No flash of unstyled content, no Provider required
+- **Zero Runtime** — No client-side JavaScript for styling
+- **RSC Support** — Full React Server Components compatibility
+- **Library Mode** — Build component libraries with extracted styles
+- **Dynamic Themes** — Zero-cost theme switching via CSS variables
+- **Type-Safe Themes** — Full TypeScript support for theme tokens
+- **Smallest & Fastest** — Proven by benchmarks
 
 ## Comparison Benchmarks
 
@@ -84,54 +90,59 @@ Next.js Build Time and Build Size (github action - ubuntu-latest)
 | panda-css                      | 1.3.1   | 20.64s     | 64,573,260 bytes  |
 | chakra-ui                      | 3.27.0  | 28.81s     | 222,435,802 bytes |
 | mui                            | 7.3.2   | 20.86s     | 97,964,458 bytes  |
-| devup-ui(per-file css)         | 1.0.18  | 16.90s     | 59,540,459 bytes  |
-| devup-ui(single css)           | 1.0.18  | 17.05s     | 59,520,196 bytes  |
+| **devup-ui(per-file css)**     | 1.0.18  | **16.90s** | 59,540,459 bytes  |
+| **devup-ui(single css)**       | 1.0.18  | **17.05s** | **59,520,196 bytes** |
 | tailwindcss(turbopack)         | 4.1.13  | 6.72s      | 5,355,082 bytes   |
-| devup-ui(single css+turbopack) | 1.0.18  | 10.34s     | 4,772,050 bytes   |
+| **devup-ui(single css+turbopack)** | 1.0.18  | 10.34s     | **4,772,050 bytes** |
 
 ## How it works
 
-Devup UI is a CSS in JS preprocessor that does not require runtime.
-Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
-We develop a preprocessor that considers all grammatical cases.
+Devup UI transforms your components at build time. Class names are generated using a compact base-37 encoding for minimal CSS size.
+
+**Basic transformation:**
 
 ```tsx
-const before = <Box bg="red" />
+// You write:
+<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+
+// Devup UI generates:
+<div className="a b c" />
 
-const after = <div className="d0" />
+// With CSS:
+// .a { background-color: red; }
+// .b { padding: 1rem; }
+// .c:hover { background-color: blue; }
 ```
 
-Variables are fully supported.
+**Dynamic values become CSS variables:**
 
 ```tsx
-const before = <Box bg={colorVariable} />
-
-const after = (
-  <div
-    className="d0"
-    style={{
-      '--d0': colorVariable,
-    }}
-  />
-)
+// You write:
+<Box bg={colorVariable} />
+
+// Devup UI generates:
+<div className="a" style={{ '--a': colorVariable }} />
+
+// With CSS:
+// .a { background-color: var(--a); }
 ```
 
-Various expressions and responsiveness are also fully supported.
+**Complex expressions and responsive arrays — fully supported:**
 
 ```tsx
-const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
-
-const after = (
-  <div
-    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
-    style={{
-      '--d2': variable,
-    }}
-  />
-)
+// You write:
+<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+
+// Devup UI generates:
+<div
+  className={`a b ${isActive ? 'c' : 'd'}`}
+  style={{ '--d': dynamicColor }}
+/>
+
+// With responsive CSS for each breakpoint
 ```
 
-Support Theme with Typing
+**Type-safe theming:**
 
 `devup.json`
 
@@ -140,10 +151,20 @@ Support Theme with Typing
   "theme": {
     "colors": {
       "default": {
+        "primary": "#0070f3",
         "text": "#000"
       },
       "dark": {
-        "text": "white"
+        "primary": "#3291ff",
+        "text": "#fff"
+      }
+    },
+    "typography": {
+      "heading": {
+        "fontFamily": "Pretendard",
+        "fontSize": "24px",
+        "fontWeight": 700,
+        "lineHeight": 1.3
       }
     }
   }
@@ -151,22 +172,58 @@ Support Theme with Typing
 ```
 
 ```tsx
-// Type Safe
-<Text color="$text" />
+// Type-safe theme tokens
+<Text color="$primary" />
+<Box typography="$heading" />
 ```
 
-Support Responsive And Pseudo Selector
-
-You can use responsive and pseudo selector.
+**Responsive + Pseudo selectors together:**
 
 ```tsx
-// Responsive with Selector
-const box = <Box _hover={{ bg: ['red', 'blue'] }} />
+// Responsive with pseudo selector
+<Box _hover={{ bg: ['red', 'blue'] }} />
 
-// Same
-const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+// Equivalent syntax
+<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
+**styled-components / Emotion compatible `styled()` API:**
+
+```tsx
+import { styled } from '@devup-ui/react'
+
+// Familiar syntax for styled-components and Emotion users
+const Card = styled('div', {
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  _hover: {
+    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+})
+
+const Button = styled('button', {
+  px: 4,               // 4 * 4 = 16px
+  py: 2,               // 2 * 4 = 8px
+  borderRadius: '4px',
+  cursor: 'pointer',
+})
+
+// Usage
+<Card>Content</Card>
+<Button>Click me</Button>
+```
+
+## Inspirations
+
+- Styled System
+- Chakra UI
+- Theme UI
+- Vanilla Extract
+- Rainbow Sprinkles
+- Kuma UI
+
 ## How to Contribute
 
 ### Requirements
diff --git a/README_ko.md b/README_ko.md
index 699664a5..1ee849c9 100644
--- a/README_ko.md
+++ b/README_ko.md
@@ -3,9 +3,13 @@
 </div>
 
 <h3 align="center">
-    Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
+    CSS-in-JS의 미래 — 제로 런타임, 완전한 문법 지원
 </h3>
 
+<p align="center">
+    <strong>Zero Config · Zero FOUC · Zero Runtime · 모든 CSS-in-JS 문법 완벽 지원</strong>
+</p>
+
 ---
 
 <div>
@@ -31,99 +35,114 @@
 
 [English](README.md) | 한국어
 
+## 왜 Devup UI인가?
+
+**Devup UI는 단순한 CSS-in-JS 라이브러리가 아닙니다 — CSS-in-JS의 미래 그 자체입니다.**
+
+기존 CSS-in-JS 솔루션들은 개발자 경험과 성능 사이에서 타협을 강요했습니다. Devup UI는 Rust 기반 전처리기를 통해 모든 스타일을 빌드 타임에 처리함으로써 이 트레이드오프를 완전히 제거합니다.
+
+- **완전한 문법 지원**: 변수, 조건문, 반응형 배열, 가상 선택자 등 모든 CSS-in-JS 패턴을 완벽하게 지원
+- **익숙한 API**: styled-components, Emotion과 호환되는 `styled()` API 제공
+- **진정한 제로 런타임**: 런타임에서 스타일링을 위한 JavaScript 실행이 전혀 없습니다
+- **가장 작은 번들 크기**: 최적화된 클래스명(`a`, `b`, ... `aa`, `ab`)으로 CSS 출력 최소화
+- **가장 빠른 빌드 속도**: Rust + WebAssembly가 제공하는 압도적인 전처리 성능
+
 ## 설치
 
 ```sh
 npm install @devup-ui/react
 
-# on next.js
+# Next.js
 npm install @devup-ui/next-plugin
 
-# on vite
+# Vite
 npm install @devup-ui/vite-plugin
-```
 
-## 기능
+# Rsbuild
+npm install @devup-ui/rsbuild-plugin
 
-- 전처리기 - Devup UI 는 모든 코드를 전처리하여 성능 저하의 원인을 원천적으로 제거합니다.
-- Zero Config - Devup UI 는 설정 파일이 필요 없습니다.
-- Zero FOUC - Devup UI 는 FOUC를 완전히 제거합니다. 또한 방지를 위한 Provider 등 추가 설정이 필요 없습니다.
-- Zero Runtime - Devup UI 는 런타임이 필요 없습니다.
-- RSC Support - Devup UI 는 RSC를 지원합니다.
-- Must not use JavaScript, client-side logic, or hybrid solutions - Devup UI 는 JavaScript, 클라이언트 사이드 로직, 혼합 솔루션을 사용하지
-  않습니다.
-- 라이브러리 모드 지원
-- 타이핑 지원되는 테마
-- 가장 작은 크기, 가장 빠른 속도
+# Webpack
+npm install @devup-ui/webpack-plugin
+```
 
-## 영감
+## 기능
 
-- Styled System - 문법적인 부분에서 영감을 받았습니다.
-- Chakra UI - 문법적인 부분에서 영감을 받았습니다.
-- Theme UI - 전체적인 시스템적인 부분에서 영감을 받았습니다.
-- Vanilla Extract - 전처리기 부분에서 영감을 받았습니다.
-- Rainbow Sprinkles - 전체적인 시스템적인 부분에서 영감을 받았습니다.
-- Kuma UI - 문법적인 부분과 방법론에서 영감을 받았습니다.
+- **전처리기** — 모든 CSS 추출이 빌드 타임에 완료됩니다
+- **Zero Config** — 별도 설정 없이 바로 사용 가능
+- **Zero FOUC** — 스타일 깜빡임 없음, Provider 불필요
+- **Zero Runtime** — 스타일링을 위한 클라이언트 JavaScript 실행 없음
+- **RSC 지원** — React Server Components 완벽 호환
+- **라이브러리 모드** — 추출된 스타일과 함께 컴포넌트 라이브러리 빌드 가능
+- **동적 테마** — CSS 변수 기반 제로 코스트 테마 전환
+- **타입 세이프 테마** — 테마 토큰에 대한 완전한 TypeScript 지원
+- **가장 작고 빠름** — 벤치마크로 증명됨
 
 ## 비교 벤치마크
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| 라이브러리             | 버전   | 빌드 시간 | 빌드 사이즈       |
-| ---------------------- | ------ | --------- | ----------------- |
-| tailwindcss            | 4.1.13 | 20.22s    | 57,415,796 bytes  |
-| styleX                 | 0.15.4 | 38.97s    | 76,257,820 bytes  |
-| vanilla-extract        | 1.17.4 | 20.09s    | 59,366,237 bytes  |
-| kuma-ui                | 1.5.9  | 21.61s    | 67,422,085 bytes  |
-| panda-css              | 1.3.1  | 22.01s    | 62,431,065 bytes  |
-| chakra-ui              | 3.27.0 | 29.99s    | 210,122,493 bytes |
-| mui                    | 7.3.2  | 22.21s    | 94,231,958 bytes  |
-| devup-ui(per-file css) | 1.0.18 | 18.23s    | 57,440,953 bytes  |
-| devup-ui(single css)   | 1.0.18 | 18.35s    | 57,409,008 bytes  |
+| 라이브러리                         | 버전   | 빌드 시간  | 빌드 사이즈           |
+| ---------------------------------- | ------ | ---------- | --------------------- |
+| tailwindcss                        | 4.1.13 | 19.31s     | 59,521,539 bytes      |
+| styleX                             | 0.15.4 | 41.78s     | 86,869,452 bytes      |
+| vanilla-extract                    | 1.17.4 | 19.50s     | 61,494,033 bytes      |
+| kuma-ui                            | 1.5.9  | 20.93s     | 69,924,179 bytes      |
+| panda-css                          | 1.3.1  | 20.64s     | 64,573,260 bytes      |
+| chakra-ui                          | 3.27.0 | 28.81s     | 222,435,802 bytes     |
+| mui                                | 7.3.2  | 20.86s     | 97,964,458 bytes      |
+| **devup-ui(per-file css)**         | 1.0.18 | **16.90s** | 59,540,459 bytes      |
+| **devup-ui(single css)**           | 1.0.18 | **17.05s** | **59,520,196 bytes**  |
+| tailwindcss(turbopack)             | 4.1.13 | 6.72s      | 5,355,082 bytes       |
+| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s     | **4,772,050 bytes**   |
 
 ## 작동 원리
 
-Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
-Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
-모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
+Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CSS 크기를 최소화하기 위해 압축된 base-37 인코딩을 사용하여 생성됩니다.
+
+**기본 변환:**
 
 ```tsx
-const before = <Box bg="red" />
+// 개발자가 작성:
+<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+
+// Devup UI가 생성:
+<div className="a b c" />
 
-const after = <div className="d0" />
+// CSS:
+// .a { background-color: red; }
+// .b { padding: 1rem; }
+// .c:hover { background-color: blue; }
 ```
 
-변수 사용도 완전히 지원합니다.
+**동적 값은 CSS 변수로 변환:**
 
 ```tsx
-const before = <Box bg={colorVariable} />
-
-const after = (
-  <div
-    className="d0"
-    style={{
-      '--d0': colorVariable,
-    }}
-  />
-)
+// 개발자가 작성:
+<Box bg={colorVariable} />
+
+// Devup UI가 생성:
+<div className="a" style={{ '--a': colorVariable }} />
+
+// CSS:
+// .a { background-color: var(--a); }
 ```
 
-다양한 표현식과 반응형도 모두 지원합니다.
+**복잡한 표현식과 반응형 배열 — 완벽 지원:**
 
 ```tsx
-const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
-
-const after = (
-  <div
-    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
-    style={{
-      '--d2': variable,
-    }}
-  />
-)
+// 개발자가 작성:
+<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+
+// Devup UI가 생성:
+<div
+  className={`a b ${isActive ? 'c' : 'd'}`}
+  style={{ '--d': dynamicColor }}
+/>
+
+// 각 브레이크포인트에 대한 반응형 CSS 생성
 ```
 
-타이핑이 되는 테마를 지원합니다.
+**타입 세이프 테마:**
 
 `devup.json`
 
@@ -132,10 +151,20 @@ const after = (
   "theme": {
     "colors": {
       "default": {
+        "primary": "#0070f3",
         "text": "#000"
       },
       "dark": {
-        "text": "white"
+        "primary": "#3291ff",
+        "text": "#fff"
+      }
+    },
+    "typography": {
+      "heading": {
+        "fontFamily": "Pretendard",
+        "fontSize": "24px",
+        "fontWeight": 700,
+        "lineHeight": 1.3
       }
     }
   }
@@ -143,22 +172,59 @@ const after = (
 ```
 
 ```tsx
-// Type Safe
-<Text color="$text" />
+// 타입 세이프 테마 토큰
+<Text color="$primary" />
+<Box typography="$heading" />
 ```
 
-반응형과 가상 선택자도 지원합니다.
-
-물론 동시 사용도 가능합니다.
+**반응형 + 가상 선택자 동시 사용:**
 
 ```tsx
-// Responsive with Selector
-const box = <Box _hover={{ bg: ['red', 'blue'] }} />
+// 반응형과 가상 선택자 함께 사용
+<Box _hover={{ bg: ['red', 'blue'] }} />
+
+// 동일한 표현
+<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+```
+
+**styled-components / Emotion 호환 `styled()` API:**
 
-// Same
-const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+```tsx
+import { styled } from '@devup-ui/react'
+
+// styled-components, Emotion 사용자에게 익숙한 문법
+const Card = styled('div', {
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  _hover: {
+    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+})
+
+// 버튼 예시
+const Button = styled('button', {
+  px: 4,               // 4 * 4 = 16px
+  py: 2,               // 2 * 4 = 8px
+  borderRadius: '4px',
+  cursor: 'pointer',
+})
+
+// 사용
+<Card>Content</Card>
+<Button>Click me</Button>
 ```
 
+## 영감
+
+- Styled System — 문법적인 부분에서 영감을 받았습니다
+- Chakra UI — 문법적인 부분에서 영감을 받았습니다
+- Theme UI — 전체적인 시스템적인 부분에서 영감을 받았습니다
+- Vanilla Extract — 전처리기 부분에서 영감을 받았습니다
+- Rainbow Sprinkles — 전체적인 시스템적인 부분에서 영감을 받았습니다
+- Kuma UI — 문법적인 부분과 방법론에서 영감을 받았습니다
+
 ## 기여 방법
 
 ### 요구 사항
diff --git a/SKILL.md b/SKILL.md
new file mode 100644
index 00000000..a9cacaee
--- /dev/null
+++ b/SKILL.md
@@ -0,0 +1,384 @@
+---
+name: devup-ui
+description: A zero-runtime CSS-in-JS preprocessor framework for React. Use this skill when working with Devup UI components, styling, theming, or build configuration. This skill covers component usage (Box, Flex, Grid, Text, Button, etc.), styling APIs (css, styled, globalCss, keyframes), theme configuration, and build plugin setup for Vite, Next.js, Webpack, and Rsbuild.
+---
+
+# Devup UI
+
+Devup UI is a zero-runtime CSS-in-JS preprocessor that transforms styles at build time using Rust and WebAssembly. All styling is processed during compilation, resulting in zero runtime overhead, zero FOUC, and dynamic theme support via CSS variables.
+
+## Project Structure
+
+```
+devup-ui/
+├── packages/
+│   ├── react/           # Core React library (@devup-ui/react)
+│   ├── components/      # Pre-built UI components (@devup-ui/components)
+│   ├── vite-plugin/     # Vite build plugin
+│   ├── next-plugin/     # Next.js integration
+│   ├── webpack-plugin/  # Webpack build plugin
+│   ├── rsbuild-plugin/  # Rsbuild integration
+│   ├── reset-css/       # CSS reset utility
+│   └── eslint-plugin/   # Custom ESLint rules
+├── libs/                # Rust libraries (core processing)
+│   ├── extractor/       # JSX/TSX AST parser and CSS extraction
+│   ├── sheet/           # CSS sheet generation
+│   └── css/             # CSS utilities
+├── bindings/
+│   └── devup-ui-wasm/   # WebAssembly bindings
+├── apps/                # Example applications
+└── benchmark/           # Performance benchmarks
+```
+
+## Core Concepts
+
+### Build-Time Transformation
+
+Components are transformed at build time. Class names are generated using a compact base-37 encoding (a-z, 0-9, _) for minimal CSS size:
+
+```tsx
+// Developer writes:
+<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+
+// Transformed to:
+<div className="a b c" />
+
+// Generated CSS:
+// .a { background-color: red; }
+// .b { padding: 1rem; }
+// .c:hover { background-color: blue; }
+```
+
+Class name sequence: `a`, `b`, ... `z`, `_`, `aa`, `ab`, ... `az`, `a0`, ... `a9`, `a_`, `ba`, ...
+
+Dynamic values become CSS variables:
+
+```tsx
+// Developer writes:
+<Box bg={colorVariable} />
+
+// Transformed to:
+<div className="a" style={{ '--a': colorVariable }} />
+
+// Generated CSS:
+// .a { background-color: var(--a); }
+```
+
+## Components
+
+All components are from `@devup-ui/react`:
+
+- `Box` - Base layout component with style props
+- `Flex` - Flexbox container
+- `Grid` - CSS Grid container
+- `VStack` / `HStack` - Vertical/horizontal stacking
+- `Center` - Center content
+- `Text` - Typography component
+- `Button` - Interactive button
+- `Input` - Form input
+- `Image` - Image component
+
+### Style Props
+
+Components accept style props directly:
+
+```tsx
+<Box
+  bg="red"
+  color="white"
+  p={4}
+  m={[2, 4]}              // Responsive: mobile=2, desktop=4
+  _hover={{ bg: "blue" }} // Pseudo-selector
+  _dark={{ bg: "gray" }}  // Theme variant
+/>
+```
+
+## Styling APIs
+
+### css()
+
+Create reusable style objects:
+
+```tsx
+import { css } from '@devup-ui/react'
+
+const styles = css({
+  bg: 'red',
+  p: 4,
+  _hover: { bg: 'blue' }
+})
+
+<Box {...styles} />
+```
+
+### styled()
+
+Create styled components (compatible with styled-components and Emotion patterns):
+
+```tsx
+import { styled } from '@devup-ui/react'
+
+// Familiar syntax for styled-components and Emotion users
+const Card = styled('div', {
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  _hover: {
+    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+})
+
+const Button = styled('button', {
+  bg: 'blue',
+  color: 'white',
+  px: 4,               // 4 * 4 = 16px
+  py: 2,               // 2 * 4 = 8px
+  borderRadius: '4px',
+  cursor: 'pointer',
+  _hover: { bg: 'darkblue' },
+  _active: { bg: 'navy' },
+})
+```
+
+### globalCss()
+
+Define global styles:
+
+```tsx
+import { globalCss } from '@devup-ui/react'
+
+globalCss({
+  body: { margin: 0 },
+  '*': { boxSizing: 'border-box' }
+})
+```
+
+### keyframes()
+
+Define CSS animations:
+
+```tsx
+import { keyframes } from '@devup-ui/react'
+
+const spin = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' }
+})
+
+<Box animation={`${spin} 1s linear infinite`} />
+```
+
+## Theme Configuration
+
+Create `devup.json` in project root:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "text": "#000"
+      },
+      "dark": {
+        "primary": "#3291ff",
+        "text": "#fff"
+      }
+    },
+    "typography": {
+      "bold": {
+        "fontFamily": "Pretendard",
+        "fontSize": "14px",
+        "fontWeight": 800,
+        "lineHeight": 1.3,
+        "letterSpacing": "-0.03em"
+      },
+      "h1": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "38px",
+          "fontWeight": 800,
+          "lineHeight": 1.3
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "52px",
+          "fontWeight": 800,
+          "lineHeight": 1.3
+        }
+      ]
+    }
+  }
+}
+```
+
+### Theme API
+
+```tsx
+import { useTheme, setTheme, getTheme, initTheme, ThemeScript } from '@devup-ui/react'
+
+// Get current theme
+const theme = useTheme()
+
+// Set theme
+setTheme('dark')
+
+// Initialize theme (SSR)
+initTheme()
+
+// Get theme value
+const currentTheme = getTheme()
+
+// Hydration script (add to HTML head)
+<ThemeScript />
+```
+
+## Build Plugin Configuration
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import DevupUI from '@devup-ui/vite-plugin'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    DevupUI({
+      package: '@devup-ui/react',    // Target package
+      cssDir: 'df/devup-ui',         // CSS output directory
+      devupFile: 'devup.json',       // Theme config file
+      extractCss: true,              // Enable CSS extraction
+      singleCss: false,              // Single vs per-file CSS
+      debug: false,                  // Debug mode
+      include: [],                   // Additional packages to process
+    }),
+  ],
+})
+```
+
+### Next.js
+
+```js
+// next.config.js
+const withDevupUI = require('@devup-ui/next-plugin')
+
+module.exports = withDevupUI({
+  // Next.js config
+})
+```
+
+### Webpack
+
+```js
+// webpack.config.js
+const DevupUIPlugin = require('@devup-ui/webpack-plugin')
+
+module.exports = {
+  plugins: [new DevupUIPlugin()],
+}
+```
+
+### Rsbuild
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import DevupUI from '@devup-ui/rsbuild-plugin'
+
+export default defineConfig({
+  plugins: [DevupUI()],
+})
+```
+
+## Development Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run development servers
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Run linting
+pnpm lint
+
+# Run benchmarks
+pnpm benchmark
+```
+
+## Guidelines
+
+- All Devup UI components throw errors at runtime - they must be transformed by the build plugin
+- Use responsive arrays for breakpoint-based styles: `p={[2, 4, 6]}`
+- Use underscore prefix for pseudo-selectors: `_hover`, `_focus`, `_active`, `_dark`
+- Theme values are accessed via CSS variables at runtime for zero-cost theme switching
+- Generated CSS is output to `df/devup-ui/` directory by default
+- TypeScript theme types are generated at `df/theme.d.ts`
+
+## Examples
+
+### Basic Component Usage
+
+```tsx
+import { Box, Flex, Text, Button } from '@devup-ui/react'
+
+function Card() {
+  return (
+    <Box bg="white" p={4} borderRadius="lg" boxShadow="md">
+      <Text fontSize="lg" fontWeight="bold">Title</Text>
+      <Text color="gray.600">Description</Text>
+      <Flex gap={2} mt={4}>
+        <Button bg="primary" color="white">Action</Button>
+      </Flex>
+    </Box>
+  )
+}
+```
+
+### Theme-Aware Component
+
+```tsx
+import { Box } from '@devup-ui/react'
+
+function ThemeCard() {
+  return (
+    <Box
+      bg="$colors.background"
+      color="$colors.text"
+      _dark={{ bg: '$colors.background', color: '$colors.text' }}
+      p={4}
+    >
+      This adapts to the current theme
+    </Box>
+  )
+}
+```
+
+### Dynamic Styling
+
+```tsx
+import { Box } from '@devup-ui/react'
+
+function DynamicBox({ isActive, color }) {
+  return (
+    <Box
+      bg={isActive ? 'blue' : 'gray'}
+      color={color}  // Dynamic value becomes CSS variable
+      p={4}
+    />
+  )
+}
+```
diff --git a/apps/landing/src/app/(detail)/docs/features/page.mdx b/apps/landing/src/app/(detail)/docs/features/page.mdx
index f5bcddb8..91a0d7a6 100644
--- a/apps/landing/src/app/(detail)/docs/features/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/features/page.mdx
@@ -1,69 +1,155 @@
 export const metadata = {
-    title: "Features",
-    alternates: {
-        canonical: '/docs/features',
-    }
-
+  title: 'Features',
+  alternates: {
+    canonical: '/docs/features',
+  },
 }
 
 # Features
 
-Many css in js solutions are designed to be used with JavaScript, but Devup UI is designed to be used without JavaScript.
+Devup UI provides complete CSS-in-JS syntax coverage with zero runtime overhead. Every pattern you know from styled-components and Emotion works seamlessly — but without the performance cost.
+
+## Complete Syntax Coverage
+
+Unlike other zero-runtime solutions that limit what you can do, Devup UI handles every CSS-in-JS pattern at build time.
+
+## How It Works
+
+Devup UI transforms your components at build time. Class names are generated using compact base-37 encoding for minimal CSS output.
 
-Devup UI is a CSS in JS preprocessor that does not require runtime.
+```tsx
+// You write:
+<Box bg="red" p={4} />
+
+// Devup UI generates:
+<div className="a b" />
+
+// CSS output:
+// .a { background-color: red; }
+// .b { padding: 16px; }  /* 4 * 4 = 16px */
+```
+
+> Note: Numeric values are multiplied by 4 to convert to pixels. `p={4}` becomes `padding: 16px`.
 
-Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
+Class name sequence: `a`, `b`, ... `z`, `_`, `aa`, `ab`, ... `az`, `a0`, ... `a9`, `a_`, `ba`, ...
 
-We develop a preprocessor that considers all grammatical cases.
+## Responsive Design
 
-## How it works
+Full responsive support with array syntax. Each index corresponds to a breakpoint.
 
 ```tsx
-const before = <Box bg="red" />
+// You write:
+<Box bg={['red', 'blue', 'green']} />
+
+// Devup UI generates:
+<div className="a b c" />
 
-const after = <div className="d0" />
+// CSS output with media queries for each breakpoint
 ```
 
-## Responsive
+## Dynamic Values
 
-Devup UI supports responsive design.
+Variables are automatically converted to CSS custom properties.
 
 ```tsx
-const before = <Box bg={['red', 'blue']} />
+// You write:
+<Box bg={colorVariable} />
 
-const after = <div className="d0 d1" />
+// Devup UI generates:
+<div className="a" style={{ '--a': colorVariable }} />
+
+// CSS output:
+// .a { background-color: var(--a); }
+```
+
+## Conditional Expressions
+
+Ternary operators and logical expressions are statically analyzed.
+
+```tsx
+// You write:
+<Box bg={isActive ? 'blue' : dynamicColor} />
+
+// Devup UI generates:
+<div
+  className={isActive ? 'a' : 'b'}
+  style={{ '--b': dynamicColor }}
+/>
+```
+
+## Complex Expressions
+
+Combine responsive arrays with conditionals — Devup UI handles it all.
+
+```tsx
+// You write:
+<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+
+// Devup UI generates:
+<div
+  className={`a b ${isActive ? 'c' : 'd'}`}
+  style={{ '--d': dynamicColor }}
+/>
 ```
 
-## Variables
+## Pseudo Selectors
 
-Devup UI supports variables.
+Use underscore prefix for pseudo selectors: `_hover`, `_focus`, `_active`, `_disabled`, and more.
 
 ```tsx
-const before = <Box bg={colorVariable} />
-
-const after = (
-  <div
-    className="d0"
-    style={{
-      '--d0': colorVariable,
-    }}
-  />
-)
+// You write:
+<Box
+  bg="white"
+  _hover={{ bg: 'blue' }}
+  _focus={{ bg: 'green' }}
+  _active={{ bg: 'red' }}
+/>
+
+// Devup UI generates:
+<div className="a b c d" />
+
+// CSS output:
+// .a { background-color: white; }
+// .b:hover { background-color: blue; }
+// .c:focus { background-color: green; }
+// .d:active { background-color: red; }
 ```
 
-## Theme
+## Responsive + Pseudo Selectors
 
-Devup UI supports theme.
+Combine responsive arrays with pseudo selectors for powerful responsive interactions.
+
+```tsx
+// You write:
+<Box _hover={{ bg: ['red', 'blue'] }} />
+
+// Equivalent syntax:
+<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+```
+
+## Type-Safe Theming
+
+Define themes in `devup.json` with full TypeScript support.
 
 ```json
 {
   "theme": {
     "colors": {
       "default": {
+        "primary": "#0070f3",
         "text": "#000"
       },
       "dark": {
-        "text": "white"
+        "primary": "#3291ff",
+        "text": "#fff"
+      }
+    },
+    "typography": {
+      "heading": {
+        "fontFamily": "Pretendard",
+        "fontSize": "24px",
+        "fontWeight": 700,
+        "lineHeight": 1.3
       }
     }
   }
@@ -71,32 +157,82 @@ Devup UI supports theme.
 ```
 
 ```tsx
-<Text color="$text" />
+// Type-safe theme tokens with autocomplete
+<Text color="$primary" />
+<Box typography="$heading" />
+```
+
+Theme switching happens via CSS variables — zero JavaScript execution required.
+
+## styled() API
+
+Familiar API for styled-components and Emotion users.
+
+```tsx
+import { styled } from '@devup-ui/react'
+
+const Card = styled('div', {
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  _hover: {
+    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+})
+
+const Button = styled('button', {
+  bg: 'blue',
+  color: 'white',
+  px: 4,               // 4 * 4 = 16px
+  py: 2,               // 2 * 4 = 8px
+  borderRadius: '4px',
+  cursor: 'pointer',
+  _hover: { bg: 'darkblue' },
+  _active: { bg: 'navy' },
+})
+```
+
+## css() API
+
+Create reusable style objects.
+
+```tsx
+import { css } from '@devup-ui/react'
+
+const cardStyles = css({
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+})
+
+<Box {...cardStyles} />
 ```
 
-## Expressions
+## globalCss() API
 
-Devup UI supports expressions.
+Define global styles that are extracted at build time.
 
 ```tsx
-const before = <Box bg={a > b ? 'yellow' : variable} />
-
-const after = (
-  <Box
-    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
-    style={{
-      '--d2': variable,
-    }}
-  />
-)
+import { globalCss } from '@devup-ui/react'
+
+globalCss({
+  body: { margin: 0, fontFamily: 'Pretendard' },
+  '*': { boxSizing: 'border-box' },
+})
 ```
 
-## Pseudo Selector
+## keyframes() API
 
-Devup UI supports pseudo selector.
+Define CSS animations.
 
 ```tsx
-const before = <Box _hover={{ bg: 'red' }} />
+import { keyframes } from '@devup-ui/react'
+
+const spin = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' },
+})
 
-const after = <Box className="d0" />
+<Box animation={`${spin} 1s linear infinite`} />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
index 801aab54..a9a8b5b5 100644
--- a/apps/landing/src/app/(detail)/docs/overview/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -7,8 +7,89 @@ export const metadata = {
 
 ## What is Devup UI?
 
-Devup UI is a CSS in JS preprocessor that does not require runtime.
+**Devup UI is not just another CSS-in-JS library — it's the future of CSS-in-JS itself.**
 
-Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
+Devup UI is a zero-runtime CSS-in-JS preprocessor powered by Rust and WebAssembly. It transforms all your styles at build time, completely eliminating runtime overhead while providing full CSS-in-JS syntax coverage.
 
-We develop a preprocessor that considers all grammatical cases.
+### The Problem with Traditional CSS-in-JS
+
+Traditional CSS-in-JS solutions force you to choose between:
+
+- **Developer Experience**: Intuitive APIs, co-located styles, dynamic theming
+- **Performance**: No runtime overhead, fast page loads, optimal Core Web Vitals
+
+Libraries like styled-components and Emotion offer great DX but execute JavaScript at runtime to generate styles. Zero-runtime alternatives like Vanilla Extract sacrifice some flexibility for performance.
+
+### The Devup UI Solution
+
+Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analyzes your code at build time and handles every CSS-in-JS pattern:
+
+- **Variables** — Dynamic values become CSS custom properties
+- **Conditionals** — Ternary expressions are statically analyzed
+- **Responsive Arrays** — Breakpoint-based styles are pre-generated
+- **Pseudo Selectors** — `_hover`, `_focus`, `_active` work seamlessly
+- **Themes** — Type-safe theme tokens with zero-cost switching
+
+### Key Advantages
+
+| Feature | Devup UI | styled-components | Emotion | Vanilla Extract |
+|---------|----------|-------------------|---------|-----------------|
+| Zero Runtime | Yes | No | No | Yes |
+| Dynamic Values | Yes | Yes | Yes | Limited |
+| Full Syntax Coverage | Yes | Yes | Yes | No |
+| Type-Safe Themes | Yes | Limited | Limited | Yes |
+| Build Performance | Fastest | N/A | N/A | Fast |
+
+### How It Works
+
+```tsx
+// You write familiar CSS-in-JS syntax
+<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+
+// Devup UI transforms it at build time
+<div className="a b c" />
+
+// With optimized atomic CSS
+// .a { background-color: red; }
+// .b { padding: 16px; }  /* 4 * 4 = 16px */
+// .c:hover { background-color: blue; }
+```
+
+> Numeric values are multiplied by 4. `p={4}` becomes `padding: 16px`.
+
+Class names use compact base-37 encoding (`a`, `b`, ... `z`, `_`, `aa`, `ab`, ...) for minimal CSS output.
+
+### Familiar API
+
+If you've used styled-components or Emotion, you'll feel right at home:
+
+```tsx
+import { styled } from '@devup-ui/react'
+
+const Card = styled('div', {
+  bg: 'white',
+  p: 4,                // 4 * 4 = 16px
+  borderRadius: '8px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  _hover: {
+    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
+  },
+})
+```
+
+### Proven Performance
+
+Benchmarks on Next.js (GitHub Actions - ubuntu-latest):
+
+| Library | Build Time | Build Size |
+|---------|------------|------------|
+| tailwindcss | 19.31s | 59,521,539 bytes |
+| styleX | 41.78s | 86,869,452 bytes |
+| vanilla-extract | 19.50s | 61,494,033 bytes |
+| **devup-ui (single css)** | **17.05s** | **59,520,196 bytes** |
+
+With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes.
+
+### Get Started
+
+Ready to experience the future of CSS-in-JS? Head to the [Installation](/docs/installation) guide to get started in minutes.

From b59b007080500e62d4778e2a930582bae4f0d778 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 16 Dec 2025 21:22:43 +0900
Subject: [PATCH 2/4] Update docs

---
 .../src/app/(detail)/docs/LeftMenu.tsx        |   1 +
 .../(detail)/docs/api/group-selector/page.mdx | 204 ++++++++++++++-
 .../(detail)/docs/devup/breakpoints/page.mdx  | 188 ++++++++++++--
 .../app/(detail)/docs/devup/colors/page.mdx   | 148 ++++++++++-
 .../(detail)/docs/devup/devup-json/page.mdx   | 215 ++++++++++++++--
 .../(detail)/docs/devup/figma-plugin/page.mdx | 104 +++++++-
 .../(detail)/docs/devup/typography/page.mdx   | 240 +++++++++++++++++-
 .../app/(detail)/docs/quick-start/page.mdx    | 202 +++++++++++++++
 8 files changed, 1241 insertions(+), 61 deletions(-)
 create mode 100644 apps/landing/src/app/(detail)/docs/quick-start/page.mdx

diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
index f1e50a92..63788c78 100644
--- a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
+++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -6,6 +6,7 @@ export function LeftMenu() {
   return (
     <VStack gap="6px">
       <MenuItem to="/docs/overview">Overview</MenuItem>
+      <MenuItem to="/docs/quick-start">Quick Start</MenuItem>
       <MenuItem to="/docs/installation">Installation</MenuItem>
       <MenuItem
         subMenu={[
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
index a9630224..ac6ee68c 100644
--- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -3,21 +3,205 @@ export const metadata = {
   alternates: {
     canonical: '/docs/api/group-selector'
   }
-
 }
 
 # Group Selector
 
-The `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
+Group selectors allow child elements to respond to interactions on a parent element. This is useful for creating interactive cards, list items, and other composite components.
+
+## Basic Usage
+
+Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:
+
+```tsx
+<Box role="group" p={4} bg="$background" borderRadius="8px">
+  <Text _groupHover={{ color: '$primary' }}>
+    This text changes color when parent is hovered
+  </Text>
+  <Box _groupHover={{ bg: '$primaryAlpha10' }} p={2}>
+    This box changes background on parent hover
+  </Box>
+</Box>
+```
+
+## Available Group Selectors
+
+| Selector | Triggered when |
+|----------|----------------|
+| `_groupHover` | Parent with `role="group"` is hovered |
+| `_groupFocus` | Parent with `role="group"` is focused |
+| `_groupActive` | Parent with `role="group"` is active (pressed) |
+| `_groupFocusWithin` | Any element inside the group receives focus |
+
+## Interactive Card Example
+
+```tsx
+<Box
+  role="group"
+  p={4}
+  bg="white"
+  borderRadius="8px"
+  boxShadow="0 1px 3px rgba(0,0,0,0.1)"
+  cursor="pointer"
+  _hover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
+>
+  <Box
+    w="100%"
+    h="200px"
+    bg="$backgroundMuted"
+    borderRadius="4px"
+    overflow="hidden"
+  >
+    <Image
+      src="/image.jpg"
+      _groupHover={{ transform: 'scale(1.05)' }}
+      transition="transform 0.2s"
+    />
+  </Box>
+
+  <Text
+    mt={3}
+    fontWeight={600}
+    _groupHover={{ color: '$primary' }}
+  >
+    Card Title
+  </Text>
+
+  <Text
+    color="$textMuted"
+    fontSize="14px"
+  >
+    Card description goes here
+  </Text>
+
+  <Box
+    mt={3}
+    opacity={0}
+    _groupHover={{ opacity: 1 }}
+    transition="opacity 0.2s"
+  >
+    <Button>View Details</Button>
+  </Box>
+</Box>
+```
+
+## List Item Example
+
+```tsx
+<Box as="ul" listStyle="none" p={0} m={0}>
+  {items.map((item) => (
+    <Box
+      as="li"
+      key={item.id}
+      role="group"
+      p={3}
+      borderBottom="1px solid $border"
+      _hover={{ bg: '$backgroundMuted' }}
+    >
+      <Flex justify="space-between" align="center">
+        <Text _groupHover={{ color: '$primary' }}>
+          {item.title}
+        </Text>
+        <Box
+          opacity={0}
+          _groupHover={{ opacity: 1 }}
+        >
+          <Button size="sm">Edit</Button>
+        </Box>
+      </Flex>
+    </Box>
+  ))}
+</Box>
+```
+
+## Navigation Menu Example
 
-## How to use
+```tsx
+<Box as="nav">
+  <Box
+    role="group"
+    p={2}
+    borderRadius="4px"
+    _hover={{ bg: '$backgroundMuted' }}
+  >
+    <Flex align="center" gap={2}>
+      <Box
+        w="8px"
+        h="8px"
+        borderRadius="50%"
+        bg="$textMuted"
+        _groupHover={{ bg: '$primary' }}
+      />
+      <Text _groupHover={{ color: '$primary' }}>
+        Menu Item
+      </Text>
+      <Box
+        ml="auto"
+        opacity={0}
+        _groupHover={{ opacity: 1 }}
+      >
+        →
+      </Box>
+    </Flex>
+  </Box>
+</Box>
+```
+
+## Combining with Responsive Styles
+
+Group selectors can be combined with responsive arrays:
+
+```tsx
+<Box role="group" p={[2, null, 4]}>
+  <Text
+    _groupHover={{
+      color: ['$primary', null, '$secondary'],
+      fontSize: ['16px', null, '18px']
+    }}
+  >
+    Responsive group hover
+  </Text>
+</Box>
+```
+
+## Nested Groups
+
+For nested groups, the selector applies to the nearest parent with `role="group"`:
+
+```tsx
+<Box role="group" p={4} bg="white">
+  <Text _groupHover={{ color: 'blue' }}>
+    Responds to outer group
+  </Text>
+
+  <Box role="group" p={2} mt={2} bg="$backgroundMuted">
+    <Text _groupHover={{ color: 'red' }}>
+      Responds to inner group
+    </Text>
+  </Box>
+</Box>
+```
+
+## CSS Output
 
 ```tsx
-const group = (
-  <div role="group">
-    <Box _groupHover={{ bg: 'red' }} />
-    <Box _groupHover={{ bg: 'red' }} />
-    <Box _groupHover={{ bg: 'red' }} />
-  </div>
-)
+<Box role="group">
+  <Box _groupHover={{ bg: 'red' }} />
+</Box>
+```
+
+Generates CSS like:
+
+```css
+[role="group"]:hover .a {
+  background-color: red;
+}
 ```
+
+## Best Practices
+
+1. **Use semantic HTML**: Add `role="group"` to semantically appropriate elements
+2. **Keep interactions discoverable**: Don't hide critical content behind group hover
+3. **Consider touch devices**: Group hover doesn't work on touch - provide alternative interactions
+4. **Use transitions**: Add `transition` prop for smooth state changes
+5. **Accessibility**: Ensure interactive elements are keyboard accessible
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index 9bebbe26..4f4d652c 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -3,37 +3,185 @@ export const metadata = {
   alternates: {
     canonical: '/docs/devup/breakpoints'
   }
-
 }
 
 # Breakpoints
 
-You can add responsive design by using an array of maximum 6 elements. The viewport ranges of each style
-value in the array are listed below:
+Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use arrays to apply different styles at different viewport widths.
+
+## Breakpoint Ranges
+
+| Index | Breakpoint | Range | Device |
+|-------|------------|-------|--------|
+| 0 | `xs` | 0px - 479px | Mobile (portrait) |
+| 1 | `sm` | 480px - 767px | Mobile (landscape) |
+| 2 | `md` | 768px - 991px | Tablet |
+| 3 | `lg` | 992px - 1279px | Small desktop |
+| 4 | `xl` | 1280px - 1599px | Desktop |
+| 5 | `2xl` | 1600px+ | Large desktop |
+
+## Basic Usage
+
+Pass an array to any style prop. Each index corresponds to a breakpoint:
+
+```tsx
+<Box bg={['red', 'blue', 'green', 'yellow', 'purple', 'orange']} />
+```
+
+This results in:
+- **0-479px**: red background
+- **480-767px**: blue background
+- **768-991px**: green background
+- **992-1279px**: yellow background
+- **1280-1599px**: purple background
+- **1600px+**: orange background
+
+## Using `null` to Skip Breakpoints
+
+Use `null` to skip a breakpoint and keep the previous value:
+
+```tsx
+<Box bg={['red', null, 'green', null, 'purple']} />
+```
+
+This results in:
+- **0-767px**: red (index 0, then null inherits)
+- **768-1279px**: green (index 2, then null inherits)
+- **1280px+**: purple
 
-- 1st element: ~ 479px,
-- 2nd element: 480px ~ 767px,
-- 3rd element: 768px ~ 991px,
-- 4th element: 992px ~ 1279px,
-- 5th element: 1280px ~ 1599px,
-- 6th element : 1600px ~
+## Shorter Arrays
 
-## How to use
+Arrays shorter than 6 elements apply styles up to their length:
 
 ```tsx
-const box = (
+// Only define mobile and desktop
+<Box fontSize={['14px', null, null, null, '18px']} />
+
+// Shorthand: mobile and tablet only
+<Box p={[2, 4]} />
+```
+
+## Responsive Layout Example
+
+```tsx
+<Flex
+  direction={['column', null, 'row']}
+  gap={[2, null, 4]}
+>
+  <Box
+    w={['100%', null, '50%']}
+    p={[2, null, 4]}
+  >
+    Left content
+  </Box>
   <Box
-    bg={['red', 'blue', 'green', 'yellow', 'purple', 'orange']}
-    h={25}
-    w={25}
+    w={['100%', null, '50%']}
+    p={[2, null, 4]}
   >
-    <Text>Hello</Text>
+    Right content
   </Box>
-)
+</Flex>
 ```
 
-If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design.
-For example, if the array in the example above is changed into `['red', null, 'green', null, 'purple']`,
-the background color of `Box` component will be red from 0px to 767px, green from 768px to 1279px, purple from 1280px.
+- **Mobile (0-767px)**: Stacked vertically, full width, small padding/gap
+- **Tablet+ (768px+)**: Side by side, 50% width each, larger padding/gap
+
+## Responsive Typography
+
+Combine with typography for responsive text:
+
+```tsx
+<Text
+  fontSize={['24px', null, null, null, '48px']}
+  lineHeight={[1.3, null, null, null, 1.2]}
+>
+  Responsive Heading
+</Text>
+```
+
+Or use responsive typography from `devup.json`:
+
+```json
+{
+  "theme": {
+    "typography": {
+      "h1": [
+        { "fontSize": "32px", "fontWeight": 800 },
+        null, null, null,
+        { "fontSize": "48px", "fontWeight": 800 }
+      ]
+    }
+  }
+}
+```
+
+```tsx
+<Text typography="$h1">Responsive Heading</Text>
+```
+
+## Responsive with Pseudo Selectors
+
+Combine responsive arrays with pseudo selectors:
+
+```tsx
+// Different hover colors per breakpoint
+<Box _hover={{ bg: ['blue', null, 'purple'] }} />
+
+// Alternative syntax
+<Box _hover={[{ bg: 'blue' }, null, { bg: 'purple' }]} />
+```
+
+## Common Patterns
+
+### Show/Hide Elements
+
+```tsx
+// Hide on mobile, show on desktop
+<Box display={['none', null, null, null, 'block']}>
+  Desktop only content
+</Box>
+
+// Show on mobile, hide on desktop
+<Box display={['block', null, null, null, 'none']}>
+  Mobile only content
+</Box>
+```
+
+### Responsive Grid
+
+```tsx
+<Grid
+  templateColumns={['1fr', null, 'repeat(2, 1fr)', null, 'repeat(4, 1fr)']}
+  gap={[2, null, 4]}
+>
+  <Box>Item 1</Box>
+  <Box>Item 2</Box>
+  <Box>Item 3</Box>
+  <Box>Item 4</Box>
+</Grid>
+```
+
+- **Mobile**: 1 column
+- **Tablet**: 2 columns
+- **Desktop**: 4 columns
+
+### Responsive Spacing
+
+```tsx
+<Box
+  p={[2, null, 4, null, 6]}
+  m={[2, null, 4]}
+>
+  Content with responsive padding and margin
+</Box>
+```
+
+Remember: numeric values are multiplied by 4. So `p={[2, null, 4]}` becomes `padding: 8px` on mobile and `padding: 16px` on tablet+.
+
+## Best Practices
 
-If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element.
+1. **Mobile-first**: Start with mobile styles at index 0
+2. **Use null wisely**: Skip breakpoints that don't need changes
+3. **Keep it simple**: Not every prop needs 6 values
+4. **Test thoroughly**: Check all breakpoints during development
+5. **Consider performance**: Responsive values generate more CSS - use judiciously
diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
index b6c5a76b..2474ba0d 100644
--- a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -3,35 +3,165 @@ export const metadata = {
   alternates: {
     canonical: '/docs/devup/colors'
   }
-
 }
 
 # Colors
 
-You can directly pass color values to the primitive components.
+Devup UI provides flexible color management through direct values and theme tokens.
+
+## Direct Color Values
+
+You can pass color values directly to any component:
+
+```tsx
+// Hex colors
+<Box bg="#FF0000" />
+<Box bg="#F00" />
+
+// RGB/RGBA
+<Box bg="rgb(255, 0, 0)" />
+<Box bg="rgba(255, 0, 0, 0.5)" />
+
+// HSL
+<Box bg="hsl(0, 100%, 50%)" />
+
+// Named colors
+<Box bg="red" />
+<Box bg="tomato" />
+```
+
+> Devup UI automatically optimizes color values at build time. For example, `rgb(255, 0, 0)` becomes `red` and `#FF0000` becomes `#f00`.
+
+## Theme Colors
+
+For larger projects, define colors in `devup.json` for consistency and theme support:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "secondary": "#7928ca",
+        "success": "#0070f3",
+        "warning": "#f5a623",
+        "error": "#e00",
+        "text": "#000",
+        "textSecondary": "#666",
+        "background": "#fff",
+        "border": "#eaeaea"
+      },
+      "dark": {
+        "primary": "#3291ff",
+        "secondary": "#8a63d2",
+        "success": "#3291ff",
+        "warning": "#f7b955",
+        "error": "#f33",
+        "text": "#fff",
+        "textSecondary": "#888",
+        "background": "#000",
+        "border": "#333"
+      }
+    }
+  }
+}
+```
+
+Use theme colors with the `$` prefix:
 
 ```tsx
-const box = <Box bg="#FF0000" h={25} w={25} />
+<Box bg="$primary" />
+<Text color="$text" />
+<Box borderColor="$border" />
 ```
 
-But, when your project gets larger and more complicated, it could be better to use variables to style your project.
-Pass in the variables that you created in `devup.json`.
+## Multiple Theme Variants
+
+You can define multiple theme variants beyond `default` and `dark`:
 
 ```json
 {
   "theme": {
     "colors": {
-      "light": {
-        "primary": "#FF0000"
+      "default": {
+        "primary": "#0070f3"
       },
       "dark": {
-        "primary": "#FF0000"
+        "primary": "#3291ff"
+      },
+      "blue": {
+        "primary": "#0052cc"
+      },
+      "green": {
+        "primary": "#00875a"
+      }
+    }
+  }
+}
+```
+
+The first key (e.g., `default`) is the default theme. Other themes can be activated using the theme API.
+
+## Semantic Color Naming
+
+Organize colors by their purpose rather than their appearance:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "primaryHover": "#0060df",
+        "primaryActive": "#0050c0",
+
+        "text": "#000",
+        "textMuted": "#666",
+        "textInverse": "#fff",
+
+        "background": "#fff",
+        "backgroundSubtle": "#fafafa",
+        "backgroundMuted": "#f5f5f5",
+
+        "border": "#eaeaea",
+        "borderFocus": "#0070f3",
+
+        "success": "#0070f3",
+        "warning": "#f5a623",
+        "error": "#e00",
+        "info": "#0070f3"
       }
     }
   }
 }
 ```
 
+## Using Colors with Opacity
+
+For transparent variants, use RGBA or define separate tokens:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "primaryAlpha10": "rgba(0, 112, 243, 0.1)",
+        "primaryAlpha20": "rgba(0, 112, 243, 0.2)",
+        "overlay": "rgba(0, 0, 0, 0.5)"
+      }
+    }
+  }
+}
+```
+
+## Type Safety
+
+Theme colors are fully type-safe. TypeScript will autocomplete available color tokens:
+
 ```tsx
-const color = <Box bg="$primary" h={25} w={25} />
+// Autocomplete shows: $primary, $secondary, $text, etc.
+<Box bg="$" />
 ```
+
+Invalid color tokens will show TypeScript errors, ensuring consistency across your codebase.
diff --git a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
index 7eb26bec..8b8ed0f6 100644
--- a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
@@ -3,40 +3,225 @@ export const metadata = {
   alternates: {
     canonical: '/docs/devup/devup-json'
   }
-
 }
 
 # devup.json
 
-You can use `devup.json` file to create themes. Create `devup.json` at the root of your project.
-The structure of the JSON object should like this:
+The `devup.json` file is the configuration file for your Devup UI theme. Create it at the root of your project to define colors, typography, and other design tokens.
+
+## Basic Structure
 
 ```json
 {
   "theme": {
     "colors": {
-      "light": {
-        "primary": "#6159D4",
-        "secondary": "#85A5F2"
+      "default": { },
+      "dark": { }
+    },
+    "typography": { }
+  }
+}
+```
+
+## Complete Example
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "primaryHover": "#0060df",
+        "secondary": "#7928ca",
+        "success": "#0070f3",
+        "warning": "#f5a623",
+        "error": "#e00",
+        "text": "#000",
+        "textMuted": "#666",
+        "background": "#fff",
+        "backgroundMuted": "#fafafa",
+        "border": "#eaeaea"
       },
       "dark": {
-        "primary": "#737FE4",
-        "secondary": "#2A4586"
+        "primary": "#3291ff",
+        "primaryHover": "#2080ef",
+        "secondary": "#8a63d2",
+        "success": "#3291ff",
+        "warning": "#f7b955",
+        "error": "#f33",
+        "text": "#fff",
+        "textMuted": "#888",
+        "background": "#000",
+        "backgroundMuted": "#111",
+        "border": "#333"
       }
     },
     "typography": {
-      "h1": {
+      "h1": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "32px",
+          "fontWeight": 800,
+          "lineHeight": 1.2
+        },
+        null, null, null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "48px",
+          "fontWeight": 800,
+          "lineHeight": 1.2
+        }
+      ],
+      "body": {
         "fontFamily": "Pretendard",
-        "fontStyle": "normal",
-        "fontWeight": 800,
-        "fontSize": "52px",
-        "lineHeight": 1.3
+        "fontSize": "16px",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "caption": {
+        "fontFamily": "Pretendard",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "lineHeight": 1.4
+      }
+    }
+  }
+}
+```
+
+## Colors Configuration
+
+Define color tokens for each theme variant:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "text": "#000"
+      },
+      "dark": {
+        "primary": "#3291ff",
+        "text": "#fff"
       }
     }
   }
 }
 ```
 
-When you pass in the variables as props, Devup will parse it in accordance with `devup.json` file.
+- The first key (`default`) is the default theme applied on initial load
+- Each variant must have the same color token names
+- Colors are accessed with the `$` prefix: `$primary`, `$text`
+
+See [Colors](/docs/devup/colors) for more details.
+
+## Typography Configuration
+
+Define typography styles as objects or responsive arrays:
+
+```json
+{
+  "theme": {
+    "typography": {
+      "heading": {
+        "fontFamily": "Pretendard",
+        "fontSize": "24px",
+        "fontWeight": 700,
+        "lineHeight": 1.3
+      },
+      "responsiveHeading": [
+        { "fontSize": "20px", "fontWeight": 700 },
+        null, null, null,
+        { "fontSize": "32px", "fontWeight": 700 }
+      ]
+    }
+  }
+}
+```
+
+Typography properties:
+- `fontFamily` - Font family name
+- `fontSize` - Font size (e.g., `"16px"`)
+- `fontWeight` - Weight (number like `700` or string like `"bold"`)
+- `fontStyle` - Style (e.g., `"italic"`)
+- `lineHeight` - Line height (number like `1.5` or string like `"150%"`)
+- `letterSpacing` - Letter spacing (e.g., `"-0.02em"`)
+
+See [Typography](/docs/devup/typography) for more details.
+
+## Usage in Components
+
+### Colors
+
+```tsx
+<Box bg="$primary" color="$text" borderColor="$border" />
+```
+
+### Typography
+
+```tsx
+<Text typography="$h1">Heading</Text>
+<Text typography="$body">Body text</Text>
+```
+
+## File Location
+
+The `devup.json` file should be placed at the root of your project:
+
+```
+your-project/
+├── devup.json      <-- here
+├── package.json
+├── src/
+│   └── ...
+└── ...
+```
+
+## Plugin Configuration
+
+By default, plugins look for `devup.json` in the project root. You can customize this:
+
+### Vite
+
+```ts
+import { DevupUI } from '@devup-ui/vite-plugin'
+
+export default defineConfig({
+  plugins: [
+    DevupUI({
+      devupFile: 'config/devup.json',  // custom path
+    }),
+  ],
+})
+```
+
+### Next.js
+
+```js
+const withDevupUI = require('@devup-ui/next-plugin')
+
+module.exports = withDevupUI({
+  devupFile: 'config/devup.json',  // custom path
+})
+```
+
+## Type Generation
+
+When your project builds, Devup UI automatically generates TypeScript types from your `devup.json`. This enables:
+
+- Autocomplete for color and typography tokens
+- Type errors for invalid tokens
+- Consistent usage across your codebase
+
+The types are generated at `df/theme.d.ts`.
+
+## Hot Reload
+
+Changes to `devup.json` trigger hot reload during development. You can:
+
+1. Add new color tokens
+2. Modify existing values
+3. Add typography styles
 
-To see examples, check out Colors and Typography pages.
+And see changes immediately without restarting the dev server.
diff --git a/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
index cef1b653..8f733f26 100644
--- a/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
@@ -3,9 +3,109 @@ export const metadata = {
   alternates: {
     canonical: '/docs/devup/figma-plugin'
   }
-
 }
 
 # Figma Plugin
 
-Devup UI provides a plugin for Figma which can convert layers into code snippets.
+Devup UI provides a Figma plugin that bridges the gap between design and development. Convert Figma layers directly to Devup UI code and export design tokens to `devup.json`.
+
+## Installation
+
+1. Open Figma
+2. Go to **Plugins** > **Browse plugins in Community**
+3. Search for "Devup UI"
+4. Click **Install**
+
+Or visit the [Figma Community page](https://www.figma.com/community/plugin/1446848873498976065/devup-ui) directly.
+
+## Features
+
+### Layer to Code Conversion
+
+Select any layer in Figma and convert it to Devup UI component code:
+
+1. Select a layer (frame, rectangle, text, etc.)
+2. Open Devup UI plugin
+3. Click "Convert to Code"
+4. Copy the generated code
+
+**Example Output:**
+
+```tsx
+<Box
+  bg="#ffffff"
+  borderRadius="8px"
+  boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)"
+  p={4}
+  w="320px"
+>
+  <Text
+    color="#000000"
+    fontSize="24px"
+    fontWeight={700}
+  >
+    Card Title
+  </Text>
+</Box>
+```
+
+### Design Token Export
+
+Export your Figma styles as `devup.json` configuration:
+
+1. Define color styles and text styles in Figma
+2. Open Devup UI plugin
+3. Click "Export Tokens"
+4. Download the generated `devup.json`
+
+**Supported Token Types:**
+
+- **Colors**: Fill colors, stroke colors
+- **Typography**: Text styles with font family, size, weight, line height
+
+### Auto-Detection
+
+The plugin automatically detects:
+
+- Layout properties (padding, gap, alignment)
+- Border radius and shadows
+- Typography settings
+- Color values with automatic optimization
+
+## Usage Tips
+
+### Organizing Figma Styles
+
+For best results, organize your Figma styles with consistent naming:
+
+**Colors:**
+- `primary`
+- `secondary`
+- `text`
+- `background`
+
+**Typography:**
+- `heading/h1`
+- `heading/h2`
+- `body`
+- `caption`
+
+### Working with Variants
+
+Create Figma color style collections for different themes:
+
+- **Light Theme**: Default colors
+- **Dark Theme**: Dark mode colors
+
+The plugin will export these as separate theme variants in `devup.json`.
+
+## Best Practices
+
+1. **Use Figma styles** rather than one-off colors for consistent token export
+2. **Name layers descriptively** for better code readability
+3. **Use Auto Layout** for better layout translation
+4. **Keep designs simple** - complex nested structures may need manual optimization
+
+## Support
+
+For issues or feature requests, visit the [GitHub repository](https://github.com/dev-five-git/devup-ui).
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
index 6af20504..852555d6 100644
--- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -3,26 +3,256 @@ export const metadata = {
   alternates: {
     canonical: '/docs/devup/typography'
   }
-
 }
 
 # Typography
 
-You can create a typography theme in your `devup.json` file and pass variables to `typography` props.
+Devup UI provides a powerful typography system that supports static styles, responsive typography, and theme integration.
+
+## Basic Typography
+
+Define typography styles in `devup.json`:
 
 ```json
 {
   "theme": {
     "typography": {
       "h1": {
-        "fontSize": "24px",
-        "fontWeight": "bold"
+        "fontFamily": "Pretendard",
+        "fontSize": "48px",
+        "fontWeight": 800,
+        "lineHeight": 1.2,
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "fontFamily": "Pretendard",
+        "fontSize": "36px",
+        "fontWeight": 700,
+        "lineHeight": 1.3,
+        "letterSpacing": "-0.02em"
+      },
+      "body": {
+        "fontFamily": "Pretendard",
+        "fontSize": "16px",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "caption": {
+        "fontFamily": "Pretendard",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "lineHeight": 1.4
       }
     }
   }
 }
 ```
 
+Use typography with the `typography` prop:
+
 ```tsx
-const text = <Text typography="h1">Hello</Text>
+<Text typography="$h1">Heading 1</Text>
+<Text typography="$h2">Heading 2</Text>
+<Text typography="$body">Body text</Text>
+<Text typography="$caption">Caption text</Text>
+```
+
+## Typography Properties
+
+Each typography style can include:
+
+| Property | Description | Example |
+|----------|-------------|---------|
+| `fontFamily` | Font family name | `"Pretendard"` |
+| `fontSize` | Font size | `"16px"` |
+| `fontWeight` | Font weight (number or string) | `700` or `"bold"` |
+| `fontStyle` | Font style | `"normal"` or `"italic"` |
+| `lineHeight` | Line height (number or string) | `1.5` or `"150%"` |
+| `letterSpacing` | Letter spacing | `"-0.02em"` |
+| `textTransform` | Text transformation | `"uppercase"` |
+
+## Responsive Typography
+
+Define responsive typography using arrays. Each index corresponds to a breakpoint:
+
+```json
+{
+  "theme": {
+    "typography": {
+      "h1": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "32px",
+          "fontWeight": 800,
+          "lineHeight": 1.2
+        },
+        null,
+        null,
+        null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "48px",
+          "fontWeight": 800,
+          "lineHeight": 1.2
+        }
+      ]
+    }
+  }
+}
+```
+
+The breakpoints are:
+- Index 0: `0px` (mobile)
+- Index 1: `480px`
+- Index 2: `768px`
+- Index 3: `1024px`
+- Index 4: `1280px` (desktop)
+- Index 5: `1640px`
+
+Use `null` to skip a breakpoint and inherit from the previous value.
+
+## Complete Typography Scale
+
+Here's a recommended typography scale:
+
+```json
+{
+  "theme": {
+    "typography": {
+      "h1": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "32px",
+          "fontWeight": 800,
+          "lineHeight": 1.2,
+          "letterSpacing": "-0.03em"
+        },
+        null, null, null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "48px",
+          "fontWeight": 800,
+          "lineHeight": 1.2,
+          "letterSpacing": "-0.03em"
+        }
+      ],
+      "h2": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "lineHeight": 1.3
+        },
+        null, null, null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "36px",
+          "fontWeight": 700,
+          "lineHeight": 1.3
+        }
+      ],
+      "h3": [
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "24px",
+          "fontWeight": 600,
+          "lineHeight": 1.3
+        },
+        null, null, null,
+        {
+          "fontFamily": "Pretendard",
+          "fontSize": "28px",
+          "fontWeight": 600,
+          "lineHeight": 1.3
+        }
+      ],
+      "body": {
+        "fontFamily": "Pretendard",
+        "fontSize": "16px",
+        "fontWeight": 400,
+        "lineHeight": 1.5
+      },
+      "bodyBold": {
+        "fontFamily": "Pretendard",
+        "fontSize": "16px",
+        "fontWeight": 700,
+        "lineHeight": 1.5
+      },
+      "caption": {
+        "fontFamily": "Pretendard",
+        "fontSize": "14px",
+        "fontWeight": 400,
+        "lineHeight": 1.4
+      },
+      "small": {
+        "fontFamily": "Pretendard",
+        "fontSize": "12px",
+        "fontWeight": 400,
+        "lineHeight": 1.4
+      },
+      "buttonL": {
+        "fontFamily": "Pretendard",
+        "fontSize": "18px",
+        "fontWeight": 600,
+        "lineHeight": 1.3
+      },
+      "buttonM": {
+        "fontFamily": "Pretendard",
+        "fontSize": "16px",
+        "fontWeight": 600,
+        "lineHeight": 1.3
+      },
+      "buttonS": {
+        "fontFamily": "Pretendard",
+        "fontSize": "14px",
+        "fontWeight": 600,
+        "lineHeight": 1.3
+      }
+    }
+  }
+}
+```
+
+## Using Typography in Components
+
+```tsx
+// With Text component
+<Text typography="$h1">Main Title</Text>
+<Text typography="$body">Paragraph text goes here.</Text>
+
+// With Box component
+<Box typography="$caption">Caption in a box</Box>
+
+// With styled components
+const Title = styled('h1', {
+  typography: '$h1',
+  color: '$text',
+})
+```
+
+## Combining with Other Styles
+
+Typography can be combined with other style props:
+
+```tsx
+<Text
+  typography="$h1"
+  color="$primary"
+  textAlign="center"
+  mb={4}
+>
+  Centered Title
+</Text>
+```
+
+## Type Safety
+
+Typography tokens are fully type-safe:
+
+```tsx
+// TypeScript autocomplete shows: $h1, $h2, $body, etc.
+<Text typography="$" />
+
+// Invalid tokens show TypeScript errors
+<Text typography="$invalid" /> // Error!
 ```
diff --git a/apps/landing/src/app/(detail)/docs/quick-start/page.mdx b/apps/landing/src/app/(detail)/docs/quick-start/page.mdx
new file mode 100644
index 00000000..783eefc3
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/quick-start/page.mdx
@@ -0,0 +1,202 @@
+export const metadata = {
+  title: 'Quick Start',
+  alternates: {
+    canonical: '/docs/quick-start',
+  },
+}
+
+# Quick Start
+
+Get up and running with Devup UI in 5 minutes.
+
+## 1. Install Packages
+
+```bash
+# Install core library
+npm install @devup-ui/react
+
+# Install plugin for your framework
+npm install @devup-ui/vite-plugin    # for Vite
+npm install @devup-ui/next-plugin    # for Next.js
+npm install @devup-ui/rsbuild-plugin # for Rsbuild
+```
+
+## 2. Configure Your Build Tool
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { DevupUI } from '@devup-ui/vite-plugin'
+
+export default defineConfig({
+  plugins: [react(), DevupUI()],
+})
+```
+
+### Next.js
+
+```js
+// next.config.js
+const { DevupUI } = require('@devup-ui/next-plugin')
+
+module.exports = DevupUI({
+  // your Next.js config
+})
+```
+
+### Rsbuild
+
+```js
+// rsbuild.config.mjs
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
+
+export default defineConfig({
+  plugins: [pluginReact(), DevupUIRsbuildPlugin()],
+})
+```
+
+## 3. Create Your First Component
+
+```tsx
+import { Box, Text, Flex } from '@devup-ui/react'
+
+function Card() {
+  return (
+    <Box
+      bg="white"
+      p={4}
+      borderRadius="8px"
+      boxShadow="0 2px 8px rgba(0,0,0,0.1)"
+    >
+      <Text fontSize="20px" fontWeight={700}>
+        Hello Devup UI!
+      </Text>
+      <Text color="#666" mt={2}>
+        Zero runtime CSS-in-JS
+      </Text>
+    </Box>
+  )
+}
+```
+
+That's it! Run your dev server and see the result.
+
+## 4. Add Theme (Optional)
+
+Create `devup.json` at your project root:
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "primary": "#0070f3",
+        "text": "#000",
+        "textMuted": "#666",
+        "background": "#fff"
+      },
+      "dark": {
+        "primary": "#3291ff",
+        "text": "#fff",
+        "textMuted": "#888",
+        "background": "#000"
+      }
+    }
+  }
+}
+```
+
+Now use theme tokens in your components:
+
+```tsx
+<Box bg="$background" p={4}>
+  <Text color="$text">Themed text</Text>
+  <Text color="$textMuted">Muted text</Text>
+  <Box bg="$primary" p={2} mt={2}>
+    <Text color="white">Primary background</Text>
+  </Box>
+</Box>
+```
+
+## Understanding the Basics
+
+### Style Props
+
+All components accept style props directly:
+
+```tsx
+<Box
+  bg="red"           // background-color
+  color="white"      // color
+  p={4}              // padding (4 * 4 = 16px)
+  m={2}              // margin (2 * 4 = 8px)
+  w="100%"           // width
+  h="200px"          // height
+  borderRadius="8px" // border-radius
+/>
+```
+
+> **Note**: Numeric values for spacing props (`p`, `m`, `gap`, etc.) are multiplied by 4. So `p={4}` equals `padding: 16px`.
+
+### Pseudo Selectors
+
+Use underscore prefix for pseudo selectors:
+
+```tsx
+<Box
+  bg="white"
+  _hover={{ bg: 'blue', color: 'white' }}
+  _active={{ bg: 'darkblue' }}
+>
+  Hover me
+</Box>
+```
+
+### Responsive Design
+
+Use arrays for responsive values:
+
+```tsx
+<Box
+  w={['100%', null, '50%']}       // 100% on mobile, 50% on tablet+
+  p={[2, null, 4]}                 // 8px on mobile, 16px on tablet+
+  fontSize={['14px', null, '16px']}
+>
+  Responsive box
+</Box>
+```
+
+### styled() API
+
+Create reusable styled components:
+
+```tsx
+import { styled } from '@devup-ui/react'
+
+const Button = styled('button', {
+  bg: '$primary',
+  color: 'white',
+  px: 4,
+  py: 2,
+  borderRadius: '4px',
+  border: 'none',
+  cursor: 'pointer',
+  _hover: { opacity: 0.9 },
+})
+
+// Usage
+<Button>Click me</Button>
+```
+
+## Next Steps
+
+- [Features](/docs/features) - Learn all available features
+- [Components API](/docs/api/box) - Explore component props
+- [Colors](/docs/devup/colors) - Set up your color system
+- [Typography](/docs/devup/typography) - Configure typography
+- [Breakpoints](/docs/devup/breakpoints) - Responsive design guide

From e29c1bf1890b1354a0adc75cdb9c32ec08c7e983 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 16 Dec 2025 22:20:29 +0900
Subject: [PATCH 3/4] Fix lint

---
 README.md                                     |  64 ++++++-----
 README_ko.md                                  |  64 ++++++-----
 SKILL.md                                      |  87 ++++++++------
 .../(detail)/docs/api/group-selector/page.mdx | 106 +++++++-----------
 .../(detail)/docs/devup/breakpoints/page.mdx  |  68 +++++------
 .../app/(detail)/docs/devup/colors/page.mdx   |  24 ++--
 .../(detail)/docs/devup/devup-json/page.mdx   |  29 +++--
 .../(detail)/docs/devup/figma-plugin/page.mdx |  12 +-
 .../(detail)/docs/devup/typography/page.mdx   |  68 ++++++-----
 .../src/app/(detail)/docs/features/page.mdx   |  69 ++++++------
 .../src/app/(detail)/docs/overview/page.mdx   |  30 ++---
 .../app/(detail)/docs/quick-start/page.mdx    |  34 +++---
 12 files changed, 327 insertions(+), 328 deletions(-)

diff --git a/README.md b/README.md
index 3c96c5fe..776ba7c9 100644
--- a/README.md
+++ b/README.md
@@ -81,19 +81,19 @@ npm install @devup-ui/webpack-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| Library                        | Version | Build Time | Build Size        |
-| ------------------------------ | ------- | ---------- | ----------------- |
-| tailwindcss                    | 4.1.13  | 19.31s     | 59,521,539 bytes  |
-| styleX                         | 0.15.4  | 41.78s     | 86,869,452 bytes  |
-| vanilla-extract                | 1.17.4  | 19.50s     | 61,494,033 bytes  |
-| kuma-ui                        | 1.5.9   | 20.93s     | 69,924,179 bytes  |
-| panda-css                      | 1.3.1   | 20.64s     | 64,573,260 bytes  |
-| chakra-ui                      | 3.27.0  | 28.81s     | 222,435,802 bytes |
-| mui                            | 7.3.2   | 20.86s     | 97,964,458 bytes  |
-| **devup-ui(per-file css)**     | 1.0.18  | **16.90s** | 59,540,459 bytes  |
-| **devup-ui(single css)**       | 1.0.18  | **17.05s** | **59,520,196 bytes** |
-| tailwindcss(turbopack)         | 4.1.13  | 6.72s      | 5,355,082 bytes   |
-| **devup-ui(single css+turbopack)** | 1.0.18  | 10.34s     | **4,772,050 bytes** |
+| Library                            | Version | Build Time | Build Size           |
+| ---------------------------------- | ------- | ---------- | -------------------- |
+| tailwindcss                        | 4.1.13  | 19.31s     | 59,521,539 bytes     |
+| styleX                             | 0.15.4  | 41.78s     | 86,869,452 bytes     |
+| vanilla-extract                    | 1.17.4  | 19.50s     | 61,494,033 bytes     |
+| kuma-ui                            | 1.5.9   | 20.93s     | 69,924,179 bytes     |
+| panda-css                          | 1.3.1   | 20.64s     | 64,573,260 bytes     |
+| chakra-ui                          | 3.27.0  | 28.81s     | 222,435,802 bytes    |
+| mui                                | 7.3.2   | 20.86s     | 97,964,458 bytes     |
+| **devup-ui(per-file css)**         | 1.0.18  | **16.90s** | 59,540,459 bytes     |
+| **devup-ui(single css)**           | 1.0.18  | **17.05s** | **59,520,196 bytes** |
+| tailwindcss(turbopack)             | 4.1.13  | 6.72s      | 5,355,082 bytes      |
+| **devup-ui(single css+turbopack)** | 1.0.18  | 10.34s     | **4,772,050 bytes**  |
 
 ## How it works
 
@@ -103,10 +103,10 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 ```tsx
 // You write:
-<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+const variable = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
 
 // Devup UI generates:
-<div className="a b c" />
+const variable = <div className="a b c" />
 
 // With CSS:
 // .a { background-color: red; }
@@ -118,10 +118,10 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 ```tsx
 // You write:
-<Box bg={colorVariable} />
+const example = <Box bg={colorVariable} />
 
 // Devup UI generates:
-<div className="a" style={{ '--a': colorVariable }} />
+const example = <div className="a" style={{ '--a': colorVariable }} />
 
 // With CSS:
 // .a { background-color: var(--a); }
@@ -131,13 +131,15 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 ```tsx
 // You write:
-<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
 
 // Devup UI generates:
-<div
-  className={`a b ${isActive ? 'c' : 'd'}`}
-  style={{ '--d': dynamicColor }}
-/>
+const example = (
+  <div
+    className={`a b ${isActive ? 'c' : 'd'}`}
+    style={{ '--d': dynamicColor }}
+  />
+)
 
 // With responsive CSS for each breakpoint
 ```
@@ -173,18 +175,18 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 ```tsx
 // Type-safe theme tokens
-<Text color="$primary" />
-<Box typography="$heading" />
+const textExample = <Text color="$primary" />
+const boxExample = <Box typography="$heading" />
 ```
 
 **Responsive + Pseudo selectors together:**
 
 ```tsx
 // Responsive with pseudo selector
-<Box _hover={{ bg: ['red', 'blue'] }} />
+const example = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Equivalent syntax
-<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 **styled-components / Emotion compatible `styled()` API:**
@@ -195,7 +197,7 @@ import { styled } from '@devup-ui/react'
 // Familiar syntax for styled-components and Emotion users
 const Card = styled('div', {
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
   _hover: {
@@ -204,15 +206,15 @@ const Card = styled('div', {
 })
 
 const Button = styled('button', {
-  px: 4,               // 4 * 4 = 16px
-  py: 2,               // 2 * 4 = 8px
+  px: 4, // 4 * 4 = 16px
+  py: 2, // 2 * 4 = 8px
   borderRadius: '4px',
   cursor: 'pointer',
 })
 
 // Usage
-<Card>Content</Card>
-<Button>Click me</Button>
+const cardExample = <Card>Content</Card>
+const buttonExample = <Button>Click me</Button>
 ```
 
 ## Inspirations
diff --git a/README_ko.md b/README_ko.md
index 1ee849c9..05537c55 100644
--- a/README_ko.md
+++ b/README_ko.md
@@ -81,19 +81,19 @@ npm install @devup-ui/webpack-plugin
 
 Next.js Build Time and Build Size (github action - ubuntu-latest)
 
-| 라이브러리                         | 버전   | 빌드 시간  | 빌드 사이즈           |
-| ---------------------------------- | ------ | ---------- | --------------------- |
-| tailwindcss                        | 4.1.13 | 19.31s     | 59,521,539 bytes      |
-| styleX                             | 0.15.4 | 41.78s     | 86,869,452 bytes      |
-| vanilla-extract                    | 1.17.4 | 19.50s     | 61,494,033 bytes      |
-| kuma-ui                            | 1.5.9  | 20.93s     | 69,924,179 bytes      |
-| panda-css                          | 1.3.1  | 20.64s     | 64,573,260 bytes      |
-| chakra-ui                          | 3.27.0 | 28.81s     | 222,435,802 bytes     |
-| mui                                | 7.3.2  | 20.86s     | 97,964,458 bytes      |
-| **devup-ui(per-file css)**         | 1.0.18 | **16.90s** | 59,540,459 bytes      |
-| **devup-ui(single css)**           | 1.0.18 | **17.05s** | **59,520,196 bytes**  |
-| tailwindcss(turbopack)             | 4.1.13 | 6.72s      | 5,355,082 bytes       |
-| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s     | **4,772,050 bytes**   |
+| 라이브러리                         | 버전   | 빌드 시간  | 빌드 사이즈          |
+| ---------------------------------- | ------ | ---------- | -------------------- |
+| tailwindcss                        | 4.1.13 | 19.31s     | 59,521,539 bytes     |
+| styleX                             | 0.15.4 | 41.78s     | 86,869,452 bytes     |
+| vanilla-extract                    | 1.17.4 | 19.50s     | 61,494,033 bytes     |
+| kuma-ui                            | 1.5.9  | 20.93s     | 69,924,179 bytes     |
+| panda-css                          | 1.3.1  | 20.64s     | 64,573,260 bytes     |
+| chakra-ui                          | 3.27.0 | 28.81s     | 222,435,802 bytes    |
+| mui                                | 7.3.2  | 20.86s     | 97,964,458 bytes     |
+| **devup-ui(per-file css)**         | 1.0.18 | **16.90s** | 59,540,459 bytes     |
+| **devup-ui(single css)**           | 1.0.18 | **17.05s** | **59,520,196 bytes** |
+| tailwindcss(turbopack)             | 4.1.13 | 6.72s      | 5,355,082 bytes      |
+| **devup-ui(single css+turbopack)** | 1.0.18 | 10.34s     | **4,772,050 bytes**  |
 
 ## 작동 원리
 
@@ -103,10 +103,10 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
 
 ```tsx
 // 개발자가 작성:
-<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
 
 // Devup UI가 생성:
-<div className="a b c" />
+const generated = <div className="a b c" />
 
 // CSS:
 // .a { background-color: red; }
@@ -118,10 +118,10 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
 
 ```tsx
 // 개발자가 작성:
-<Box bg={colorVariable} />
+const example = <Box bg={colorVariable} />
 
 // Devup UI가 생성:
-<div className="a" style={{ '--a': colorVariable }} />
+const generated = <div className="a" style={{ '--a': colorVariable }} />
 
 // CSS:
 // .a { background-color: var(--a); }
@@ -131,13 +131,15 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
 
 ```tsx
 // 개발자가 작성:
-<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
 
 // Devup UI가 생성:
-<div
-  className={`a b ${isActive ? 'c' : 'd'}`}
-  style={{ '--d': dynamicColor }}
-/>
+const generated = (
+  <div
+    className={`a b ${isActive ? 'c' : 'd'}`}
+    style={{ '--d': dynamicColor }}
+  />
+)
 
 // 각 브레이크포인트에 대한 반응형 CSS 생성
 ```
@@ -173,18 +175,18 @@ Devup UI는 빌드 타임에 컴포넌트를 변환합니다. 클래스명은 CS
 
 ```tsx
 // 타입 세이프 테마 토큰
-<Text color="$primary" />
-<Box typography="$heading" />
+const textExample = <Text color="$primary" />
+const boxExample = <Box typography="$heading" />
 ```
 
 **반응형 + 가상 선택자 동시 사용:**
 
 ```tsx
 // 반응형과 가상 선택자 함께 사용
-<Box _hover={{ bg: ['red', 'blue'] }} />
+const example = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // 동일한 표현
-<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 **styled-components / Emotion 호환 `styled()` API:**
@@ -195,7 +197,7 @@ import { styled } from '@devup-ui/react'
 // styled-components, Emotion 사용자에게 익숙한 문법
 const Card = styled('div', {
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
   _hover: {
@@ -205,15 +207,15 @@ const Card = styled('div', {
 
 // 버튼 예시
 const Button = styled('button', {
-  px: 4,               // 4 * 4 = 16px
-  py: 2,               // 2 * 4 = 8px
+  px: 4, // 4 * 4 = 16px
+  py: 2, // 2 * 4 = 8px
   borderRadius: '4px',
   cursor: 'pointer',
 })
 
 // 사용
-<Card>Content</Card>
-<Button>Click me</Button>
+const cardExample = <Card>Content</Card>
+const buttonExample = <Button>Click me</Button>
 ```
 
 ## 영감
diff --git a/SKILL.md b/SKILL.md
index a9cacaee..e0f29a66 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -34,14 +34,14 @@ devup-ui/
 
 ### Build-Time Transformation
 
-Components are transformed at build time. Class names are generated using a compact base-37 encoding (a-z, 0-9, _) for minimal CSS size:
+Components are transformed at build time. Class names are generated using a compact base-37 encoding (a-z, 0-9, \_) for minimal CSS size:
 
 ```tsx
 // Developer writes:
-<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
 
 // Transformed to:
-<div className="a b c" />
+const generated = <div className="a b c" />
 
 // Generated CSS:
 // .a { background-color: red; }
@@ -55,10 +55,10 @@ Dynamic values become CSS variables:
 
 ```tsx
 // Developer writes:
-<Box bg={colorVariable} />
+const example = <Box bg={colorVariable} />
 
 // Transformed to:
-<div className="a" style={{ '--a': colorVariable }} />
+const generated = <div className="a" style={{ '--a': colorVariable }} />
 
 // Generated CSS:
 // .a { background-color: var(--a); }
@@ -84,12 +84,12 @@ Components accept style props directly:
 
 ```tsx
 <Box
+  _dark={{ bg: 'gray' }} // Theme variant
+  _hover={{ bg: 'blue' }} // Pseudo-selector
   bg="red"
   color="white"
+  m={[2, 4]} // Responsive: mobile=2, desktop=4
   p={4}
-  m={[2, 4]}              // Responsive: mobile=2, desktop=4
-  _hover={{ bg: "blue" }} // Pseudo-selector
-  _dark={{ bg: "gray" }}  // Theme variant
 />
 ```
 
@@ -105,10 +105,10 @@ import { css } from '@devup-ui/react'
 const styles = css({
   bg: 'red',
   p: 4,
-  _hover: { bg: 'blue' }
+  _hover: { bg: 'blue' },
 })
 
-<Box {...styles} />
+const example = <Box {...styles} />
 ```
 
 ### styled()
@@ -121,7 +121,7 @@ import { styled } from '@devup-ui/react'
 // Familiar syntax for styled-components and Emotion users
 const Card = styled('div', {
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
   _hover: {
@@ -132,8 +132,8 @@ const Card = styled('div', {
 const Button = styled('button', {
   bg: 'blue',
   color: 'white',
-  px: 4,               // 4 * 4 = 16px
-  py: 2,               // 2 * 4 = 8px
+  px: 4, // 4 * 4 = 16px
+  py: 2, // 2 * 4 = 8px
   borderRadius: '4px',
   cursor: 'pointer',
   _hover: { bg: 'darkblue' },
@@ -150,7 +150,7 @@ import { globalCss } from '@devup-ui/react'
 
 globalCss({
   body: { margin: 0 },
-  '*': { boxSizing: 'border-box' }
+  '*': { boxSizing: 'border-box' },
 })
 ```
 
@@ -163,10 +163,10 @@ import { keyframes } from '@devup-ui/react'
 
 const spin = keyframes({
   from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' }
+  to: { transform: 'rotate(360deg)' },
 })
 
-<Box animation={`${spin} 1s linear infinite`} />
+const example = <Box animation={`${spin} 1s linear infinite`} />
 ```
 
 ## Theme Configuration
@@ -219,10 +219,19 @@ Create `devup.json` in project root:
 ### Theme API
 
 ```tsx
-import { useTheme, setTheme, getTheme, initTheme, ThemeScript } from '@devup-ui/react'
-
-// Get current theme
-const theme = useTheme()
+import {
+  getTheme,
+  initTheme,
+  setTheme,
+  ThemeScript,
+  useTheme,
+} from '@devup-ui/react'
+
+// Get current theme (inside component)
+function MyComponent() {
+  const theme = useTheme()
+  return null
+}
 
 // Set theme
 setTheme('dark')
@@ -234,7 +243,7 @@ initTheme()
 const currentTheme = getTheme()
 
 // Hydration script (add to HTML head)
-<ThemeScript />
+const themeScript = <ThemeScript />
 ```
 
 ## Build Plugin Configuration
@@ -243,21 +252,21 @@ const currentTheme = getTheme()
 
 ```ts
 // vite.config.ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import DevupUI from '@devup-ui/vite-plugin'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
     react(),
     DevupUI({
-      package: '@devup-ui/react',    // Target package
-      cssDir: 'df/devup-ui',         // CSS output directory
-      devupFile: 'devup.json',       // Theme config file
-      extractCss: true,              // Enable CSS extraction
-      singleCss: false,              // Single vs per-file CSS
-      debug: false,                  // Debug mode
-      include: [],                   // Additional packages to process
+      package: '@devup-ui/react', // Target package
+      cssDir: 'df/devup-ui', // CSS output directory
+      devupFile: 'devup.json', // Theme config file
+      extractCss: true, // Enable CSS extraction
+      singleCss: false, // Single vs per-file CSS
+      debug: false, // Debug mode
+      include: [], // Additional packages to process
     }),
   ],
 })
@@ -289,8 +298,8 @@ module.exports = {
 
 ```ts
 // rsbuild.config.ts
-import { defineConfig } from '@rsbuild/core'
 import DevupUI from '@devup-ui/rsbuild-plugin'
+import { defineConfig } from '@rsbuild/core'
 
 export default defineConfig({
   plugins: [DevupUI()],
@@ -333,15 +342,19 @@ pnpm benchmark
 ### Basic Component Usage
 
 ```tsx
-import { Box, Flex, Text, Button } from '@devup-ui/react'
+import { Box, Button, Flex, Text } from '@devup-ui/react'
 
 function Card() {
   return (
-    <Box bg="white" p={4} borderRadius="lg" boxShadow="md">
-      <Text fontSize="lg" fontWeight="bold">Title</Text>
+    <Box bg="white" borderRadius="lg" boxShadow="md" p={4}>
+      <Text fontSize="lg" fontWeight="bold">
+        Title
+      </Text>
       <Text color="gray.600">Description</Text>
       <Flex gap={2} mt={4}>
-        <Button bg="primary" color="white">Action</Button>
+        <Button bg="primary" color="white">
+          Action
+        </Button>
       </Flex>
     </Box>
   )
@@ -356,9 +369,9 @@ import { Box } from '@devup-ui/react'
 function ThemeCard() {
   return (
     <Box
+      _dark={{ bg: '$colors.background', color: '$colors.text' }}
       bg="$colors.background"
       color="$colors.text"
-      _dark={{ bg: '$colors.background', color: '$colors.text' }}
       p={4}
     >
       This adapts to the current theme
@@ -376,7 +389,7 @@ function DynamicBox({ isActive, color }) {
   return (
     <Box
       bg={isActive ? 'blue' : 'gray'}
-      color={color}  // Dynamic value becomes CSS variable
+      color={color} // Dynamic value becomes CSS variable
       p={4}
     />
   )
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
index ac6ee68c..c84ed147 100644
--- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Group Selector',
   alternates: {
-    canonical: '/docs/api/group-selector'
-  }
+    canonical: '/docs/api/group-selector',
+  },
 }
 
 # Group Selector
@@ -14,7 +14,7 @@ Group selectors allow child elements to respond to interactions on a parent elem
 Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:
 
 ```tsx
-<Box role="group" p={4} bg="$background" borderRadius="8px">
+<Box bg="$background" borderRadius="8px" p={4} role="group">
   <Text _groupHover={{ color: '$primary' }}>
     This text changes color when parent is hovered
   </Text>
@@ -26,58 +26,51 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 
 ## Available Group Selectors
 
-| Selector | Triggered when |
-|----------|----------------|
-| `_groupHover` | Parent with `role="group"` is hovered |
-| `_groupFocus` | Parent with `role="group"` is focused |
-| `_groupActive` | Parent with `role="group"` is active (pressed) |
-| `_groupFocusWithin` | Any element inside the group receives focus |
+| Selector            | Triggered when                                 |
+| ------------------- | ---------------------------------------------- |
+| `_groupHover`       | Parent with `role="group"` is hovered          |
+| `_groupFocus`       | Parent with `role="group"` is focused          |
+| `_groupActive`      | Parent with `role="group"` is active (pressed) |
+| `_groupFocusWithin` | Any element inside the group receives focus    |
 
 ## Interactive Card Example
 
 ```tsx
 <Box
-  role="group"
-  p={4}
+  _hover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
   bg="white"
   borderRadius="8px"
   boxShadow="0 1px 3px rgba(0,0,0,0.1)"
   cursor="pointer"
-  _hover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
+  p={4}
+  role="group"
 >
   <Box
-    w="100%"
-    h="200px"
     bg="$backgroundMuted"
     borderRadius="4px"
+    h="200px"
     overflow="hidden"
+    w="100%"
   >
     <Image
-      src="/image.jpg"
       _groupHover={{ transform: 'scale(1.05)' }}
+      src="/image.jpg"
       transition="transform 0.2s"
     />
   </Box>
 
-  <Text
-    mt={3}
-    fontWeight={600}
-    _groupHover={{ color: '$primary' }}
-  >
+  <Text _groupHover={{ color: '$primary' }} fontWeight={600} mt={3}>
     Card Title
   </Text>
 
-  <Text
-    color="$textMuted"
-    fontSize="14px"
-  >
+  <Text color="$textMuted" fontSize="14px">
     Card description goes here
   </Text>
 
   <Box
+    _groupHover={{ opacity: 1 }}
     mt={3}
     opacity={0}
-    _groupHover={{ opacity: 1 }}
     transition="opacity 0.2s"
   >
     <Button>View Details</Button>
@@ -88,24 +81,19 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 ## List Item Example
 
 ```tsx
-<Box as="ul" listStyle="none" p={0} m={0}>
+<Box as="ul" listStyle="none" m={0} p={0}>
   {items.map((item) => (
     <Box
-      as="li"
       key={item.id}
-      role="group"
-      p={3}
-      borderBottom="1px solid $border"
       _hover={{ bg: '$backgroundMuted' }}
+      as="li"
+      borderBottom="1px solid $border"
+      p={3}
+      role="group"
     >
-      <Flex justify="space-between" align="center">
-        <Text _groupHover={{ color: '$primary' }}>
-          {item.title}
-        </Text>
-        <Box
-          opacity={0}
-          _groupHover={{ opacity: 1 }}
-        >
+      <Flex align="center" justify="space-between">
+        <Text _groupHover={{ color: '$primary' }}>{item.title}</Text>
+        <Box _groupHover={{ opacity: 1 }} opacity={0}>
           <Button size="sm">Edit</Button>
         </Box>
       </Flex>
@@ -119,27 +107,21 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 ```tsx
 <Box as="nav">
   <Box
-    role="group"
-    p={2}
-    borderRadius="4px"
     _hover={{ bg: '$backgroundMuted' }}
+    borderRadius="4px"
+    p={2}
+    role="group"
   >
     <Flex align="center" gap={2}>
       <Box
-        w="8px"
-        h="8px"
-        borderRadius="50%"
-        bg="$textMuted"
         _groupHover={{ bg: '$primary' }}
+        bg="$textMuted"
+        borderRadius="50%"
+        h="8px"
+        w="8px"
       />
-      <Text _groupHover={{ color: '$primary' }}>
-        Menu Item
-      </Text>
-      <Box
-        ml="auto"
-        opacity={0}
-        _groupHover={{ opacity: 1 }}
-      >
+      <Text _groupHover={{ color: '$primary' }}>Menu Item</Text>
+      <Box _groupHover={{ opacity: 1 }} ml="auto" opacity={0}>
         →
       </Box>
     </Flex>
@@ -152,11 +134,11 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
 Group selectors can be combined with responsive arrays:
 
 ```tsx
-<Box role="group" p={[2, null, 4]}>
+<Box p={[2, null, 4]} role="group">
   <Text
     _groupHover={{
       color: ['$primary', null, '$secondary'],
-      fontSize: ['16px', null, '18px']
+      fontSize: ['16px', null, '18px'],
     }}
   >
     Responsive group hover
@@ -169,15 +151,11 @@ Group selectors can be combined with responsive arrays:
 For nested groups, the selector applies to the nearest parent with `role="group"`:
 
 ```tsx
-<Box role="group" p={4} bg="white">
-  <Text _groupHover={{ color: 'blue' }}>
-    Responds to outer group
-  </Text>
+<Box bg="white" p={4} role="group">
+  <Text _groupHover={{ color: 'blue' }}>Responds to outer group</Text>
 
-  <Box role="group" p={2} mt={2} bg="$backgroundMuted">
-    <Text _groupHover={{ color: 'red' }}>
-      Responds to inner group
-    </Text>
+  <Box bg="$backgroundMuted" mt={2} p={2} role="group">
+    <Text _groupHover={{ color: 'red' }}>Responds to inner group</Text>
   </Box>
 </Box>
 ```
@@ -193,7 +171,7 @@ For nested groups, the selector applies to the nearest parent with `role="group"
 Generates CSS like:
 
 ```css
-[role="group"]:hover .a {
+[role='group']:hover .a {
   background-color: red;
 }
 ```
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index 4f4d652c..638ee397 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Breakpoints',
   alternates: {
-    canonical: '/docs/devup/breakpoints'
-  }
+    canonical: '/docs/devup/breakpoints',
+  },
 }
 
 # Breakpoints
@@ -11,14 +11,14 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar
 
 ## Breakpoint Ranges
 
-| Index | Breakpoint | Range | Device |
-|-------|------------|-------|--------|
-| 0 | `xs` | 0px - 479px | Mobile (portrait) |
-| 1 | `sm` | 480px - 767px | Mobile (landscape) |
-| 2 | `md` | 768px - 991px | Tablet |
-| 3 | `lg` | 992px - 1279px | Small desktop |
-| 4 | `xl` | 1280px - 1599px | Desktop |
-| 5 | `2xl` | 1600px+ | Large desktop |
+| Index | Breakpoint | Range           | Device             |
+| ----- | ---------- | --------------- | ------------------ |
+| 0     | `xs`       | 0px - 479px     | Mobile (portrait)  |
+| 1     | `sm`       | 480px - 767px   | Mobile (landscape) |
+| 2     | `md`       | 768px - 991px   | Tablet             |
+| 3     | `lg`       | 992px - 1279px  | Small desktop      |
+| 4     | `xl`       | 1280px - 1599px | Desktop            |
+| 5     | `2xl`      | 1600px+         | Large desktop      |
 
 ## Basic Usage
 
@@ -29,6 +29,7 @@ Pass an array to any style prop. Each index corresponds to a breakpoint:
 ```
 
 This results in:
+
 - **0-479px**: red background
 - **480-767px**: blue background
 - **768-991px**: green background
@@ -45,6 +46,7 @@ Use `null` to skip a breakpoint and keep the previous value:
 ```
 
 This results in:
+
 - **0-767px**: red (index 0, then null inherits)
 - **768-1279px**: green (index 2, then null inherits)
 - **1280px+**: purple
@@ -55,29 +57,20 @@ Arrays shorter than 6 elements apply styles up to their length:
 
 ```tsx
 // Only define mobile and desktop
-<Box fontSize={['14px', null, null, null, '18px']} />
+const example = <Box fontSize={['14px', null, null, null, '18px']} />
 
 // Shorthand: mobile and tablet only
-<Box p={[2, 4]} />
+const example2 = <Box p={[2, 4]} />
 ```
 
 ## Responsive Layout Example
 
 ```tsx
-<Flex
-  direction={['column', null, 'row']}
-  gap={[2, null, 4]}
->
-  <Box
-    w={['100%', null, '50%']}
-    p={[2, null, 4]}
-  >
+<Flex direction={['column', null, 'row']} gap={[2, null, 4]}>
+  <Box p={[2, null, 4]} w={['100%', null, '50%']}>
     Left content
   </Box>
-  <Box
-    w={['100%', null, '50%']}
-    p={[2, null, 4]}
-  >
+  <Box p={[2, null, 4]} w={['100%', null, '50%']}>
     Right content
   </Box>
 </Flex>
@@ -107,7 +100,9 @@ Or use responsive typography from `devup.json`:
     "typography": {
       "h1": [
         { "fontSize": "32px", "fontWeight": 800 },
-        null, null, null,
+        null,
+        null,
+        null,
         { "fontSize": "48px", "fontWeight": 800 }
       ]
     }
@@ -125,10 +120,10 @@ Combine responsive arrays with pseudo selectors:
 
 ```tsx
 // Different hover colors per breakpoint
-<Box _hover={{ bg: ['blue', null, 'purple'] }} />
+const example = <Box _hover={{ bg: ['blue', null, 'purple'] }} />
 
 // Alternative syntax
-<Box _hover={[{ bg: 'blue' }, null, { bg: 'purple' }]} />
+const example2 = <Box _hover={[{ bg: 'blue' }, null, { bg: 'purple' }]} />
 ```
 
 ## Common Patterns
@@ -137,22 +132,22 @@ Combine responsive arrays with pseudo selectors:
 
 ```tsx
 // Hide on mobile, show on desktop
-<Box display={['none', null, null, null, 'block']}>
-  Desktop only content
-</Box>
+const example = (
+  <Box display={['none', null, null, null, 'block']}>Desktop only content</Box>
+)
 
 // Show on mobile, hide on desktop
-<Box display={['block', null, null, null, 'none']}>
-  Mobile only content
-</Box>
+const example2 = (
+  <Box display={['block', null, null, null, 'none']}>Mobile only content</Box>
+)
 ```
 
 ### Responsive Grid
 
 ```tsx
 <Grid
-  templateColumns={['1fr', null, 'repeat(2, 1fr)', null, 'repeat(4, 1fr)']}
   gap={[2, null, 4]}
+  templateColumns={['1fr', null, 'repeat(2, 1fr)', null, 'repeat(4, 1fr)']}
 >
   <Box>Item 1</Box>
   <Box>Item 2</Box>
@@ -168,10 +163,7 @@ Combine responsive arrays with pseudo selectors:
 ### Responsive Spacing
 
 ```tsx
-<Box
-  p={[2, null, 4, null, 6]}
-  m={[2, null, 4]}
->
+<Box m={[2, null, 4]} p={[2, null, 4, null, 6]}>
   Content with responsive padding and margin
 </Box>
 ```
diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
index 2474ba0d..ada89994 100644
--- a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Colors',
   alternates: {
-    canonical: '/docs/devup/colors'
-  }
+    canonical: '/docs/devup/colors',
+  },
 }
 
 # Colors
@@ -15,19 +15,19 @@ You can pass color values directly to any component:
 
 ```tsx
 // Hex colors
-<Box bg="#FF0000" />
-<Box bg="#F00" />
+const example1 = <Box bg="#FF0000" />
+const example2 = <Box bg="#F00" />
 
 // RGB/RGBA
-<Box bg="rgb(255, 0, 0)" />
-<Box bg="rgba(255, 0, 0, 0.5)" />
+const example3 = <Box bg="rgb(255, 0, 0)" />
+const example4 = <Box bg="rgba(255, 0, 0, 0.5)" />
 
 // HSL
-<Box bg="hsl(0, 100%, 50%)" />
+const example5 = <Box bg="hsl(0, 100%, 50%)" />
 
 // Named colors
-<Box bg="red" />
-<Box bg="tomato" />
+const example6 = <Box bg="red" />
+const example7 = <Box bg="tomato" />
 ```
 
 > Devup UI automatically optimizes color values at build time. For example, `rgb(255, 0, 0)` becomes `red` and `#FF0000` becomes `#f00`.
@@ -70,9 +70,9 @@ For larger projects, define colors in `devup.json` for consistency and theme sup
 Use theme colors with the `$` prefix:
 
 ```tsx
-<Box bg="$primary" />
-<Text color="$text" />
-<Box borderColor="$border" />
+const boxExample1 = <Box bg="$primary" />
+const textExample = <Text color="$text" />
+const boxExample2 = <Box borderColor="$border" />
 ```
 
 ## Multiple Theme Variants
diff --git a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
index 8b8ed0f6..584de35e 100644
--- a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'devup.json',
   alternates: {
-    canonical: '/docs/devup/devup-json'
-  }
+    canonical: '/docs/devup/devup-json',
+  },
 }
 
 # devup.json
@@ -15,10 +15,10 @@ The `devup.json` file is the configuration file for your Devup UI theme. Create
 {
   "theme": {
     "colors": {
-      "default": { },
-      "dark": { }
+      "default": {},
+      "dark": {}
     },
-    "typography": { }
+    "typography": {}
   }
 }
 ```
@@ -64,7 +64,9 @@ The `devup.json` file is the configuration file for your Devup UI theme. Create
           "fontWeight": 800,
           "lineHeight": 1.2
         },
-        null, null, null,
+        null,
+        null,
+        null,
         {
           "fontFamily": "Pretendard",
           "fontSize": "48px",
@@ -132,7 +134,9 @@ Define typography styles as objects or responsive arrays:
       },
       "responsiveHeading": [
         { "fontSize": "20px", "fontWeight": 700 },
-        null, null, null,
+        null,
+        null,
+        null,
         { "fontSize": "32px", "fontWeight": 700 }
       ]
     }
@@ -141,6 +145,7 @@ Define typography styles as objects or responsive arrays:
 ```
 
 Typography properties:
+
 - `fontFamily` - Font family name
 - `fontSize` - Font size (e.g., `"16px"`)
 - `fontWeight` - Weight (number like `700` or string like `"bold"`)
@@ -155,14 +160,14 @@ See [Typography](/docs/devup/typography) for more details.
 ### Colors
 
 ```tsx
-<Box bg="$primary" color="$text" borderColor="$border" />
+<Box bg="$primary" borderColor="$border" color="$text" />
 ```
 
 ### Typography
 
 ```tsx
-<Text typography="$h1">Heading</Text>
-<Text typography="$body">Body text</Text>
+const headingExample = <Text typography="$h1">Heading</Text>
+const bodyExample = <Text typography="$body">Body text</Text>
 ```
 
 ## File Location
@@ -190,7 +195,7 @@ import { DevupUI } from '@devup-ui/vite-plugin'
 export default defineConfig({
   plugins: [
     DevupUI({
-      devupFile: 'config/devup.json',  // custom path
+      devupFile: 'config/devup.json', // custom path
     }),
   ],
 })
@@ -202,7 +207,7 @@ export default defineConfig({
 const withDevupUI = require('@devup-ui/next-plugin')
 
 module.exports = withDevupUI({
-  devupFile: 'config/devup.json',  // custom path
+  devupFile: 'config/devup.json', // custom path
 })
 ```
 
diff --git a/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
index 8f733f26..b8601bf3 100644
--- a/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Figma Plugin',
   alternates: {
-    canonical: '/docs/devup/figma-plugin'
-  }
+    canonical: '/docs/devup/figma-plugin',
+  },
 }
 
 # Figma Plugin
@@ -39,11 +39,7 @@ Select any layer in Figma and convert it to Devup UI component code:
   p={4}
   w="320px"
 >
-  <Text
-    color="#000000"
-    fontSize="24px"
-    fontWeight={700}
-  >
+  <Text color="#000000" fontSize="24px" fontWeight={700}>
     Card Title
   </Text>
 </Box>
@@ -79,12 +75,14 @@ The plugin automatically detects:
 For best results, organize your Figma styles with consistent naming:
 
 **Colors:**
+
 - `primary`
 - `secondary`
 - `text`
 - `background`
 
 **Typography:**
+
 - `heading/h1`
 - `heading/h2`
 - `body`
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
index 852555d6..dee9d86b 100644
--- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -1,8 +1,8 @@
 export const metadata = {
   title: 'Typography',
   alternates: {
-    canonical: '/docs/devup/typography'
-  }
+    canonical: '/docs/devup/typography',
+  },
 }
 
 # Typography
@@ -51,25 +51,25 @@ Define typography styles in `devup.json`:
 Use typography with the `typography` prop:
 
 ```tsx
-<Text typography="$h1">Heading 1</Text>
-<Text typography="$h2">Heading 2</Text>
-<Text typography="$body">Body text</Text>
-<Text typography="$caption">Caption text</Text>
+const h1Example = <Text typography="$h1">Heading 1</Text>
+const h2Example = <Text typography="$h2">Heading 2</Text>
+const bodyExample = <Text typography="$body">Body text</Text>
+const captionExample = <Text typography="$caption">Caption text</Text>
 ```
 
 ## Typography Properties
 
 Each typography style can include:
 
-| Property | Description | Example |
-|----------|-------------|---------|
-| `fontFamily` | Font family name | `"Pretendard"` |
-| `fontSize` | Font size | `"16px"` |
-| `fontWeight` | Font weight (number or string) | `700` or `"bold"` |
-| `fontStyle` | Font style | `"normal"` or `"italic"` |
-| `lineHeight` | Line height (number or string) | `1.5` or `"150%"` |
-| `letterSpacing` | Letter spacing | `"-0.02em"` |
-| `textTransform` | Text transformation | `"uppercase"` |
+| Property        | Description                    | Example                  |
+| --------------- | ------------------------------ | ------------------------ |
+| `fontFamily`    | Font family name               | `"Pretendard"`           |
+| `fontSize`      | Font size                      | `"16px"`                 |
+| `fontWeight`    | Font weight (number or string) | `700` or `"bold"`        |
+| `fontStyle`     | Font style                     | `"normal"` or `"italic"` |
+| `lineHeight`    | Line height (number or string) | `1.5` or `"150%"`        |
+| `letterSpacing` | Letter spacing                 | `"-0.02em"`              |
+| `textTransform` | Text transformation            | `"uppercase"`            |
 
 ## Responsive Typography
 
@@ -102,6 +102,7 @@ Define responsive typography using arrays. Each index corresponds to a breakpoin
 ```
 
 The breakpoints are:
+
 - Index 0: `0px` (mobile)
 - Index 1: `480px`
 - Index 2: `768px`
@@ -127,7 +128,9 @@ Here's a recommended typography scale:
           "lineHeight": 1.2,
           "letterSpacing": "-0.03em"
         },
-        null, null, null,
+        null,
+        null,
+        null,
         {
           "fontFamily": "Pretendard",
           "fontSize": "48px",
@@ -143,7 +146,9 @@ Here's a recommended typography scale:
           "fontWeight": 700,
           "lineHeight": 1.3
         },
-        null, null, null,
+        null,
+        null,
+        null,
         {
           "fontFamily": "Pretendard",
           "fontSize": "36px",
@@ -158,7 +163,9 @@ Here's a recommended typography scale:
           "fontWeight": 600,
           "lineHeight": 1.3
         },
-        null, null, null,
+        null,
+        null,
+        null,
         {
           "fontFamily": "Pretendard",
           "fontSize": "28px",
@@ -217,12 +224,14 @@ Here's a recommended typography scale:
 
 ```tsx
 // With Text component
-<Text typography="$h1">Main Title</Text>
-<Text typography="$body">Paragraph text goes here.</Text>
+const titleExample = <Text typography="$h1">Main Title</Text>
+const bodyExample = <Text typography="$body">Paragraph text goes here.</Text>
 
 // With Box component
-<Box typography="$caption">Caption in a box</Box>
+const boxExample = <Box typography="$caption">Caption in a box</Box>
+```
 
+```tsx
 // With styled components
 const Title = styled('h1', {
   typography: '$h1',
@@ -235,14 +244,11 @@ const Title = styled('h1', {
 Typography can be combined with other style props:
 
 ```tsx
-<Text
-  typography="$h1"
-  color="$primary"
-  textAlign="center"
-  mb={4}
->
-  Centered Title
-</Text>
+const example = (
+  <Text color="$primary" mb={4} textAlign="center" typography="$h1">
+    Centered Title
+  </Text>
+)
 ```
 
 ## Type Safety
@@ -251,8 +257,8 @@ Typography tokens are fully type-safe:
 
 ```tsx
 // TypeScript autocomplete shows: $h1, $h2, $body, etc.
-<Text typography="$" />
+const example = <Text typography="$" />
 
 // Invalid tokens show TypeScript errors
-<Text typography="$invalid" /> // Error!
+const invalidExample = <Text typography="$invalid" /> // Error!
 ```
diff --git a/apps/landing/src/app/(detail)/docs/features/page.mdx b/apps/landing/src/app/(detail)/docs/features/page.mdx
index 91a0d7a6..26c9e007 100644
--- a/apps/landing/src/app/(detail)/docs/features/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/features/page.mdx
@@ -19,10 +19,10 @@ Devup UI transforms your components at build time. Class names are generated usi
 
 ```tsx
 // You write:
-<Box bg="red" p={4} />
+const example = <Box bg="red" p={4} />
 
 // Devup UI generates:
-<div className="a b" />
+const generated = <div className="a b" />
 
 // CSS output:
 // .a { background-color: red; }
@@ -39,10 +39,10 @@ Full responsive support with array syntax. Each index corresponds to a breakpoin
 
 ```tsx
 // You write:
-<Box bg={['red', 'blue', 'green']} />
+const example = <Box bg={['red', 'blue', 'green']} />
 
 // Devup UI generates:
-<div className="a b c" />
+const generated = <div className="a b c" />
 
 // CSS output with media queries for each breakpoint
 ```
@@ -53,10 +53,10 @@ Variables are automatically converted to CSS custom properties.
 
 ```tsx
 // You write:
-<Box bg={colorVariable} />
+const example = <Box bg={colorVariable} />
 
 // Devup UI generates:
-<div className="a" style={{ '--a': colorVariable }} />
+const generated = <div className="a" style={{ '--a': colorVariable }} />
 
 // CSS output:
 // .a { background-color: var(--a); }
@@ -68,13 +68,12 @@ Ternary operators and logical expressions are statically analyzed.
 
 ```tsx
 // You write:
-<Box bg={isActive ? 'blue' : dynamicColor} />
+const example = <Box bg={isActive ? 'blue' : dynamicColor} />
 
 // Devup UI generates:
-<div
-  className={isActive ? 'a' : 'b'}
-  style={{ '--b': dynamicColor }}
-/>
+const generated = (
+  <div className={isActive ? 'a' : 'b'} style={{ '--b': dynamicColor }} />
+)
 ```
 
 ## Complex Expressions
@@ -83,13 +82,15 @@ Combine responsive arrays with conditionals — Devup UI handles it all.
 
 ```tsx
 // You write:
-<Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
+const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
 
 // Devup UI generates:
-<div
-  className={`a b ${isActive ? 'c' : 'd'}`}
-  style={{ '--d': dynamicColor }}
-/>
+const generated = (
+  <div
+    className={`a b ${isActive ? 'c' : 'd'}`}
+    style={{ '--d': dynamicColor }}
+  />
+)
 ```
 
 ## Pseudo Selectors
@@ -98,15 +99,17 @@ Use underscore prefix for pseudo selectors: `_hover`, `_focus`, `_active`, `_dis
 
 ```tsx
 // You write:
-<Box
-  bg="white"
-  _hover={{ bg: 'blue' }}
-  _focus={{ bg: 'green' }}
-  _active={{ bg: 'red' }}
-/>
+const example = (
+  <Box
+    _active={{ bg: 'red' }}
+    _focus={{ bg: 'green' }}
+    _hover={{ bg: 'blue' }}
+    bg="white"
+  />
+)
 
 // Devup UI generates:
-<div className="a b c d" />
+const generated = <div className="a b c d" />
 
 // CSS output:
 // .a { background-color: white; }
@@ -121,10 +124,10 @@ Combine responsive arrays with pseudo selectors for powerful responsive interact
 
 ```tsx
 // You write:
-<Box _hover={{ bg: ['red', 'blue'] }} />
+const example = <Box _hover={{ bg: ['red', 'blue'] }} />
 
 // Equivalent syntax:
-<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
+const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
 ```
 
 ## Type-Safe Theming
@@ -158,8 +161,8 @@ Define themes in `devup.json` with full TypeScript support.
 
 ```tsx
 // Type-safe theme tokens with autocomplete
-<Text color="$primary" />
-<Box typography="$heading" />
+const textExample = <Text color="$primary" />
+const boxExample = <Box typography="$heading" />
 ```
 
 Theme switching happens via CSS variables — zero JavaScript execution required.
@@ -173,7 +176,7 @@ import { styled } from '@devup-ui/react'
 
 const Card = styled('div', {
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
   _hover: {
@@ -184,8 +187,8 @@ const Card = styled('div', {
 const Button = styled('button', {
   bg: 'blue',
   color: 'white',
-  px: 4,               // 4 * 4 = 16px
-  py: 2,               // 2 * 4 = 8px
+  px: 4, // 4 * 4 = 16px
+  py: 2, // 2 * 4 = 8px
   borderRadius: '4px',
   cursor: 'pointer',
   _hover: { bg: 'darkblue' },
@@ -202,11 +205,11 @@ import { css } from '@devup-ui/react'
 
 const cardStyles = css({
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
 })
 
-<Box {...cardStyles} />
+const example = <Box {...cardStyles} />
 ```
 
 ## globalCss() API
@@ -234,5 +237,5 @@ const spin = keyframes({
   to: { transform: 'rotate(360deg)' },
 })
 
-<Box animation={`${spin} 1s linear infinite`} />
+const example = <Box animation={`${spin} 1s linear infinite`} />
 ```
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
index a9a8b5b5..d980f0f4 100644
--- a/apps/landing/src/app/(detail)/docs/overview/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -32,22 +32,22 @@ Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analy
 
 ### Key Advantages
 
-| Feature | Devup UI | styled-components | Emotion | Vanilla Extract |
-|---------|----------|-------------------|---------|-----------------|
-| Zero Runtime | Yes | No | No | Yes |
-| Dynamic Values | Yes | Yes | Yes | Limited |
-| Full Syntax Coverage | Yes | Yes | Yes | No |
-| Type-Safe Themes | Yes | Limited | Limited | Yes |
-| Build Performance | Fastest | N/A | N/A | Fast |
+| Feature              | Devup UI | styled-components | Emotion | Vanilla Extract |
+| -------------------- | -------- | ----------------- | ------- | --------------- |
+| Zero Runtime         | Yes      | No                | No      | Yes             |
+| Dynamic Values       | Yes      | Yes               | Yes     | Limited         |
+| Full Syntax Coverage | Yes      | Yes               | Yes     | No              |
+| Type-Safe Themes     | Yes      | Limited           | Limited | Yes             |
+| Build Performance    | Fastest  | N/A               | N/A     | Fast            |
 
 ### How It Works
 
 ```tsx
 // You write familiar CSS-in-JS syntax
-<Box bg="red" p={4} _hover={{ bg: "blue" }} />
+const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
 
 // Devup UI transforms it at build time
-<div className="a b c" />
+const generated = <div className="a b c" />
 
 // With optimized atomic CSS
 // .a { background-color: red; }
@@ -68,7 +68,7 @@ import { styled } from '@devup-ui/react'
 
 const Card = styled('div', {
   bg: 'white',
-  p: 4,                // 4 * 4 = 16px
+  p: 4, // 4 * 4 = 16px
   borderRadius: '8px',
   boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
   _hover: {
@@ -81,11 +81,11 @@ const Card = styled('div', {
 
 Benchmarks on Next.js (GitHub Actions - ubuntu-latest):
 
-| Library | Build Time | Build Size |
-|---------|------------|------------|
-| tailwindcss | 19.31s | 59,521,539 bytes |
-| styleX | 41.78s | 86,869,452 bytes |
-| vanilla-extract | 19.50s | 61,494,033 bytes |
+| Library                   | Build Time | Build Size           |
+| ------------------------- | ---------- | -------------------- |
+| tailwindcss               | 19.31s     | 59,521,539 bytes     |
+| styleX                    | 41.78s     | 86,869,452 bytes     |
+| vanilla-extract           | 19.50s     | 61,494,033 bytes     |
 | **devup-ui (single css)** | **17.05s** | **59,520,196 bytes** |
 
 With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes.
diff --git a/apps/landing/src/app/(detail)/docs/quick-start/page.mdx b/apps/landing/src/app/(detail)/docs/quick-start/page.mdx
index 783eefc3..cf38fe51 100644
--- a/apps/landing/src/app/(detail)/docs/quick-start/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/quick-start/page.mdx
@@ -27,9 +27,9 @@ npm install @devup-ui/rsbuild-plugin # for Rsbuild
 
 ```ts
 // vite.config.ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import { DevupUI } from '@devup-ui/vite-plugin'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react(), DevupUI()],
@@ -51,9 +51,9 @@ module.exports = DevupUI({
 
 ```js
 // rsbuild.config.mjs
+import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
 import { defineConfig } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
-import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
 
 export default defineConfig({
   plugins: [pluginReact(), DevupUIRsbuildPlugin()],
@@ -63,15 +63,15 @@ export default defineConfig({
 ## 3. Create Your First Component
 
 ```tsx
-import { Box, Text, Flex } from '@devup-ui/react'
+import { Box, Text } from '@devup-ui/react'
 
 function Card() {
   return (
     <Box
       bg="white"
-      p={4}
       borderRadius="8px"
       boxShadow="0 2px 8px rgba(0,0,0,0.1)"
+      p={4}
     >
       <Text fontSize="20px" fontWeight={700}>
         Hello Devup UI!
@@ -117,7 +117,7 @@ Now use theme tokens in your components:
 <Box bg="$background" p={4}>
   <Text color="$text">Themed text</Text>
   <Text color="$textMuted">Muted text</Text>
-  <Box bg="$primary" p={2} mt={2}>
+  <Box bg="$primary" mt={2} p={2}>
     <Text color="white">Primary background</Text>
   </Box>
 </Box>
@@ -131,13 +131,13 @@ All components accept style props directly:
 
 ```tsx
 <Box
-  bg="red"           // background-color
-  color="white"      // color
-  p={4}              // padding (4 * 4 = 16px)
-  m={2}              // margin (2 * 4 = 8px)
-  w="100%"           // width
-  h="200px"          // height
+  bg="red" // background-color
   borderRadius="8px" // border-radius
+  color="white" // color
+  h="200px" // height
+  m={2} // margin (2 * 4 = 8px)
+  p={4} // padding (4 * 4 = 16px)
+  w="100%" // width
 />
 ```
 
@@ -149,9 +149,9 @@ Use underscore prefix for pseudo selectors:
 
 ```tsx
 <Box
-  bg="white"
-  _hover={{ bg: 'blue', color: 'white' }}
   _active={{ bg: 'darkblue' }}
+  _hover={{ bg: 'blue', color: 'white' }}
+  bg="white"
 >
   Hover me
 </Box>
@@ -163,9 +163,9 @@ Use arrays for responsive values:
 
 ```tsx
 <Box
-  w={['100%', null, '50%']}       // 100% on mobile, 50% on tablet+
-  p={[2, null, 4]}                 // 8px on mobile, 16px on tablet+
   fontSize={['14px', null, '16px']}
+  p={[2, null, 4]} // 8px on mobile, 16px on tablet+
+  w={['100%', null, '50%']} // 100% on mobile, 50% on tablet+
 >
   Responsive box
 </Box>
@@ -190,7 +190,7 @@ const Button = styled('button', {
 })
 
 // Usage
-<Button>Click me</Button>
+const buttonExample = <Button>Click me</Button>
 ```
 
 ## Next Steps

From 2c2597091cf779ccf8d130a5cb0ecd988a6d888e Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Tue, 16 Dec 2025 22:31:21 +0900
Subject: [PATCH 4/4] Fix wrong example

---
 SKILL.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/SKILL.md b/SKILL.md
index e0f29a66..6c3f96be 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -369,9 +369,9 @@ import { Box } from '@devup-ui/react'
 function ThemeCard() {
   return (
     <Box
-      _dark={{ bg: '$colors.background', color: '$colors.text' }}
-      bg="$colors.background"
-      color="$colors.text"
+      _dark={{ bg: '$background', color: '$text' }}
+      bg="$background"
+      color="$text"
       p={4}
     >
       This adapts to the current theme