@wangs-ui/skills 1.0.36

package/dist/bin.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-C22mKmnQ.js";
+import path from "node:path";
+import { parseArgs } from "node:util";
+//#region bin.ts
+var HELP_TEXT = `
+\x1b[1m\x1b[36m🚀 Wangs UI Skills CLI\x1b[0m
+Install, update, and manage modular AI agent skills for Wangs UI React applications.
+
+\x1b[1mUsage:\x1b[0m
+  npx @wangs-ui/skills [command] [options]
+  wangs-ui-skills [command] [options]
+
+\x1b[1mCommands:\x1b[0m
+  \x1b[36mlist\x1b[0m                      List all available and installed skills
+  \x1b[36madd\x1b[0m [skills...]           Install specified skills (interactive if none provided)
+  \x1b[36mupdate\x1b[0m [skills...]        Update installed skills to latest versions
+  \x1b[36mremove\x1b[0m <skills...>        Remove specified skills from agent environment
+
+\x1b[1mOptions:\x1b[0m
+  --target <dir>            Target directory (default: current working directory)
+  -h, --help                Show help message
+  -v, --version             Show version
+
+\x1b[1mExamples:\x1b[0m
+  npx @wangs-ui/skills list
+  npx @wangs-ui/skills add create-form
+  npx @wangs-ui/skills add wangs-ui-components data-table dialog-modal
+  npx @wangs-ui/skills update
+  npx @wangs-ui/skills remove create-form
+`;
+async function main() {
+	const args = process.argv.slice(2);
+	if (args.includes("--help") || args.includes("-h")) {
+		console.log(HELP_TEXT);
+		return;
+	}
+	if (args.includes("--version") || args.includes("-v")) {
+		console.log("1.0.0");
+		return;
+	}
+	const parsed = parseArgs({
+		args,
+		options: { target: { type: "string" } },
+		allowPositionals: true,
+		strict: false
+	});
+	const baseDir = parsed.values.target ? path.resolve(parsed.values.target) : process.cwd();
+	const { positionals } = parsed;
+	const command = positionals[0] || "list";
+	const skillArgs = positionals.slice(1);
+	switch (command) {
+		case "list":
+		case "ls":
+			listSkills(baseDir);
+			break;
+		case "add":
+		case "install":
+		case "i":
+			await addSkills(skillArgs, baseDir);
+			break;
+		case "update":
+		case "up":
+			updateSkills(skillArgs, baseDir);
+			break;
+		case "remove":
+		case "rm":
+		case "delete":
+			removeSkills(skillArgs, baseDir);
+			break;
+		default:
+			console.log(`\x1b[31mUnknown command: "${command}"\x1b[0m`);
+			console.log(HELP_TEXT);
+			process.exit(1);
+	}
+}
+try {
+	await main();
+} catch (err) {
+	console.error("Error running @wangs-ui/skills:", err);
+	process.exit(1);
+}
+//#endregion
+export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+import { a as getAgentSkillDirs, c as isSkillInstalled, d as getSkillsDir, f as loadAllSkills, i as listSkills, l as removeSkill, n as updateSkills, o as getInstalledSkills, r as addSkills, s as installSkill, t as removeSkills, u as getSkill } from "./src-C22mKmnQ.js";
+export { addSkills, getAgentSkillDirs, getInstalledSkills, getSkill, getSkillsDir, installSkill, isSkillInstalled, listSkills, loadAllSkills, removeSkill, removeSkills, updateSkills };

