@wangs-ui/create-react-app 1.0.35 → 1.0.36

package/dist/bin.js

@@ -1122,18 +1122,73 @@ function copyProjectTemplate(options) {
 	}
 }
 //#endregion
-//#region src/utils/mcpInstaller.ts
-function copyDirRecursive(srcDir, destDir) {
-	if (!fs.existsSync(srcDir)) return;
-	fs.mkdirSync(destDir, { recursive: true });
-	const entries = fs.readdirSync(srcDir, { withFileTypes: true });
-	for (const entry of entries) {
-		const srcPath = path.join(srcDir, entry.name);
-		const destPath = path.join(destDir, entry.name);
-		if (entry.isDirectory()) copyDirRecursive(srcPath, destPath);
-		else fs.copyFileSync(srcPath, destPath);
+//#region ../skills/dist/src-C22mKmnQ.js
+var __dirname$1 = path.dirname(fileURLToPath(import.meta.url));
+function getSkillsDir() {
+	const candidates = [
+		path.resolve(__dirname$1, "skills"),
+		path.resolve(__dirname$1, "../skills"),
+		path.resolve(__dirname$1, "../../skills")
+	];
+	for (const c of candidates) if (fs.existsSync(c)) return c;
+	return path.resolve(__dirname$1, "skills");
+}
+function loadAllSkills() {
+	const skillsDir = getSkillsDir();
+	if (!fs.existsSync(skillsDir)) return [];
+	const entries = fs.readdirSync(skillsDir, { withFileTypes: true });
+	const skills = [];
+	for (const entry of entries) if (entry.isDirectory()) {
+		const skillMdPath = path.join(skillsDir, entry.name, "SKILL.md");
+		if (fs.existsSync(skillMdPath)) {
+			const content = fs.readFileSync(skillMdPath, "utf-8");
+			const { name: entryName } = entry;
+			let name = entryName;
+			let description = "Wangs UI consumer skill";
+			const frontmatterMatch = content.match(/^---\s*\n([\s\S]*?)\n---\s*\n/);
+			if (frontmatterMatch) {
+				const fm = frontmatterMatch[1];
+				const nameMatch = fm.match(/^name:\s*(.+)$/m);
+				const descMatch = fm.match(/^description:\s*(.+)$/m);
+				if (nameMatch) name = nameMatch[1].trim();
+				if (descMatch) description = descMatch[1].trim();
+			}
+			skills.push({
+				id: entry.name,
+				name,
+				description,
+				content
+			});
+		}
+	}
+	return skills;
+}
+function getAgentSkillDirs(baseDir = process.cwd()) {
+	const dirs = [];
+	const candidates = [
+		path.join(baseDir, ".agents", "skills"),
+		path.join(baseDir, ".claude", "skills"),
+		path.join(baseDir, ".opencode", "skills"),
+		path.join(baseDir, ".kilo", "skills")
+	];
+	for (const c of candidates) if (fs.existsSync(c) || fs.existsSync(path.dirname(c))) dirs.push(c);
+	if (dirs.length === 0) dirs.push(path.join(baseDir, ".agents", "skills"));
+	return dirs;
+}
+function installSkill(skill, baseDir = process.cwd()) {
+	const targetDirs = getAgentSkillDirs(baseDir);
+	const writtenPaths = [];
+	for (const baseSkillDir of targetDirs) {
+		const destDir = path.join(baseSkillDir, skill.id);
+		fs.mkdirSync(destDir, { recursive: true });
+		const destFile = path.join(destDir, "SKILL.md");
+		fs.writeFileSync(destFile, skill.content, "utf-8");
+		writtenPaths.push(destFile);
 	}
+	return writtenPaths;
 }
+//#endregion
+//#region src/utils/mcpInstaller.ts
 function setupAgentConfigurations(options) {
 	const { targetDir, templateDir, agents } = options;
 	const configuredAgents = [];
@@ -1173,13 +1228,14 @@ function setupAgentConfigurations(options) {
 	}
 	if (agents.includes("antigravity")) {
 		const agentsMcpSrc = path.join(agentsTemplateDir, "agents.mcp.json");
-		const skillsSrc = path.join(agentsTemplateDir, "skills");
 		const dotAgents = path.join(targetDir, ".agents");
 		fs.mkdirSync(dotAgents, { recursive: true });
 		if (fs.existsSync(agentsMcpSrc)) fs.copyFileSync(agentsMcpSrc, path.join(dotAgents, "mcp_config.json"));
-		if (fs.existsSync(skillsSrc)) copyDirRecursive(skillsSrc, path.join(dotAgents, "skills"));
-		configuredAgents.push("Antigravity IDE & CLI (.agents/mcp_config.json, .agents/skills)");
+		configuredAgents.push("Antigravity IDE & CLI (.agents/mcp_config.json)");
 	}
+	const allSkills = loadAllSkills();
+	for (const skill of allSkills) installSkill(skill, targetDir);
+	if (allSkills.length > 0) configuredAgents.push(`Wangs UI Consumer Skills (${allSkills.map((s) => s.id).join(", ")})`);
 	return configuredAgents;
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/create-react-app",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Scaffold a modern React app with Wangs UI, Vite 8, Oxlint, Oxfmt, and AI Agent MCP integration",
   "keywords": [
     "antigravity",
@@ -41,16 +41,19 @@
     "template/_gitignore",
     "template/_npmrc",
     "template/src",
-    "template/agents"
+    "template/agents",
+    "template/README.md"
   ],
   "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "devDependencies": {
-    "@clack/prompts": "^1.7.0"
+  "dependencies": {
+    "@clack/prompts": "^1.7.0",
+    "@wangs-ui/skills": "1.0.36"
   },
+  "devDependencies": {},
   "scripts": {
     "build": "vite build",
     "check:publint": "publint",

package/template/README.md

@@ -0,0 +1,114 @@
+# Wangs UI React Application
+
+A modern enterprise React application built with **Wangs UI Design System**, Vite 8, Tailwind CSS v4, Oxlint, and pre-configured AI Agent MCP workflows.
+
+---
+
+## 🚀 Getting Started
+
+### 1. Install Dependencies
+
+```bash
+pnpm install
+```
+
+### 2. Available Scripts
+
+| Command        | Description                                 |
+| :------------- | :------------------------------------------ |
+| `pnpm dev`     | Start the local development server with HMR |
+| `pnpm build`   | Build optimized production bundle           |
+| `pnpm preview` | Preview production build locally            |
+| `pnpm lint`    | Lint codebase with fast Oxlint              |
+| `pnpm fmt`     | Format codebase with Oxfmt                  |
+
+---
+
+## 🎨 Working with Wangs UI
+
+### 1. Modular Subpath Imports
+
+Always import primitive components and icons via their subpaths to ensure optimal tree-shaking:
+
+```tsx
+// Primitives
+import Button from '@wangs-ui/react-core/primitive/button';
+import Card from '@wangs-ui/react-core/primitive/card';
+import InputText from '@wangs-ui/react-core/primitive/inputtext';
+import DataTable, { Column } from '@wangs-ui/react-core/primitive/datatable';
+
+// Icons
+import { SearchLine, AddLine, DeleteBin6Line } from '@wangs-ui/react-icons';
+
+// Form & Internationalization
+import { Form, Field } from '@wangs-ui/react-core';
+import { useFormControl } from '@wangs-ui/form';
+import { useI18n } from '@wangs-ui/react-i18n';
+```
+
+### 2. Strict Primitive Rule
+
+Never write unstyled raw HTML elements (`<button>`, `<input>`, `<table>`, `<dialog>`). Always use the corresponding Wangs UI primitive component.
+
+### 3. Internationalization (`useI18n`)
+
+Never hardcode user-facing text strings in JSX. Always wrap UI labels, button text, table headers, and error messages in `t()`:
+
+```tsx
+const { t } = useI18n();
+
+return <Button label={t('Save Changes')} severity="primary" />;
+```
+
+---
+
+## 🤖 AI Agent & MCP Integration
+
+This project comes pre-configured with **`@wangs-ui/mcp`** for leading AI agents:
+
+- **Antigravity IDE & CLI**: `.agents/mcp_config.json`
+- **Claude Code**: `.mcp.json` & `CLAUDE.md`
+- **OpenCode**: `opencode.json` & `.opencode/mcp.json`
+- **Kilo**: `.kilo/mcp.json` & `.vscode/mcp.json`
+
+The MCP server provides live access to:
+
+1. **Component Documentation & Types**: `get-documentation({ id: "button" })`
+2. **Component Stories & Variants**: `get-documentation-for-story({ id: "button", storyName: "Primary" })`
+3. **Knowledge Graph Queries**: `query_graph({ query: "DataTable" })`
+
+---
+
+## 📦 Managing AI Agent Skills (`@wangs-ui/skills`)
+
+Skills provide high-level workflows and recipes for AI agents (form management, data grids, modal dialogs, i18n formatting). You can install, update, or remove skills independently using the CLI:
+
+### List Available Skills
+
+```bash
+npx @wangs-ui/skills list
+```
+
+### Install Specific Skills
+
+```bash
+# Interactive selection
+npx @wangs-ui/skills add
+
+# Direct install
+npx @wangs-ui/skills add create-form data-table dialog-modal
+```
+
+### Update Installed Skills
+
+To update all skills in your project to the latest definitions:
+
+```bash
+npx @wangs-ui/skills update
+```
+
+### Remove a Skill
+
+```bash
+npx @wangs-ui/skills remove create-form
+```

package/template/package.json

@@ -13,10 +13,10 @@
     "format:check": "oxfmt --check"
   },
   "dependencies": {
-    "@wangs-ui/react-core": "^1.0.35",
-    "@wangs-ui/react-i18n": "^1.0.35",
-    "@wangs-ui/react-icons": "^1.0.35",
-    "@wangs-ui/react-presets": "^1.0.35",
+    "@wangs-ui/react-core": "^1.0.36",
+    "@wangs-ui/react-i18n": "^1.0.36",
+    "@wangs-ui/react-icons": "^1.0.36",
+    "@wangs-ui/react-presets": "^1.0.36",
     "clsx": "^2.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",

package/template/agents/skills/form-management/SKILL.md

@@ -1,95 +0,0 @@
----
-name: form-management
-description: Guidelines and best practices for creating, validating, and submitting forms using Wangs UI Form and Field components.
----
-
-# Skill: Form Management & Validation Guidelines
-
-This skill defines the standards for form implementation with `@wangs-ui/form`, `useFormControl`, and `@wangs-ui/react-core` `Form` / `Field` components.
-
----
-
-## 1. Core Architecture
-
-Wangs UI provides strongly typed form controllers:
-
-- `useFormControl({ type: 'json' })`: For standard JSON payload forms.
-- `useFormControl({ type: 'formdata' })`: For multipart forms (file uploads).
-
----
-
-## 2. Standard Form Pattern
-
-```tsx
-import React, { useState } from 'react';
-import { Button, Card, Form, Field, InputText, InputPassword } from '@wangs-ui/react-core';
-import { useFormControl } from '@wangs-ui/form';
-import { useI18n } from '@wangs-ui/react-i18n';
-
-interface LoginFormValues {
-  email: string;
-  password: string;
-}
-
-export default function LoginForm(): React.ReactElement {
-  const { t } = useI18n();
-  const formControl = useFormControl<LoginFormValues>({ type: 'json' });
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (values: LoginFormValues) => {
-    setLoading(true);
-    try {
-      console.log('Submitted values:', values);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Card className="w-full max-w-md p-6">
-      <Form control={formControl} onSubmit={handleSubmit} className="flex flex-col gap-4">
-        <h2 className="heading-2">{t('Sign In')}</h2>
-
-        <Field<string>
-          name="email"
-          label={t('Email Address')}
-          required
-          rules={{
-            pattern: {
-              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-              message: t('Invalid email address'),
-            },
-          }}
-        >
-          {(field) => (
-            <InputText {...field} placeholder={t('Enter your email')} value={field.value || ''} />
-          )}
-        </Field>
-
-        <Field<string> name="password" label={t('Password')} required>
-          {(field) => (
-            <InputPassword
-              {...field}
-              placeholder={t('Enter your password')}
-              value={field.value || ''}
-            />
-          )}
-        </Field>
-
-        <Button type="submit" label={t('Submit')} severity="primary" loading={loading} />
-      </Form>
-    </Card>
-  );
-}
-```
-
----
-
-## 3. Mandatory Rules
-
-1. **Always Use `<Form>` and `<Field>`**:
-   Never use raw HTML `<form>` or uncontrolled `<input>`.
-2. **Translate Labels and Error Messages**:
-   Always wrap `label`, `placeholder`, and validation `message` in `t()`.
-3. **Strongly Typed Models**:
-   Define a TypeScript interface for form values and pass it to `useFormControl<Model>()`.

package/template/agents/skills/i18n-standardization/SKILL.md

@@ -1,104 +0,0 @@
----
-name: i18n-standardization
-description: Guidelines and rules for implementing and using the JIT i18n translation functions (t) and locale formatters in this Wangs UI project.
----
-
-# Skill: JIT i18n Implementation & Usage Guidelines
-
-This skill defines the coding standards, rules, and best practices for writing translation strings and formatting dates/numbers using the JIT i18n system.
-
----
-
-## 1. Core Principles
-
-The localization system uses a **Just-In-Time (JIT)** workflow. All user-facing English strings act directly as keys. The `t()` function resolves these keys against local memory, the network cache, or triggers a real-time background backend AI translation without blocking UI rendering.
-
----
-
-## 2. Mandatory Rules
-
-### A. Translate at Consumer Level for `ReactNode` Props
-
-All user-facing text props in Wangs UI components (`label`, `placeholder`, `emptyMessage`, `header`, `tooltip`, etc.) are typed as `ReactNode`. Components render them as-is and **do NOT call `t()` internally**. Translation MUST be called at the consumer level:
-
-```tsx
-// DO
-const { t } = useI18n();
-
-<Button label={t('Save Changes')} />
-<Select placeholder={t('Select category...')} />
-<DataTable emptyMessage={t('No data available')} />
-
-// DO NOT: pass raw English strings without t()
-<Button label="Save Changes" />
-```
-
-### B. Named Variable Interpolation (Enforced)
-
-Always use descriptive named variables (`{count}`, `{userName}`, `{fileName}`) passed via an object argument. This provides necessary semantic context for AI translation engines:
-
-```tsx
-// DO
-t('Upload {count} files to {folderName}', { count: 5, folderName: 'Documents' });
-
-// DO NOT: use positional indices for multi-variable strings
-t('Upload {0} files to {1}', 5, 'Documents');
-```
-
-### C. ICU Pluralization & Zero-State (`=0`)
-
-Write ICU conditional plural/select structures directly inside the text keys. Always include `=0` branches to handle zero values within ICU syntax instead of creating separate JavaScript `if` or ternary branches:
-
-```tsx
-// DO
-t('{count, plural, =0 {No files uploaded} one {Uploaded 1 file} other {Uploaded {count} files}}', {
-  count,
-});
-
-// DO NOT: write manual JS conditionals for pluralization
-count === 0 ? t('No files') : t('{count} files', { count });
-```
-
-### D. Formatting Dates, Numbers & Currencies
-
-Always format dates, numbers, currencies, and relative time using `useLocaleFormatter()` **before** passing them into `t()`:
-
-```tsx
-import { useI18n, useLocaleFormatter } from '@wangs-ui/react-i18n';
-
-const { t } = useI18n();
-const { formatDate, formatRelativeTime, formatCurrency, formatNumber } = useLocaleFormatter();
-
-// Date formatting
-const dateLabel = t('Created on {date}', {
-  date: formatDate(new Date(), 'dd MMMM yyyy'),
-});
-
-// Relative time formatting
-const timeLabel = t('Updated {time}', {
-  time: formatRelativeTime(updatedAt),
-});
-
-// Currency formatting
-const priceText = formatCurrency(150000, 'IDR');
-```
-
----
-
-## 3. Strict Prohibitions (MUST NOT)
-
-1. **NO Dynamic String Concatenation**:
-   Never use string concatenation or template literals inside `t()`:
-   ```tsx
-   // FORBIDDEN
-   t('Hello ' + user.name);
-   t(`Upload to ${folder}`);
-   ```
-2. **NO Hardcoded Strings in JSX**:
-   Never render raw text nodes without `t()`:
-   ```tsx
-   // FORBIDDEN
-   <h1>Dashboard Overview</h1>
-   ```
-3. **NO Static Translation JSON Files**:
-   Never create static `.json` dictionaries (e.g. `id.json`, `en.json`). Localization is completely dynamic via JIT translation.

package/template/agents/skills/wangs-ui-components/SKILL.md

@@ -1,84 +0,0 @@
----
-name: wangs-ui-components
-description: Guidelines and rules for using and composing Wangs UI Design System components and icons in this React application.
----
-
-# Skill: Wangs UI Component Usage & Design System Standards
-
-This skill defines the rules for building user interfaces with `@wangs-ui/react-core`, `@wangs-ui/react-icons`, and `@wangs-ui/react-presets`.
-
----
-
-## 1. Subpath Import Style (Mandatory)
-
-Components and providers are exported via clean, modular subpaths:
-
-```tsx
-// Provider / Contexts
-import { WangsUiProvider } from '@wangs-ui/react-core/api';
-
-// Primitive Components
-import Button from '@wangs-ui/react-core/primitive/button';
-import Card from '@wangs-ui/react-core/primitive/card';
-import InputText from '@wangs-ui/react-core/primitive/inputtext';
-import Select from '@wangs-ui/react-core/primitive/select';
-import Dialog from '@wangs-ui/react-core/primitive/dialog';
-import Modal from '@wangs-ui/react-core/primitive/modal';
-import DataTable from '@wangs-ui/react-core/primitive/datatable';
-
-// Icons
-import { AddLine, SearchLine, DeleteBin6Line } from '@wangs-ui/react-icons';
-```
-
----
-
-## 2. Primitive Component Rule (Strictly Enforced)
-
-Never use unstyled raw HTML controls when a corresponding Wangs UI primitive component exists:
-
-| Raw HTML Control (Forbidden) | Wangs UI Component (Mandatory) | Subpath Import                                 |
-| :--------------------------- | :----------------------------- | :--------------------------------------------- |
-| `<button>`                   | `Button`                       | `@wangs-ui/react-core/primitive/button`        |
-| `<input type="text">`        | `InputText`                    | `@wangs-ui/react-core/primitive/inputtext`     |
-| `<input type="number">`      | `InputNumber`                  | `@wangs-ui/react-core/primitive/inputnumber`   |
-| `<input type="password">`    | `InputPassword`                | `@wangs-ui/react-core/primitive/inputpassword` |
-| `<input type="checkbox">`    | `Checkbox`                     | `@wangs-ui/react-core/primitive/checkbox`      |
-| `<select>` / dropdown        | `Select` / `Dropdown`          | `@wangs-ui/react-core/primitive/select`        |
-| `<dialog>` / modal           | `Dialog` / `Modal`             | `@wangs-ui/react-core/primitive/dialog`        |
-| `<table>`                    | `DataTable`                    | `@wangs-ui/react-core/primitive/datatable`     |
-| Container box                | `Card`                         | `@wangs-ui/react-core/primitive/card`          |
-
----
-
-## 3. Typography & Spacing Scale
-
-### Typography (Typeface: Manrope)
-
-Use semantic heading classes rather than arbitrary text size utilities:
-
-- `.heading-1` (22px, 600 weight) — Page title
-- `.heading-2` (18px, 600 weight) — Section title
-- `.heading-3` (16px, 500 weight) — Card / Container header
-- `.heading-4` (14px, 500 weight) — Sub-headers / Field labels
-- `.heading-5` (12px, 600 weight) — Small titles
-- `.p` (12px, 500 weight) — Body text
-
-### Color Tokens
-
-- Primary: `bg-primary-500`, `text-primary-500`, `border-primary-500`
-- Secondary / Text: `text-secondary-900` (main text), `text-secondary-500` (muted/caption), `border-secondary-200`
-- Semantic: `success-500`, `danger-500`, `warning-500`, `info-500`
-
-### Spacing Tokens (4px Grid)
-
-- `gap-xs` (4px), `gap-s` (6px), `gap-md` (8px), `gap-m` (12px), `gap-l` (16px), `gap-xl` (20px), `gap-xxl` (24px)
-- `p-xs`, `p-s`, `p-md`, `p-m`, `p-l`, `p-xl`, `p-xxl`
-
----
-
-## 4. MCP Component Inspection
-
-When creating new views or composing complex components:
-
-- Use the `@wangs-ui/mcp` server tools (`get-documentation`, `list-all-documentation`) to inspect component props, types, and story examples.
-- Do NOT guess prop names or event handlers.