@agimon-ai/po-style-system-tooling 0.2.14-alpha.2 → 0.2.14-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/po-style-system-tooling",
-  "version": "0.2.14-alpha.2",
+  "version": "0.2.14-alpha.21",
   "description": "MCP server for exploring themes, Tailwind CSS classes, and UI components from Storybook with standalone component rendering capabilities",
   "keywords": [
     "design-system",
@@ -11,7 +11,7 @@
     "typescript"
   ],
   "homepage": "https://agimon.ai",
-  "license": "MIT",
+  "license": "BUSL-1.1",
   "author": "Vuong Ngo",
   "bin": {
     "po-style-system-tooling": "./dist/cli.mjs"
@@ -40,29 +40,26 @@
     "access": "public"
   },
   "dependencies": {
-    "@agimon-ai/foundation-exec": "0.27.13",
-    "@agimon-ai/foundation-validator": "0.27.13",
+    "@agimon-ai/foundation-exec": "0.27.14",
+    "@agimon-ai/foundation-validator": "0.27.14",
     "@modelcontextprotocol/node": "2.1.1",
     "@modelcontextprotocol/server": "2.3.1",
     "@tailwindcss/vite": "4.3.3",
     "@vitejs/plugin-react": "6.1.2",
     "chalk": "5.6.2",
-    "commander": "14.0.3",
+    "commander": "15.0.0",
     "glob": "13.0.6",
     "inversify": "8.2.3",
-    "js-yaml": "5.4.3",
+    "js-yaml": "5.5.0",
     "pino": "10.4.0",
-    "playwright": "^1.64.0",
-    "postcss": "8.5.29",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "react-native-web": "0.21.4",
+    "playwright": "^1.64.1",
+    "postcss": "8.5.30",
     "reflect-metadata": "0.2.2",
-    "sharp": "0.35.4",
-    "storybook": "10.6.1",
+    "sharp": "0.35.5",
+    "storybook": "10.6.2",
     "tailwindcss": "4.3.3",
     "vite": "8.3.4",
-    "vite-plugin-singlefile": "^2.3.3"
+    "vite-plugin-singlefile": "^2.3.4"
   },
   "devDependencies": {
     "@babel/parser": "8.0.7",
@@ -75,14 +72,25 @@
     "@types/react-dom": "19.3.0",
     "@vitest/coverage-v8": "4.1.10",
     "esbuild": "0.28.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-native-web": "0.21.4",
     "tsdown": "0.23.1",
     "typescript": "6.0.3",
     "vitest": "4.1.10",
     "zod": "4.6.6"
   },
   "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native-web": "^0.19.0 || ^0.20.0 || ^0.21.0",
     "zod": "^4.4.3"
   },