package/dist/skills/create-form/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: create-form
+description: Real-world patterns for building strongly-typed forms, multipart file uploads, server validation mapping, and dirty tracking with @wangs-ui/form.
+---
+
+# Skill: Real-World Form Workflows with `@wangs-ui/form`
+
+Use this skill when building CRUD forms, data entry dialogs, multi-field settings pages, or multipart forms in Wangs UI applications.
+
+---
+
+## 1. MCP Inspection Step (Before Building Fields)
+
+Before implementing specific input controls, query the MCP server to inspect their exact prop signatures:
+
+- `get-documentation({ id: "select" })` — Check option formats (`{ label, value }` vs object).
+- `get-documentation({ id: "datepicker" })` — Check `selectionMode` (`single`, `range`, `multiple`) and date format props.
+- `get-documentation({ id: "multiselect" })` — Check chips display and filter behavior.
+- `get-documentation({ id: "fileupload" })` — Check accepted mime types and upload handlers.
+
+---
+
+## 2. Recipe 1: Standard CRUD Form with Server Validation Mapping
+
+Real-world forms must handle async submission, loading state, and map backend validation errors back into `<Field>` errors:
+
+```tsx
+import React, { useState } from 'react';
+import Card from '@wangs-ui/react-core/primitive/card';
+import Button from '@wangs-ui/react-core/primitive/button';
+import InputText from '@wangs-ui/react-core/primitive/inputtext';
+import Select from '@wangs-ui/react-core/primitive/select';
+import { Form, Field } from '@wangs-ui/react-core';
+import { useFormControl } from '@wangs-ui/form';
+import { useI18n } from '@wangs-ui/react-i18n';
+
+interface UserFormValues {
+  fullName: string;
+  email: string;
+  role: string;
+}
+
+export default function UserForm({ onSuccess }: { onSuccess?: () => void }) {
+  const { t } = useI18n();
+  const formControl = useFormControl<UserFormValues>({ type: 'json' });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const roleOptions = [
+    { label: t('Administrator'), value: 'admin' },
+    { label: t('Operator'), value: 'operator' },
+    { label: t('Viewer'), value: 'viewer' },
+  ];
+
+  const handleSubmit = async (values: UserFormValues) => {
+    setIsSubmitting(true);
+    try {
+      // Execute API call: await api.createUser(values);
+      onSuccess?.();
+    } catch (err: any) {
+      // Map server validation error directly to field
+      if (err?.fieldErrors?.email) {
+        formControl.setError('email', {
+          type: 'server',
+          message: err.fieldErrors.email,
+        });
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className="p-6">
+      <Form control={formControl} onSubmit={handleSubmit} className="flex flex-col gap-m">
+        <h2 className="heading-2">{t('User Information')}</h2>
+
+        {/* Text Field */}
+        <Field<string>
+          name="fullName"
+          label={t('Full Name')}
+          required
+          rules={{ required: t('Full name is required') }}
+        >
+          {(field) => (
+            <InputText {...field} placeholder={t('e.g. Jane Doe')} value={field.value || ''} />
+          )}
+        </Field>
+
+        {/* Email Field with Regex Validation */}
+        <Field<string>
+          name="email"
+          label={t('Email Address')}
+          required
+          rules={{
+            required: t('Email is required'),
+            pattern: {
+              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+              message: t('Enter a valid email address'),
+            },
+          }}
+        >
+          {(field) => (
+            <InputText {...field} placeholder={t('name@company.com')} value={field.value || ''} />
+          )}
+        </Field>
+
+        {/* Select Dropdown Field */}
+        <Field<string>
+          name="role"
+          label={t('Access Role')}
+          required
+          rules={{ required: t('Role selection is required') }}
+        >
+          {(field) => (
+            <Select
+              {...field}
+              options={roleOptions}
+              placeholder={t('Select role')}
+              value={field.value}
+              onChange={(e) => field.onChange(e.value)}
+            />
+          )}
+        </Field>
+
+        {/* Form Actions */}
+        <div className="flex justify-end gap-s pt-s">
+          <Button
+            type="button"
+            variant="text"
+            label={t('Reset')}
+            onClick={() => formControl.reset()}
+            disabled={isSubmitting}
+          />
+          <Button type="submit" label={t('Save User')} severity="primary" loading={isSubmitting} />
+        </div>
+      </Form>
+    </Card>
+  );
+}
+```
+
+---
+
+## 3. Recipe 2: Multipart Form (File Upload + Metadata)
+
+For file uploads (avatar, attachment, documents), set `type: 'formdata'`:
+
+```tsx
+import { useFormControl } from '@wangs-ui/form';
+
+interface ProfileUploadValues {
+  displayName: string;
+  avatar: File | null;
+}
+
+// Generates FormData under the hood
+const formControl = useFormControl<ProfileUploadValues>({ type: 'formdata' });
+```
+
+---
+
+## 4. Key Implementation Rules
+
+1. **Always Use `<Form>` & `<Field>`**: Never bind raw uncontrolled inputs.
+2. **Translate All Labels & Error Messages**: Wrap text in `t('...')`.
+3. **Handle Loading State**: Disable reset buttons and set `loading={isSubmitting}` on submit buttons.

package/dist/skills/data-table/SKILL.md

