@7onic-ui/react 0.3.7 → 0.3.8

package/README.md

@@ -26,13 +26,13 @@
 | **🎯** | **Zero design-code drift** | Design and code from a single vision. No handoff, no drift — every component is pixel-verified against Figma. |
 | **📦** | **One JSON, every format** | `figma-tokens.json` auto-generates CSS, Tailwind v3, Tailwind v4, JS/TS, and JSON — all in sync. |
 | **🧩** | **shadcn freedom + MUI convenience** | shadcn's customization with none of its missing features. MUI's built-in power with none of its styling constraints. Both, by design. |
-| **⚡** | **npm or CLI — your choice** | `npm install` for packages, `npx 7onic add` for local copy. Same components, two workflows. |
+| **⚡** | **npm, CLI, or MCP — three ways in** | `npm install` for packages, `npx 7onic add` for local copy, or `claude plugin install 7onic-design@7onic` so your AI agent can explore every token and component and run `validate_code` before a single file lands in your project. Same system, three workflows. |
 | **🔀** | **Only Tailwind v3+v4 dual support** | The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX. |
 | **🪄** | **Framework-aware setup** | Detects Next.js / Vite, TypeScript, and Tailwind — exits with a clear error if anything's missing. Auto-cleans Vite boilerplate (`.bak` backup), auto-wraps `*` reset in `@layer base` for Next.js + Tailwind v4. No Provider wrapper, no `globals.css` replacement. |
 | **🎮** | **Built-in playground** | Interactive props editor + live code generation in docs. No Storybook setup needed. |
 | **🌗** | **Dark mode, zero config** | Light/dark themes built into tokens. System preference detection out of the box. |
 | **🔓** | **Framework-agnostic tokens** | Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required. |
-| **🤖** | **AI-ready** | Ships with `llms.txt` and an MCP server — AI builds with design tokens, not hardcoded values, and `validate_code` checks the result. Zero config for Claude, Cursor, Copilot. |
+| **🤖** | **AI-ready** | `llms.txt` for any AI tool, plus an MCP server that installs as a Claude Code plugin in one command (no `npm install`, ~3 MB). AI builds with design tokens, not hardcoded values, and `validate_code` rejects what docs alone can't prevent. Claude Code, Cursor, Copilot. |
 | **🌏** | **CJK-first typography** | Type scale tuned for Japanese kanji, Korean hangul, and Latin — not an afterthought. |
 | **🔐** | **Supply chain verified** | Cryptographically signed releases (npm provenance), automated vulnerability scanning in CI, reproducible builds. You can verify every package came from this exact GitHub commit — not a hijacked account. |
 | **🔥** | **Relentlessly updated** | Actively maintained with continuous research, refinement, and new features. Not abandoned — ever. |
@@ -287,7 +287,17 @@ claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design
 Other MCP clients: clone this repo and point your MCP config at `mcp/dist/index.js`
 (the bundle is committed — nothing to build).
 
-**Setup guides**: [Tokens](https://7onic.design/design-tokens/ai) · [Components](https://7onic.design/components/ai) · [MCP Server](https://7onic.design/components/mcp)
+### AI Kit — skills & agent
+
+The plugin also ships two Claude Code skills and an agent on top of the MCP server:
+`/7onic-setup` (project detection, token CSS wiring, idempotent health check),
+`/7onic-design` (guided build workflow — discovery → tokens → layout → a mandatory
+`validate_code` loop), and `7onic-design-agent` for delegated page/component builds.
+Not on the plugin? Get the same kit via `npx 7onic init --claude` (writes them into
+your project's `.claude/`) or copy the files from
+[7onic.design/components/mcp](https://7onic.design/components/mcp#ai-kit).
+
+**Setup guides**: [Tokens](https://7onic.design/design-tokens/ai) · [Components](https://7onic.design/components/ai) · [MCP Server & AI Kit](https://7onic.design/components/mcp)
 
 ---
 
@@ -314,9 +324,10 @@ Other MCP clients: clone this repo and point your MCP config at `mcp/dist/index.
 - [x] Automated doc verification (8 checks, AST-powered, blocks publish on error)
 - [x] Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)
 - [x] Multilingual documentation — English, Japanese, Korean (powered by next-intl)
-- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.3.7
+- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.3.8
 - [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
 - [x] MCP server — token search, component catalog, layout recipes, `validate_code` rule checking (en/ja/ko), Claude Code plugin one-command install
+- [x] AI Kit — `/7onic-setup` + `/7onic-design` skills and a design agent (plugin, `npx 7onic init --claude`, or manual copy)
 - [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution
 - [x] `npx 7onic init` full workflow — framework/TS/Tailwind detection (abort if missing), Vite `@/` alias auto-configure, base deps install, CSS token import, Vite boilerplate cleanup (`.bak` backup), Next.js+v4 `*` reset auto-wrap, `cn()` + `7onic.json` generation
 - [x] Technical blog — [blog.7onic.design](https://blog.7onic.design) ("Design to Code" series)
@@ -344,5 +355,5 @@ MIT
 <p align="center">
   <strong>One JSON, every format — from Figma to production.</strong><br>
   Independently built.<br>
-  <sub>Last updated: 2026-10-07 (v0.3.7)</sub>
+  <sub>Last updated: 2026-10-22 (v0.3.8)</sub>
 </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": false,
   "sideEffects": [
     "*.css"
@@ -80,8 +80,6 @@
     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "jsonc-parser": "^3.3.1",
-    "next-intl": "^4.9.1",
     "tailwind-merge": "^2.3.0"
   },
   "peerDependencies": {
@@ -107,14 +105,16 @@
     "autoprefixer": "^10.4.19",
     "cmdk": "^1.1.1",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^15.0.0",
+    "eslint-config-next": "^15.5.28",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jsonc-parser": "^3.3.1",
     "lucide-react": "^0.400.0",
-    "next": "^15.5.15",
+    "next": "^15.5.28",
+    "next-intl": "^4.14.9",
     "picocolors": "^1.1.1",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.31",
     "prettier": "^3.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -150,5 +150,8 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "npm@10.9.1+sha512.c89530d37c4baa38afd43e76a077a84b9aa63840b986426584fd5c5a54ab0a0b21bb1595c851042b733784b0b43706d36a494b4d8ae1a086a762cb8d3f95942a"
+  "packageManager": "npm@10.9.1+sha512.c89530d37c4baa38afd43e76a077a84b9aa63840b986426584fd5c5a54ab0a0b21bb1595c851042b733784b0b43706d36a494b4d8ae1a086a762cb8d3f95942a",
+  "overrides": {
+    "postcss": "$postcss"
+  }
 }