+  "peerDependenciesMeta": {
+    "react-native-web": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsdown",
     "test": "vitest --run",

package/skills/style-system/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: style-system
-description: 'Use the style-system CLI for frontend or design work that needs approved Tailwind classes, theme tokens, shared UI components, app-specific components, Storybook component visuals, or design-system-aware component polish. Trigger before writing UI styles or creating UI components.'
+description: 'Use the style-system tools (the design namespace in Po code mode, or the CLI outside Po) for frontend or design work that needs approved Tailwind classes, theme tokens, shared UI components, app-specific components, or Storybook component visuals. Trigger before writing UI styles or creating UI components.'
 metadata:
   paths:
     - 'apps/*-app/src/**/*.tsx'
@@ -11,32 +11,55 @@ metadata:
 
 # Style System
 
-Use `pnpm exec style-system`, not MCP tools, for UI token, theme, component, and visual discovery. Run the relevant discovery command before creating new UI components or writing Tailwind classes.
+Inside Po, call the style-system tools from code mode: the `design` namespace runs them in the Po server with one browser and one Vite dev server kept warm, so renders after the first take under a second. Run `discover({ namespace: 'design' })` for the full types. Run the relevant discovery call before creating new UI components or writing Tailwind classes.
 
-## Commands
+## Code mode (inside Po)
+
+```js
+// Discovery: one exec can gather everything you need.
+return {
+  classes: await design.cssClasses({ appPath: 'apps/{product}-app', category: 'all' }),
+  themes: await design.themes({ appPath: 'apps/{product}-app' }),
+  shared: await design.sharedComponents({}),
+  app: await design.appComponents({ appPath: 'apps/{product}-app' }),
+};
+```
+
+```js
+// Visuals: each render returns { text, images }; image() shows it to you.
+for (const darkMode of [false, true]) {
+  image(
+    await design.componentVisual({
+      componentName: 'Button',
+      appPath: 'apps/{product}-app',
+      storyName: 'Playground',
+      darkMode,
+    }),
+  );
+}
+```
+
+- `appPath` resolves from the session folder. Batch renders for one app together: the dev server serves one app at a time and restarts when `appPath` changes.
+- A failed render throws, so a script stops at the story that broke.
+- `sharedComponents` and `appComponents` page with `cursor`; pass the cursor from the previous result.
+
+## CLI (outside Po)
 
 ```bash
 pnpm exec style-system get-css-classes --app-path apps/{product}-app --category all
-pnpm exec style-system get-css-classes --theme-path ./packages/frontend/web-theme/dist/agiflow-theme.css --category colors
-
 pnpm exec style-system list-shared-components
-pnpm exec style-system list-shared-components --cursor <cursor>
-
 pnpm exec style-system list-app-components --app-path apps/{product}-app
-pnpm exec style-system list-app-components --app-path apps/{product}-app --cursor <cursor>
-
 pnpm exec style-system list-themes --app-path apps/{product}-app
-
 pnpm exec style-system get-ui-component --component-name Button --app-path apps/{product}-app --story-name Playground
-pnpm exec style-system get-ui-component --component-name Button --app-path apps/{product}-app --story-name Default --dark-mode
 ```
 
+The CLI starts a cold browser and a static build on every call, so prefer code mode whenever it is available.
+
 ## Workflow
 
-- Before writing styles, run `get-css-classes` for the target app and use only supported token classes.
-- Before creating a component, run `list-shared-components` and `list-app-components --app-path <app>` and reuse existing components when possible.
-- Before visual design or Storybook work, run `list-themes --app-path <app>` and `get-ui-component` for the closest existing component.
-- For component polish during implementation, `polish-component <file> --instructions "<text>"` is available, but it edits files and must not be used for read-only planning or review.
+- Before writing styles, read `design.cssClasses` for the target app and use only supported token classes.
+- Before creating a component, read `design.sharedComponents` and `design.appComponents` and reuse existing components when possible.
+- Before visual design or Storybook work, read `design.themes` and render the closest existing component with `design.componentVisual`.
 
 ## React Native Story Composition
 
@@ -55,7 +78,7 @@ Apply this pattern to every data-heavy frontend surface, including native screen
 - Stories target the View and compose it with representative fixture data and web-safe slots. They never render Containers or mock the router, API client, store, or SDK.
 - Preserve the production route/page as the Container boundary, or delegate it to a colocated Container. Do not duplicate business logic in stories or create a catalog-only approximation of the surface.
 - For a large surface, first extract its meaningful sections into presentational components, then compose those sections in the View. Do not replace a data-heavy page with one giant `children` slot.
-- Verify each new `Playground` story with `get-ui-component`, then inspect the returned image for visual hierarchy, empty and loading states, overflow, and action placement.
+- Verify each new `Playground` story with `design.componentVisual`, then inspect the returned image for visual hierarchy, empty and loading states, overflow, and action placement.
 
 ### Expo Router web support
 
@@ -73,11 +96,10 @@ Component/
 - Keep props identical across native and web files so Metro and the style-system Vite renderer select the platform implementation without story-specific branching.
 - Never mock `expo-router` inside a story file. Use composition or a `.web.tsx` adapter.
 - Apply the same platform adapter pattern to native-only SDK components that cannot be bundled for web.
-- Run `get-ui-component` for every added `Playground` story. A typecheck-only result is insufficient for router or native SDK composition.
+- Render every added `Playground` story with `design.componentVisual`. A typecheck-only result is insufficient for router or native SDK composition.
 
 ## Rules
 
-- Prefer `--app-path` so the CLI reads the project's `style-system.config.yaml`.
-- Use `--theme-path` only when there is no target app path or the app config does not define a theme path.
-- Treat CLI output as the allowed design surface: do not invent Tailwind token classes when the CLI can list them.
-- If `pnpm exec style-system` is unavailable after dependency changes, run `pnpm install` and `pnpm nx build style-system`.
+- Always pass `appPath` so the tools read the project's `style-system.config.yaml`. With the CLI, use `--theme-path` only when there is no target app path or the app config defines no theme path.
+- Treat the tools' output as the allowed design surface: do not invent Tailwind token classes when they can list them.
+- If the `design` namespace or `pnpm exec style-system` is unavailable after dependency changes, run `pnpm install` and rebuild `@agimon-ai/po-style-system-tooling`.