@@ -0,0 +1,178 @@
+---
+name: data-table
+description: Real-world patterns for building full CRUD DataTables with server pagination, search filters, batch actions, and confirmation modals.
+---
+
+# Skill: Real-World DataTable & Filter Workflows
+
+Use this skill when building administrative grids, filtered listing pages, or management dashboards with `@wangs-ui/react-core`.
+
+---
+
+## 1. MCP Inspection Step (Before Building Table)
+
+Query the MCP server to inspect supported features and slots:
+
+- `get-documentation({ id: "datatable" })` — Check `paginator`, `lazy`, `onPage`, `onSort`, `selectionMode`, and `dataKey`.
+- `get-documentation({ id: "column" })` — Check `body` template, `sortable`, `frozen`, and `headerStyle`.
+- `get-documentation({ id: "tag" })` — Check severity colors for status pill badges (`success`, `warning`, `danger`, `info`).
+
+---
+
+## 2. Recipe: Full CRUD Data Grid with Filter Toolbar & Batch Actions
+
+```tsx
+import React, { useState } from 'react';
+import DataTable, { Column } from '@wangs-ui/react-core/primitive/datatable';
+import Button from '@wangs-ui/react-core/primitive/button';
+import InputText from '@wangs-ui/react-core/primitive/inputtext';
+import Select from '@wangs-ui/react-core/primitive/select';
+import Tag from '@wangs-ui/react-core/primitive/tag';
+import Dialog from '@wangs-ui/react-core/primitive/dialog';
+import Card from '@wangs-ui/react-core/primitive/card';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { SearchLine, DeleteBin6Line, EditLine, AddLine } from '@wangs-ui/react-icons';
+
+interface CustomerRecord {
+  id: string;
+  name: string;
+  email: string;
+  status: 'active' | 'pending' | 'suspended';
+  createdAt: string;
+}
+
+export default function CustomerManagementView() {
+  const { t } = useI18n();
+  const [records, setRecords] = useState<CustomerRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
+  const [selectedRows, setSelectedRows] = useState<CustomerRecord[]>([]);
+  const [deleteTarget, setDeleteTarget] = useState<CustomerRecord | null>(null);
+
+  // Status Badge Template
+  const statusTemplate = (row: CustomerRecord) => {
+    const severityMap: Record<string, 'success' | 'warning' | 'danger'> = {
+      active: 'success',
+      pending: 'warning',
+      suspended: 'danger',
+    };
+    return <Tag value={t(row.status)} severity={severityMap[row.status] || 'info'} />;
+  };
+
+  // Row Actions Template
+  const actionsTemplate = (row: CustomerRecord) => (
+    <div className="flex items-center gap-xs">
+      <Button
+        variant="text"
+        icon={<EditLine />}
+        aria-label={t('Edit')}
+        onClick={() => console.log('Edit', row.id)}
+      />
+      <Button
+        variant="text"
+        severity="danger"
+        icon={<DeleteBin6Line />}
+        aria-label={t('Delete')}
+        onClick={() => setDeleteTarget(row)}
+      />
+    </div>
+  );
+
+  return (
+    <Card className="flex flex-col gap-m p-6">
+      {/* 1. Filter & Search Toolbar */}
+      <div className="flex flex-wrap items-center justify-between gap-s">
+        <div className="flex flex-wrap items-center gap-s">
+          <InputText
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t('Search customer...')}
+            className="w-64"
+          />
+          <Select
+            value={selectedStatus}
+            options={[
+              { label: t('All Statuses'), value: null },
+              { label: t('Active'), value: 'active' },
+              { label: t('Pending'), value: 'pending' },
+              { label: t('Suspended'), value: 'suspended' },
+            ]}
+            onChange={(e) => setSelectedStatus(e.value)}
+            placeholder={t('Filter status')}
+          />
+        </div>
+
+        <Button label={t('Add Customer')} icon={<AddLine />} severity="primary" />
+      </div>
+
+      {/* 2. Batch Selection Action Bar */}
+      {selectedRows.length > 0 && (
+        <div className="flex items-center justify-between rounded bg-primary-50 px-4 py-2 text-primary-900">
+          <span className="p font-medium">
+            {t('{{count}} items selected', { count: selectedRows.length })}
+          </span>
+          <Button
+            size="small"
+            severity="danger"
+            label={t('Delete Selected')}
+            icon={<DeleteBin6Line />}
+            onClick={() => console.log('Batch delete', selectedRows)}
+          />
+        </div>
+      )}
+
+      {/* 3. Paginated DataTable */}
+      <DataTable
+        value={records}
+        loading={loading}
+        selection={selectedRows}
+        onSelectionChange={(e) => setSelectedRows(e.value)}
+        dataKey="id"
+        paginator
+        rows={10}
+        rowsPerPageOptions={[10, 25, 50]}
+        emptyMessage={t('No customers found')}
+      >
+        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+        <Column field="name" header={t('Customer Name')} sortable />
+        <Column field="email" header={t('Email')} sortable />
+        <Column field="status" header={t('Status')} body={statusTemplate} sortable />
+        <Column header={t('Actions')} body={actionsTemplate} headerStyle={{ width: '6rem' }} />
+      </DataTable>
+
+      {/* 4. Delete Confirmation Dialog */}
+      <Dialog
+        visible={!!deleteTarget}
+        onHide={() => setDeleteTarget(null)}
+        header={t('Delete Customer')}
+        footer={
+          <div className="flex justify-end gap-xs">
+            <Button variant="text" label={t('Cancel')} onClick={() => setDeleteTarget(null)} />
+            <Button
+              severity="danger"
+              label={t('Delete')}
+              onClick={() => {
+                // Execute delete API
+                setDeleteTarget(null);
+              }}
+            />
+          </div>
+        }
+      >
+        <p className="p">
+          {t('Are you sure you want to delete {{name}}?', { name: deleteTarget?.name })}
+        </p>
+      </Dialog>
+    </Card>
+  );
+}
+```
+
+---
+
+## 3. Mandatory Best Practices
+
+1. **Always Supply `dataKey`**: Never enable row selection without `dataKey="id"`.
+2. **Translate All Headers & Messages**: Pass table headers and empty state messages into `t()`.
+3. **Control Batch Action Appearance**: Show batch action banner only when `selectedRows.length > 0`.

package/dist/skills/dialog-modal/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: dialog-modal
+description: Real-world patterns for modal forms, async confirmation workflows, and multi-step dialogs with Wangs UI Dialog and Modal components.
+---
+
+# Skill: Real-World Dialog & Modal Workflows
+
+Use this skill when building interactive modals, create/edit modal forms, destructive action confirmations, or slide-in overlay panels.
+
+---
+
+## 1. MCP Inspection Step (Before Implementing Overlays)
+
+Query the MCP server to check overlay configuration and animation options:
+
+- `get-documentation({ id: "dialog" })` — Check `header`, `footer`, `visible`, `onHide`, `modal`, and `dismissableMask`.
+- `get-documentation({ id: "modal" })` — Check fullscreen modes, size variants, and slide-in drawer options.
+- `get-documentation({ id: "toast" })` — Check severity toasts (`success`, `error`, `info`, `warn`) to trigger after modal actions.
+
+---
+
+## 2. Recipe: Create/Edit Form inside a Modal Dialog
+
+This real-world recipe coordinates a modal wrapper with an embedded `@wangs-ui/form`, handles saving state, prevents accidental dismiss while saving, and resets state upon close:
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import Dialog from '@wangs-ui/react-core/primitive/dialog';
+import Button from '@wangs-ui/react-core/primitive/button';
+import InputText from '@wangs-ui/react-core/primitive/inputtext';
+import { Form, Field } from '@wangs-ui/react-core';
+import { useFormControl } from '@wangs-ui/form';
+import { useI18n } from '@wangs-ui/react-i18n';
+
+interface EditItemModel {
+  title: string;
+  code: string;
+}
+
+interface ItemModalProps {
+  visible: boolean;
+  item?: EditItemModel | null;
+  onHide: () => void;
+  onSaved: (item: EditItemModel) => void;
+}
+
+export default function ItemFormModal({ visible, item, onHide, onSaved }: ItemModalProps) {
+  const { t } = useI18n();
+  const formControl = useFormControl<EditItemModel>({ type: 'json' });
+  const [saving, setSaving] = useState(false);
+
+  // Sync form values when modal opens or item changes
+  useEffect(() => {
+    if (visible) {
+      formControl.reset(item || { title: '', code: '' });
+    }
+  }, [visible, item]);
+
+  const handleFormSubmit = async (values: EditItemModel) => {
+    setSaving(true);
+    try {
+      // Execute API call: await api.save(values);
+      onSaved(values);
+      onHide();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const footerActions = (
+    <div className="flex justify-end gap-xs">
+      <Button type="button" variant="text" label={t('Cancel')} onClick={onHide} disabled={saving} />
+      <Button
+        type="submit"
+        form="modal-item-form"
+        label={item ? t('Save Changes') : t('Create Item')}
+        severity="primary"
+        loading={saving}
+      />
+    </div>
+  );
+
+  return (
+    <Dialog
+      visible={visible}
+      onHide={() => !saving && onHide()}
+      header={item ? t('Edit Item') : t('New Item')}
+      footer={footerActions}
+      style={{ width: '450px' }}
+      modal
+    >
+      <Form
+        id="modal-item-form"
+        control={formControl}
+        onSubmit={handleFormSubmit}
+        className="flex flex-col gap-m pt-xs"
+      >
+        <Field<string>
+          name="title"
+          label={t('Item Title')}
+          required
+          rules={{ required: t('Title is required') }}
+        >
+          {(field) => (
+            <InputText {...field} placeholder={t('Enter title')} value={field.value || ''} />
+          )}
+        </Field>
+
+        <Field<string>
+          name="code"
+          label={t('Item Code')}
+          required
+          rules={{ required: t('Code is required') }}
+        >
+          {(field) => (
+            <InputText {...field} placeholder={t('e.g. SKU-100')} value={field.value || ''} />
+          )}
+        </Field>
+      </Form>
+    </Dialog>
+  );
+}
+```
+
+---
+
+## 3. Mandatory Best Practices
+
+1. **Decouple Submit Button from Form Body**: Use `form="modal-item-form"` on the submit button inside `footer` so actions stay neatly aligned in the footer bar.
+2. **Prevent Close During Mutation**: Guard `onHide={() => !saving && onHide()}` to prevent accidental dismissal during in-flight network requests.
+3. **Always Reset on Open**: Sync initial values in an effect keyed on `visible`.

package/dist/skills/i18n-usage/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: i18n-usage
+description: Real-world internationalization, currency formatting, localized date pickers, and plural interpolation with @wangs-ui/react-i18n.
+---
+
+# Skill: Application Internationalization & Formatting
+
+Use this skill when handling multi-language UI, currency inputs, localized dates, or dynamic sentence translations.
+
+---
+
+## 1. MCP Inspection Step (Before Localizing Complex Components)
+
+Query the MCP server to inspect component-specific localization props:
+
+- `get-documentation({ id: "currencyinput" })` — Check currency prefix, locale formatting, and min/max constraints.
+- `get-documentation({ id: "datepicker" })` — Check month/day names, firstDayOfWeek, and dateFormat options.
+- `get-documentation({ id: "languageswitcher" })` — Check language picker dropdown variants.
+
+---
+
+## 2. Recipe: Localized Currency, Date, and Pluralization Flow
+
+```tsx
+import React, { useState } from 'react';
+import Card from '@wangs-ui/react-core/primitive/card';
+import CurrencyInput from '@wangs-ui/react-core/primitive/currencyinput';
+import DatePicker from '@wangs-ui/react-core/primitive/datepicker';
+import { useI18n } from '@wangs-ui/react-i18n';
+
+export default function InvoiceSummary() {
+  const { t, currentLocale, setLocale } = useI18n();
+  const [amount, setAmount] = useState<number | null>(1500000);
+  const [dueDate, setDueDate] = useState<Date | null>(new Date());
+  const itemCount = 5;
+
+  return (
+    <Card className="flex flex-col gap-m p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="heading-2">{t('Invoice Summary')}</h2>
+        {/* Language selector toggle */}
+        <button
+          className="text-primary-600 underline text-sm"
+          onClick={() => setLocale(currentLocale === 'en' ? 'id' : 'en')}
+        >
+          {currentLocale === 'en' ? 'Bahasa Indonesia' : 'English'}
+        </button>
+      </div>
+
+      {/* 1. Currency Formatting Input */}
+      <div className="flex flex-col gap-xs">
+        <label className="heading-4">{t('Total Amount')}</label>
+        <CurrencyInput
+          value={amount}
+          onValueChange={(e) => setAmount(e.value ?? null)}
+          currency={currentLocale === 'id' ? 'IDR' : 'USD'}
+          locale={currentLocale === 'id' ? 'id-ID' : 'en-US'}
+        />
+      </div>
+
+      {/* 2. Localized Date Picker */}
+      <div className="flex flex-col gap-xs">
+        <label className="heading-4">{t('Payment Due Date')}</label>
+        <DatePicker
+          value={dueDate}
+          onChange={(e) => setDueDate(e.value as Date)}
+          dateFormat={currentLocale === 'id' ? 'dd/mm/yy' : 'mm/dd/yy'}
+          showIcon
+        />
+      </div>
+
+      {/* 3. Parameterized Translation */}
+      <p className="p text-secondary-600">
+        {t('Invoice includes {{count}} billed line items.', { count: itemCount })}
+      </p>
+    </Card>
+  );
+}
+```
+
+---
+
+## 3. Mandatory Translation Rules
+
+1. **Sentence Keys in Natural English**: Always write `t('Invoice Summary')` instead of artificial dotted paths like `t('invoice.summary.title')`.
+2. **Dynamic Variables in Double Braces**: Always use `t('Hello, {{name}}', { name })`.
+3. **No Concatenation**: Never write `t('Total:') + ' ' + total`. Use `t('Total: {{total}}', { total })`.