@wangs-ui/skills 1.0.37 → 1.0.39

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-DZa2DBdf.js";
+import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-95qOyh-g.js";
 import path from "node:path";
 import { parseArgs } from "node:util";
 //#region bin.ts

package/dist/index.js

@@ -1,2 +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-DZa2DBdf.js";
-export { addSkills, getAgentSkillDirs, getInstalledSkills, getSkill, getSkillsDir, installSkill, isSkillInstalled, listSkills, loadAllSkills, removeSkill, removeSkills, updateSkills };
+import { a as getAgentSkillDirs, c as isSkillInstalled, d 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-95qOyh-g.js";
+export { addSkills, getAgentSkillDirs, getInstalledSkills, getSkill, installSkill, isSkillInstalled, listSkills, loadAllSkills, removeSkill, removeSkills, updateSkills };

package/dist/src-95qOyh-g.js

@@ -0,0 +1,236 @@
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { cancel, intro, isCancel, multiselect, outro } from "@clack/prompts";
+//#region skills/create-form/SKILL.md?raw
+var SKILL_default$5 = "---\nname: create-form\ndescription: Real-world patterns for building strongly-typed forms, multipart file uploads, server validation mapping, and dirty tracking with @wangs-ui/form.\n---\n\n# Skill: Real-World Form Workflows with `@wangs-ui/form`\n\nUse this skill when building CRUD forms, data entry dialogs, multi-field settings pages, or multipart forms in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Step (Before Building Fields)\n\nBefore implementing specific input controls, query the MCP server to inspect their exact prop signatures:\n\n- `get-documentation({ id: \"select\" })` — Check option formats (`{ label, value }` vs object).\n- `get-documentation({ id: \"datepicker\" })` — Check `selectionMode` (`single`, `range`, `multiple`) and date format props.\n- `get-documentation({ id: \"multiselect\" })` — Check chips display and filter behavior.\n- `get-documentation({ id: \"fileupload\" })` — Check accepted mime types and upload handlers.\n\n---\n\n## 2. Recipe 1: Standard CRUD Form with Server Validation Mapping\n\nReal-world forms must handle async submission, loading state, and map backend validation errors back into `<Field>` errors:\n\n```tsx\nimport React, { useState } from 'react';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport { Form, Field } from '@wangs-ui/react-core';\nimport { useFormControl } from '@wangs-ui/form';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\ninterface UserFormValues {\n  fullName: string;\n  email: string;\n  role: string;\n}\n\nexport default function UserForm({ onSuccess }: { onSuccess?: () => void }) {\n  const { t } = useI18n();\n  const formControl = useFormControl<UserFormValues>({ type: 'json' });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const roleOptions = [\n    { label: t('Administrator'), value: 'admin' },\n    { label: t('Operator'), value: 'operator' },\n    { label: t('Viewer'), value: 'viewer' },\n  ];\n\n  const handleSubmit = async (values: UserFormValues) => {\n    setIsSubmitting(true);\n    try {\n      // Execute API call: await api.createUser(values);\n      onSuccess?.();\n    } catch (err: any) {\n      // Map server validation error directly to field\n      if (err?.fieldErrors?.email) {\n        formControl.setError('email', {\n          type: 'server',\n          message: err.fieldErrors.email,\n        });\n      }\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <Card className=\"p-6\">\n      <Form control={formControl} onSubmit={handleSubmit} className=\"flex flex-col gap-m\">\n        <h2 className=\"heading-2\">{t('User Information')}</h2>\n\n        {/* Text Field */}\n        <Field<string>\n          name=\"fullName\"\n          label={t('Full Name')}\n          required\n          rules={{ required: t('Full name is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('e.g. Jane Doe')} value={field.value || ''} />\n          )}\n        </Field>\n\n        {/* Email Field with Regex Validation */}\n        <Field<string>\n          name=\"email\"\n          label={t('Email Address')}\n          required\n          rules={{\n            required: t('Email is required'),\n            pattern: {\n              value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,\n              message: t('Enter a valid email address'),\n            },\n          }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('name@company.com')} value={field.value || ''} />\n          )}\n        </Field>\n\n        {/* Select Dropdown Field */}\n        <Field<string>\n          name=\"role\"\n          label={t('Access Role')}\n          required\n          rules={{ required: t('Role selection is required') }}\n        >\n          {(field) => (\n            <Select\n              {...field}\n              options={roleOptions}\n              placeholder={t('Select role')}\n              value={field.value}\n              onChange={(e) => field.onChange(e.value)}\n            />\n          )}\n        </Field>\n\n        {/* Form Actions */}\n        <div className=\"flex justify-end gap-s pt-s\">\n          <Button\n            type=\"button\"\n            variant=\"text\"\n            label={t('Reset')}\n            onClick={() => formControl.reset()}\n            disabled={isSubmitting}\n          />\n          <Button type=\"submit\" label={t('Save User')} severity=\"primary\" loading={isSubmitting} />\n        </div>\n      </Form>\n    </Card>\n  );\n}\n```\n\n---\n\n## 3. Recipe 2: Multipart Form (File Upload + Metadata)\n\nFor file uploads (avatar, attachment, documents), set `type: 'formdata'`:\n\n```tsx\nimport { useFormControl } from '@wangs-ui/form';\n\ninterface ProfileUploadValues {\n  displayName: string;\n  avatar: File | null;\n}\n\n// Generates FormData under the hood\nconst formControl = useFormControl<ProfileUploadValues>({ type: 'formdata' });\n```\n\n---\n\n## 4. Key Implementation Rules\n\n1. **Always Use `<Form>` & `<Field>`**: Never bind raw uncontrolled inputs.\n2. **Translate All Labels & Error Messages**: Wrap text in `t('...')`.\n3. **Handle Loading State**: Disable reset buttons and set `loading={isSubmitting}` on submit buttons.\n";
+//#endregion
+//#region skills/data-table/SKILL.md?raw
+var SKILL_default$4 = "---\nname: data-table\ndescription: Real-world patterns for building full CRUD DataTables with server pagination, search filters, batch actions, and confirmation modals.\n---\n\n# Skill: Real-World DataTable & Filter Workflows\n\nUse this skill when building administrative grids, filtered listing pages, or management dashboards with `@wangs-ui/react-core`.\n\n---\n\n## 1. MCP Inspection Step (Before Building Table)\n\nQuery the MCP server to inspect supported features and slots:\n\n- `get-documentation({ id: \"datatable\" })` — Check `paginator`, `lazy`, `onPage`, `onSort`, `selectionMode`, and `dataKey`.\n- `get-documentation({ id: \"column\" })` — Check `body` template, `sortable`, `frozen`, and `headerStyle`.\n- `get-documentation({ id: \"tag\" })` — Check severity colors for status pill badges (`success`, `warning`, `danger`, `info`).\n\n---\n\n## 2. Recipe: Full CRUD Data Grid with Filter Toolbar & Batch Actions\n\n```tsx\nimport React, { useState } from 'react';\nimport DataTable, { Column } from '@wangs-ui/react-core/primitive/datatable';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport Tag from '@wangs-ui/react-core/primitive/tag';\nimport Dialog from '@wangs-ui/react-core/primitive/dialog';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport { useI18n } from '@wangs-ui/react-i18n';\nimport { SearchLine, DeleteBin6Line, EditLine, AddLine } from '@wangs-ui/react-icons';\n\ninterface CustomerRecord {\n  id: string;\n  name: string;\n  email: string;\n  status: 'active' | 'pending' | 'suspended';\n  createdAt: string;\n}\n\nexport default function CustomerManagementView() {\n  const { t } = useI18n();\n  const [records, setRecords] = useState<CustomerRecord[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedStatus, setSelectedStatus] = useState<string | null>(null);\n  const [selectedRows, setSelectedRows] = useState<CustomerRecord[]>([]);\n  const [deleteTarget, setDeleteTarget] = useState<CustomerRecord | null>(null);\n\n  // Status Badge Template\n  const statusTemplate = (row: CustomerRecord) => {\n    const severityMap: Record<string, 'success' | 'warning' | 'danger'> = {\n      active: 'success',\n      pending: 'warning',\n      suspended: 'danger',\n    };\n    return <Tag value={t(row.status)} severity={severityMap[row.status] || 'info'} />;\n  };\n\n  // Row Actions Template\n  const actionsTemplate = (row: CustomerRecord) => (\n    <div className=\"flex items-center gap-xs\">\n      <Button\n        variant=\"text\"\n        icon={<EditLine />}\n        aria-label={t('Edit')}\n        onClick={() => console.log('Edit', row.id)}\n      />\n      <Button\n        variant=\"text\"\n        severity=\"danger\"\n        icon={<DeleteBin6Line />}\n        aria-label={t('Delete')}\n        onClick={() => setDeleteTarget(row)}\n      />\n    </div>\n  );\n\n  return (\n    <Card className=\"flex flex-col gap-m p-6\">\n      {/* 1. Filter & Search Toolbar */}\n      <div className=\"flex flex-wrap items-center justify-between gap-s\">\n        <div className=\"flex flex-wrap items-center gap-s\">\n          <InputText\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            placeholder={t('Search customer...')}\n            className=\"w-64\"\n          />\n          <Select\n            value={selectedStatus}\n            options={[\n              { label: t('All Statuses'), value: null },\n              { label: t('Active'), value: 'active' },\n              { label: t('Pending'), value: 'pending' },\n              { label: t('Suspended'), value: 'suspended' },\n            ]}\n            onChange={(e) => setSelectedStatus(e.value)}\n            placeholder={t('Filter status')}\n          />\n        </div>\n\n        <Button label={t('Add Customer')} icon={<AddLine />} severity=\"primary\" />\n      </div>\n\n      {/* 2. Batch Selection Action Bar */}\n      {selectedRows.length > 0 && (\n        <div className=\"flex items-center justify-between rounded bg-primary-50 px-4 py-2 text-primary-900\">\n          <span className=\"p font-medium\">\n            {t('{{count}} items selected', { count: selectedRows.length })}\n          </span>\n          <Button\n            size=\"small\"\n            severity=\"danger\"\n            label={t('Delete Selected')}\n            icon={<DeleteBin6Line />}\n            onClick={() => console.log('Batch delete', selectedRows)}\n          />\n        </div>\n      )}\n\n      {/* 3. Paginated DataTable */}\n      <DataTable\n        value={records}\n        loading={loading}\n        selection={selectedRows}\n        onSelectionChange={(e) => setSelectedRows(e.value)}\n        dataKey=\"id\"\n        paginator\n        rows={10}\n        rowsPerPageOptions={[10, 25, 50]}\n        emptyMessage={t('No customers found')}\n      >\n        <Column selectionMode=\"multiple\" headerStyle={{ width: '3rem' }} />\n        <Column field=\"name\" header={t('Customer Name')} sortable />\n        <Column field=\"email\" header={t('Email')} sortable />\n        <Column field=\"status\" header={t('Status')} body={statusTemplate} sortable />\n        <Column header={t('Actions')} body={actionsTemplate} headerStyle={{ width: '6rem' }} />\n      </DataTable>\n\n      {/* 4. Delete Confirmation Dialog */}\n      <Dialog\n        visible={!!deleteTarget}\n        onHide={() => setDeleteTarget(null)}\n        header={t('Delete Customer')}\n        footer={\n          <div className=\"flex justify-end gap-xs\">\n            <Button variant=\"text\" label={t('Cancel')} onClick={() => setDeleteTarget(null)} />\n            <Button\n              severity=\"danger\"\n              label={t('Delete')}\n              onClick={() => {\n                // Execute delete API\n                setDeleteTarget(null);\n              }}\n            />\n          </div>\n        }\n      >\n        <p className=\"p\">\n          {t('Are you sure you want to delete {{name}}?', { name: deleteTarget?.name })}\n        </p>\n      </Dialog>\n    </Card>\n  );\n}\n```\n\n---\n\n## 3. Mandatory Best Practices\n\n1. **Always Supply `dataKey`**: Never enable row selection without `dataKey=\"id\"`.\n2. **Translate All Headers & Messages**: Pass table headers and empty state messages into `t()`.\n3. **Control Batch Action Appearance**: Show batch action banner only when `selectedRows.length > 0`.\n";
+//#endregion
+//#region skills/dialog-modal/SKILL.md?raw
+var SKILL_default$3 = "---\nname: dialog-modal\ndescription: Real-world patterns for modal forms, async confirmation workflows, and multi-step dialogs with Wangs UI Dialog and Modal components.\n---\n\n# Skill: Real-World Dialog & Modal Workflows\n\nUse this skill when building interactive modals, create/edit modal forms, destructive action confirmations, or slide-in overlay panels.\n\n---\n\n## 1. MCP Inspection Step (Before Implementing Overlays)\n\nQuery the MCP server to check overlay configuration and animation options:\n\n- `get-documentation({ id: \"dialog\" })` — Check `header`, `footer`, `visible`, `onHide`, `modal`, and `dismissableMask`.\n- `get-documentation({ id: \"modal\" })` — Check fullscreen modes, size variants, and slide-in drawer options.\n- `get-documentation({ id: \"toast\" })` — Check severity toasts (`success`, `error`, `info`, `warn`) to trigger after modal actions.\n\n---\n\n## 2. Recipe: Create/Edit Form inside a Modal Dialog\n\nThis 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:\n\n```tsx\nimport React, { useState, useEffect } from 'react';\nimport Dialog from '@wangs-ui/react-core/primitive/dialog';\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport { Form, Field } from '@wangs-ui/react-core';\nimport { useFormControl } from '@wangs-ui/form';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\ninterface EditItemModel {\n  title: string;\n  code: string;\n}\n\ninterface ItemModalProps {\n  visible: boolean;\n  item?: EditItemModel | null;\n  onHide: () => void;\n  onSaved: (item: EditItemModel) => void;\n}\n\nexport default function ItemFormModal({ visible, item, onHide, onSaved }: ItemModalProps) {\n  const { t } = useI18n();\n  const formControl = useFormControl<EditItemModel>({ type: 'json' });\n  const [saving, setSaving] = useState(false);\n\n  // Sync form values when modal opens or item changes\n  useEffect(() => {\n    if (visible) {\n      formControl.reset(item || { title: '', code: '' });\n    }\n  }, [visible, item]);\n\n  const handleFormSubmit = async (values: EditItemModel) => {\n    setSaving(true);\n    try {\n      // Execute API call: await api.save(values);\n      onSaved(values);\n      onHide();\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const footerActions = (\n    <div className=\"flex justify-end gap-xs\">\n      <Button type=\"button\" variant=\"text\" label={t('Cancel')} onClick={onHide} disabled={saving} />\n      <Button\n        type=\"submit\"\n        form=\"modal-item-form\"\n        label={item ? t('Save Changes') : t('Create Item')}\n        severity=\"primary\"\n        loading={saving}\n      />\n    </div>\n  );\n\n  return (\n    <Dialog\n      visible={visible}\n      onHide={() => !saving && onHide()}\n      header={item ? t('Edit Item') : t('New Item')}\n      footer={footerActions}\n      style={{ width: '450px' }}\n      modal\n    >\n      <Form\n        id=\"modal-item-form\"\n        control={formControl}\n        onSubmit={handleFormSubmit}\n        className=\"flex flex-col gap-m pt-xs\"\n      >\n        <Field<string>\n          name=\"title\"\n          label={t('Item Title')}\n          required\n          rules={{ required: t('Title is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('Enter title')} value={field.value || ''} />\n          )}\n        </Field>\n\n        <Field<string>\n          name=\"code\"\n          label={t('Item Code')}\n          required\n          rules={{ required: t('Code is required') }}\n        >\n          {(field) => (\n            <InputText {...field} placeholder={t('e.g. SKU-100')} value={field.value || ''} />\n          )}\n        </Field>\n      </Form>\n    </Dialog>\n  );\n}\n```\n\n---\n\n## 3. Mandatory Best Practices\n\n1. **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.\n2. **Prevent Close During Mutation**: Guard `onHide={() => !saving && onHide()}` to prevent accidental dismissal during in-flight network requests.\n3. **Always Reset on Open**: Sync initial values in an effect keyed on `visible`.\n";
+//#endregion
+//#region skills/i18n-usage/SKILL.md?raw
+var SKILL_default$2 = "---\nname: i18n-usage\ndescription: Real-world internationalization, currency formatting, localized date pickers, and plural interpolation with @wangs-ui/react-i18n.\n---\n\n# Skill: Application Internationalization & Formatting\n\nUse this skill when handling multi-language UI, currency inputs, localized dates, or dynamic sentence translations.\n\n---\n\n## 1. MCP Inspection Step (Before Localizing Complex Components)\n\nQuery the MCP server to inspect component-specific localization props:\n\n- `get-documentation({ id: \"currencyinput\" })` — Check currency prefix, locale formatting, and min/max constraints.\n- `get-documentation({ id: \"datepicker\" })` — Check month/day names, firstDayOfWeek, and dateFormat options.\n- `get-documentation({ id: \"languageswitcher\" })` — Check language picker dropdown variants.\n\n---\n\n## 2. Recipe: Localized Currency, Date, and Pluralization Flow\n\n```tsx\nimport React, { useState } from 'react';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport CurrencyInput from '@wangs-ui/react-core/primitive/currencyinput';\nimport DatePicker from '@wangs-ui/react-core/primitive/datepicker';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\nexport default function InvoiceSummary() {\n  const { t, currentLocale, setLocale } = useI18n();\n  const [amount, setAmount] = useState<number | null>(1500000);\n  const [dueDate, setDueDate] = useState<Date | null>(new Date());\n  const itemCount = 5;\n\n  return (\n    <Card className=\"flex flex-col gap-m p-6\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"heading-2\">{t('Invoice Summary')}</h2>\n        {/* Language selector toggle */}\n        <button\n          className=\"text-primary-600 underline text-sm\"\n          onClick={() => setLocale(currentLocale === 'en' ? 'id' : 'en')}\n        >\n          {currentLocale === 'en' ? 'Bahasa Indonesia' : 'English'}\n        </button>\n      </div>\n\n      {/* 1. Currency Formatting Input */}\n      <div className=\"flex flex-col gap-xs\">\n        <label className=\"heading-4\">{t('Total Amount')}</label>\n        <CurrencyInput\n          value={amount}\n          onValueChange={(e) => setAmount(e.value ?? null)}\n          currency={currentLocale === 'id' ? 'IDR' : 'USD'}\n          locale={currentLocale === 'id' ? 'id-ID' : 'en-US'}\n        />\n      </div>\n\n      {/* 2. Localized Date Picker */}\n      <div className=\"flex flex-col gap-xs\">\n        <label className=\"heading-4\">{t('Payment Due Date')}</label>\n        <DatePicker\n          value={dueDate}\n          onChange={(e) => setDueDate(e.value as Date)}\n          dateFormat={currentLocale === 'id' ? 'dd/mm/yy' : 'mm/dd/yy'}\n          showIcon\n        />\n      </div>\n\n      {/* 3. Parameterized Translation */}\n      <p className=\"p text-secondary-600\">\n        {t('Invoice includes {{count}} billed line items.', { count: itemCount })}\n      </p>\n    </Card>\n  );\n}\n```\n\n---\n\n## 3. Mandatory Translation Rules\n\n1. **Sentence Keys in Natural English**: Always write `t('Invoice Summary')` instead of artificial dotted paths like `t('invoice.summary.title')`.\n2. **Dynamic Variables in Double Braces**: Always use `t('Hello, {{name}}', { name })`.\n3. **No Concatenation**: Never write `t('Total:') + ' ' + total`. Use `t('Total: {{total}}', { total })`.\n";
+//#endregion
+//#region skills/layout-navigation/SKILL.md?raw
+var SKILL_default$1 = "---\nname: layout-navigation\ndescription: Guidelines and patterns for page layout, sidebar navigation, breadcrumbs, and tabs using Wangs UI layout blocks.\n---\n\n# Skill: Layout & Navigation Structure\n\nUse this skill when constructing application shells, multi-level sidebars, page headers, breadcrumbs, or tabbed views with `@wangs-ui/react-core`.\n\n---\n\n## 1. App Shell Pattern\n\n```tsx\nimport React from 'react';\nimport AppLayout from '@wangs-ui/react-core/blocks/applayout';\nimport Sidebar from '@wangs-ui/react-core/blocks/sidebar';\nimport Breadcrumb from '@wangs-ui/react-core/primitive/breadcrumb';\nimport { HomeLine, UserLine, SettingsLine } from '@wangs-ui/react-icons';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\nexport default function MainAppShell({ children }: { children: React.ReactNode }) {\n  const { t } = useI18n();\n\n  const navigationItems = [\n    { label: t('Dashboard'), icon: <HomeLine />, href: '/dashboard' },\n    { label: t('Users'), icon: <UserLine />, href: '/users' },\n    { label: t('Settings'), icon: <SettingsLine />, href: '/settings' },\n  ];\n\n  return (\n    <AppLayout\n      sidebar={<Sidebar items={navigationItems} />}\n      header={\n        <header className=\"flex h-14 items-center justify-between border-b border-secondary-200 px-6\">\n          <Breadcrumb model={[{ label: t('Home') }, { label: t('Dashboard') }]} />\n        </header>\n      }\n    >\n      <main className=\"p-6\">{children}</main>\n    </AppLayout>\n  );\n}\n```\n\n---\n\n## 2. Best Practices\n\n1. **Page Title & Breadcrumb Alignment**:\n   Every page view inside the layout should provide clear `.heading-1` hierarchy and synchronized breadcrumbs.\n2. **Spacing Grid Consistency**:\n   Use consistent outer container padding (`p-6` / `p-xxl`) across views.\n3. **Tabbed Subviews**:\n   When separating complex forms or detail views, use `<Tabs>` component with controlled tab index.\n\n---\n\n## 3. MCP Navigation & Block Inspection\n\nTo inspect complete navigation options, badge counters, collapsible sidebars, or responsive header controls:\n\n- Call MCP tool `get-documentation({ id: \"sidebar\" })` or `get-documentation({ id: \"breadcrumb\" })` to view full configuration options and live stories.\n";
+//#endregion
+//#region skills/wangs-ui-components/SKILL.md?raw
+var SKILL_default = "---\nname: wangs-ui-components\ndescription: Foundational rules, subpath imports, design tokens, and the MCP Discovery Protocol for building React apps with Wangs UI.\n---\n\n# Skill: Wangs UI Component Fundamentals & MCP Protocol\n\nUse this skill whenever you write or modify UI components using Wangs UI (`@wangs-ui/react-core`, `@wangs-ui/react-icons`, `@wangs-ui/react-presets`).\n\n---\n\n## 1. The MCP Discovery Protocol (Mandatory Before Writing Code)\n\nDo **NOT** guess component props, Pass-Through (`pt`) slots, or event names. Follow this discovery protocol:\n\n```mermaid\ngraph TD\n    A[Identify Component Needed] --> B[Call get-documentation id]\n    B --> C{Need live story / variant?}\n    C -->|Yes| D[Call get-documentation-for-story]\n    C -->|No| E[Check Graphify: query_graph]\n    D --> E\n    E --> F[Implement Component with Subpath Imports]\n```\n\n1. **Step 1: Inspect Props & Types**:\n   Call `get-documentation({ id: \"<component-name>\" })` (e.g. `button`, `inputtext`, `datatable`) to get the exact prop interfaces, severity variants, and sizes.\n2. **Step 2: Inspect Live Usage & Slots**:\n   Call `get-documentation-for-story({ id: \"<component-name>\", storyName: \"<variant>\" })` to view how props, icons, and pass-through (`pt`) classes are composed in real code.\n3. **Step 3: Inspect Codebase Relationships**:\n   Call `query_graph({ query: \"<ComponentName>\" })` to see how other parts of the monorepo compose this component.\n\n---\n\n## 2. Subpath Modular Imports (Mandatory)\n\nAlways import via specific subpaths to guarantee tree-shaking and avoid bundling entire packages:\n\n```tsx\n// Primitives\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport InputText from '@wangs-ui/react-core/primitive/inputtext';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport Tag from '@wangs-ui/react-core/primitive/tag';\n\n// Providers & Hooks\nimport { WangsUiProvider } from '@wangs-ui/react-core/api';\nimport { useI18n } from '@wangs-ui/react-i18n';\n\n// Icons\nimport { SearchLine, AddLine, DeleteBin6Line, CheckLine } from '@wangs-ui/react-icons';\n```\n\n---\n\n## 3. Strict Primitive Substitution Rule\n\nNever write raw HTML when a Wangs UI primitive exists:\n\n| Forbidden Raw HTML        | Mandatory Wangs UI Component | Subpath Import                               |\n| :------------------------ | :--------------------------- | :------------------------------------------- |\n| `<button>`                | `Button`                     | `@wangs-ui/react-core/primitive/button`      |\n| `<input type=\"text\">`     | `InputText`                  | `@wangs-ui/react-core/primitive/inputtext`   |\n| `<input type=\"number\">`   | `InputNumber`                | `@wangs-ui/react-core/primitive/inputnumber` |\n| `<input type=\"checkbox\">` | `Checkbox`                   | `@wangs-ui/react-core/primitive/checkbox`    |\n| `<select>`                | `Select`                     | `@wangs-ui/react-core/primitive/select`      |\n| `<dialog>` / modal        | `Dialog` / `Modal`           | `@wangs-ui/react-core/primitive/dialog`      |\n| `<table>`                 | `DataTable`                  | `@wangs-ui/react-core/primitive/datatable`   |\n| Container box             | `Card`                       | `@wangs-ui/react-core/primitive/card`        |\n| Pill badge                | `Tag` / `Badge`              | `@wangs-ui/react-core/primitive/tag`         |\n\n---\n\n## 4. Typography Scale & 4px Spacing Tokens\n\n### Typography Helper Classes\n\n- `.heading-1` — Page title (22px, 600)\n- `.heading-2` — Section / Card title (18px, 600)\n- `.heading-3` — Sub-header (16px, 500)\n- `.heading-4` — Field label (14px, 500)\n- `.heading-5` — Small group header (12px, 600)\n- `.p` — Body copy (12px, 500)\n\n### 4px Spacing Tokens\n\n- Gap: `gap-xs` (4px), `gap-s` (6px), `gap-md` (8px), `gap-m` (12px), `gap-l` (16px), `gap-xl` (20px), `gap-xxl` (24px)\n- Padding: `p-xs`, `p-s`, `p-md`, `p-m`, `p-l`, `p-xl`, `p-xxl`\n";
+//#endregion
+//#region src/registry.ts
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var EMBEDDED_SKILLS_RAW = {
+	"create-form": SKILL_default$5,
+	"data-table": SKILL_default$4,
+	"dialog-modal": SKILL_default$3,
+	"i18n-usage": SKILL_default$2,
+	"layout-navigation": SKILL_default$1,
+	"wangs-ui-components": SKILL_default
+};
+function parseSkillContent(id, content) {
+	let name = id;
+	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();
+	}
+	return {
+		id,
+		name,
+		description,
+		content
+	};
+}
+function loadAllSkills() {
+	if (Object.keys(EMBEDDED_SKILLS_RAW).length > 0) return Object.entries(EMBEDDED_SKILLS_RAW).map(([id, content]) => parseSkillContent(id, content));
+	const candidates = [
+		path.resolve(__dirname, "skills"),
+		path.resolve(__dirname, "../skills"),
+		path.resolve(__dirname, "../../skills")
+	];
+	for (const skillsDir of candidates) if (fs.existsSync(skillsDir)) {
+		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");
+				skills.push(parseSkillContent(entry.name, content));
+			}
+		}
+		if (skills.length > 0) return skills;
+	}
+	return [];
+}
+function getSkill(id) {
+	return loadAllSkills().find((s) => s.id === id || s.name === id);
+}
+//#endregion
+//#region src/detector.ts
+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 isSkillInstalled(skillId, baseDir = process.cwd()) {
+	const dirs = getAgentSkillDirs(baseDir);
+	for (const d of dirs) {
+		const skillPath = path.join(d, skillId, "SKILL.md");
+		if (fs.existsSync(skillPath)) return true;
+	}
+	return false;
+}
+function getInstalledSkills(baseDir = process.cwd()) {
+	const dirs = getAgentSkillDirs(baseDir);
+	const installed = /* @__PURE__ */ new Set();
+	for (const d of dirs) if (fs.existsSync(d)) {
+		const entries = fs.readdirSync(d, { withFileTypes: true });
+		for (const entry of entries) if (entry.isDirectory()) {
+			const skillMd = path.join(d, entry.name, "SKILL.md");
+			if (fs.existsSync(skillMd)) installed.add(entry.name);
+		}
+	}
+	return Array.from(installed);
+}
+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;
+}
+function removeSkill(skillId, baseDir = process.cwd()) {
+	const targetDirs = getAgentSkillDirs(baseDir);
+	const removedPaths = [];
+	for (const baseSkillDir of targetDirs) {
+		const destDir = path.join(baseSkillDir, skillId);
+		if (fs.existsSync(destDir)) {
+			fs.rmSync(destDir, {
+				recursive: true,
+				force: true
+			});
+			removedPaths.push(destDir);
+		}
+	}
+	return removedPaths;
+}
+//#endregion
+//#region src/commands/list.ts
+function listSkills(baseDir = process.cwd()) {
+	intro(`\x1b[1m\x1b[36m📦 Wangs UI Consumer Skills Registry\x1b[0m (v1.0.39)`);
+	const allSkills = loadAllSkills();
+	const targetDirs = getAgentSkillDirs(baseDir);
+	if (allSkills.length === 0) {
+		console.log("No skills found in registry.");
+		outro("Done.");
+		return;
+	}
+	console.log(`\nAgent directories: \x1b[2m${targetDirs.join(", ")}\x1b[0m\n`);
+	for (const skill of allSkills) {
+		const statusBadge = isSkillInstalled(skill.id, baseDir) ? "\x1B[32m[Installed]\x1B[0m" : "\x1B[90m[Available]\x1B[0m";
+		console.log(`  ${statusBadge} \x1b[1m${skill.id}\x1b[0m`);
+		console.log(`    \x1b[90m${skill.description}\x1b[0m\n`);
+	}
+	outro(`Total skills: ${allSkills.length} | Run \x1b[36mnpx @wangs-ui/skills add <skill-name>\x1b[0m to install.`);
+}
+//#endregion
+//#region src/commands/add.ts
+async function addSkills(skillIds, baseDir = process.cwd()) {
+	intro("\x1B[1m\x1B[36m➕ Install Wangs UI Consumer Skills\x1B[0m");
+	const allSkills = loadAllSkills();
+	let targetIds = skillIds.filter(Boolean);
+	if (targetIds.length === 0) {
+		const selected = await multiselect({
+			message: "Select Wangs UI skills to install into your agent environment:",
+			options: allSkills.map((s) => ({
+				value: s.id,
+				label: s.id,
+				hint: s.description
+			})),
+			required: true
+		});
+		if (isCancel(selected)) {
+			cancel("Operation cancelled.");
+			return;
+		}
+		targetIds = selected;
+	}
+	const installedList = [];
+	for (const id of targetIds) {
+		const skill = getSkill(id);
+		if (!skill) {
+			console.log(`\x1b[33m⚠️  Skill "${id}" not found in registry. Run "list" to view available skills.\x1b[0m`);
+			continue;
+		}
+		const paths = installSkill(skill, baseDir);
+		installedList.push(skill.id);
+		for (const p of paths) console.log(`  \x1b[32m✔\x1b[0m Installed \x1b[1m${skill.id}\x1b[0m -> \x1b[2m${p}\x1b[0m`);
+	}
+	if (installedList.length > 0) outro(`\x1b[32mSuccessfully installed ${installedList.length} skill(s)!\x1b[0m`);
+	else outro("No skills were installed.");
+}
+//#endregion
+//#region src/commands/update.ts
+function updateSkills(skillIds = [], baseDir = process.cwd()) {
+	intro("\x1B[1m\x1B[36m🔄 Update Wangs UI Consumer Skills\x1B[0m");
+	let targets = skillIds.filter(Boolean);
+	if (targets.length === 0) targets = getInstalledSkills(baseDir);
+	if (targets.length === 0) {
+		console.log("No installed skills found in project to update.");
+		outro("Done.");
+		return;
+	}
+	const updatedList = [];
+	for (const id of targets) {
+		const skill = getSkill(id);
+		if (!skill) {
+			console.log(`\x1b[33m⚠️  Skill "${id}" not found in current registry.\x1b[0m`);
+			continue;
+		}
+		const paths = installSkill(skill, baseDir);
+		updatedList.push(skill.id);
+		for (const p of paths) console.log(`  \x1b[32m✔\x1b[0m Updated \x1b[1m${skill.id}\x1b[0m -> \x1b[2m${p}\x1b[0m`);
+	}
+	outro(`\x1b[32mSuccessfully updated ${updatedList.length} skill(s)!\x1b[0m`);
+}
+//#endregion
+//#region src/commands/remove.ts
+function removeSkills(skillIds, baseDir = process.cwd()) {
+	intro("\x1B[1m\x1B[31m🗑️  Remove Wangs UI Consumer Skills\x1B[0m");
+	const targets = skillIds.filter(Boolean);
+	if (targets.length === 0) {
+		console.log("Please specify skill name(s) to remove.");
+		outro("Aborted.");
+		return;
+	}
+	const removedList = [];
+	for (const id of targets) {
+		const paths = removeSkill(id, baseDir);
+		if (paths.length > 0) {
+			removedList.push(id);
+			for (const p of paths) console.log(`  \x1b[31m✔\x1b[0m Removed \x1b[1m${id}\x1b[0m from \x1b[2m${p}\x1b[0m`);
+		} else console.log(`  \x1b[90m- Skill "${id}" was not installed.\x1b[0m`);
+	}
+	outro(`\x1b[32mCompleted. Removed ${removedList.length} skill(s).\x1b[0m`);
+}
+//#endregion
+export { getAgentSkillDirs as a, isSkillInstalled as c, loadAllSkills as d, listSkills as i, removeSkill as l, updateSkills as n, getInstalledSkills as o, addSkills as r, installSkill as s, removeSkills as t, getSkill as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/skills",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "CLI to install, update, and manage modular AI agent skills for Wangs UI React applications",
   "keywords": [
     "agents",

package/dist/src-DZa2DBdf.js

@@ -1,210 +0,0 @@
-import path from "node:path";
-import fs from "node:fs";
-import { fileURLToPath } from "node:url";
-import { cancel, intro, isCancel, multiselect, outro } from "@clack/prompts";
-//#region src/registry.ts
-var __dirname = path.dirname(fileURLToPath(import.meta.url));
-function getSkillsDir() {
-	const candidates = [
-		path.resolve(__dirname, "skills"),
-		path.resolve(__dirname, "../skills"),
-		path.resolve(__dirname, "../../skills")
-	];
-	for (const c of candidates) if (fs.existsSync(c)) return c;
-	return path.resolve(__dirname, "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 getSkill(id) {
-	return loadAllSkills().find((s) => s.id === id || s.name === id);
-}
-//#endregion
-//#region src/detector.ts
-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 isSkillInstalled(skillId, baseDir = process.cwd()) {
-	const dirs = getAgentSkillDirs(baseDir);
-	for (const d of dirs) {
-		const skillPath = path.join(d, skillId, "SKILL.md");
-		if (fs.existsSync(skillPath)) return true;
-	}
-	return false;
-}
-function getInstalledSkills(baseDir = process.cwd()) {
-	const dirs = getAgentSkillDirs(baseDir);
-	const installed = /* @__PURE__ */ new Set();
-	for (const d of dirs) if (fs.existsSync(d)) {
-		const entries = fs.readdirSync(d, { withFileTypes: true });
-		for (const entry of entries) if (entry.isDirectory()) {
-			const skillMd = path.join(d, entry.name, "SKILL.md");
-			if (fs.existsSync(skillMd)) installed.add(entry.name);
-		}
-	}
-	return Array.from(installed);
-}
-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;
-}
-function removeSkill(skillId, baseDir = process.cwd()) {
-	const targetDirs = getAgentSkillDirs(baseDir);
-	const removedPaths = [];
-	for (const baseSkillDir of targetDirs) {
-		const destDir = path.join(baseSkillDir, skillId);
-		if (fs.existsSync(destDir)) {
-			fs.rmSync(destDir, {
-				recursive: true,
-				force: true
-			});
-			removedPaths.push(destDir);
-		}
-	}
-	return removedPaths;
-}
-//#endregion
-//#region src/commands/list.ts
-function listSkills(baseDir = process.cwd()) {
-	intro(`\x1b[1m\x1b[36m📦 Wangs UI Consumer Skills Registry\x1b[0m (v1.0.37)`);
-	const allSkills = loadAllSkills();
-	const targetDirs = getAgentSkillDirs(baseDir);
-	if (allSkills.length === 0) {
-		console.log("No skills found in registry.");
-		outro("Done.");
-		return;
-	}
-	console.log(`\nAgent directories: \x1b[2m${targetDirs.join(", ")}\x1b[0m\n`);
-	for (const skill of allSkills) {
-		const statusBadge = isSkillInstalled(skill.id, baseDir) ? "\x1B[32m[Installed]\x1B[0m" : "\x1B[90m[Available]\x1B[0m";
-		console.log(`  ${statusBadge} \x1b[1m${skill.id}\x1b[0m`);
-		console.log(`    \x1b[90m${skill.description}\x1b[0m\n`);
-	}
-	outro(`Total skills: ${allSkills.length} | Run \x1b[36mnpx @wangs-ui/skills add <skill-name>\x1b[0m to install.`);
-}
-//#endregion
-//#region src/commands/add.ts
-async function addSkills(skillIds, baseDir = process.cwd()) {
-	intro("\x1B[1m\x1B[36m➕ Install Wangs UI Consumer Skills\x1B[0m");
-	const allSkills = loadAllSkills();
-	let targetIds = skillIds.filter(Boolean);
-	if (targetIds.length === 0) {
-		const selected = await multiselect({
-			message: "Select Wangs UI skills to install into your agent environment:",
-			options: allSkills.map((s) => ({
-				value: s.id,
-				label: s.id,
-				hint: s.description
-			})),
-			required: true
-		});
-		if (isCancel(selected)) {
-			cancel("Operation cancelled.");
-			return;
-		}
-		targetIds = selected;
-	}
-	const installedList = [];
-	for (const id of targetIds) {
-		const skill = getSkill(id);
-		if (!skill) {
-			console.log(`\x1b[33m⚠️  Skill "${id}" not found in registry. Run "list" to view available skills.\x1b[0m`);
-			continue;
-		}
-		const paths = installSkill(skill, baseDir);
-		installedList.push(skill.id);
-		for (const p of paths) console.log(`  \x1b[32m✔\x1b[0m Installed \x1b[1m${skill.id}\x1b[0m -> \x1b[2m${p}\x1b[0m`);
-	}
-	if (installedList.length > 0) outro(`\x1b[32mSuccessfully installed ${installedList.length} skill(s)!\x1b[0m`);
-	else outro("No skills were installed.");
-}
-//#endregion
-//#region src/commands/update.ts
-function updateSkills(skillIds = [], baseDir = process.cwd()) {
-	intro("\x1B[1m\x1B[36m🔄 Update Wangs UI Consumer Skills\x1B[0m");
-	let targets = skillIds.filter(Boolean);
-	if (targets.length === 0) targets = getInstalledSkills(baseDir);
-	if (targets.length === 0) {
-		console.log("No installed skills found in project to update.");
-		outro("Done.");
-		return;
-	}
-	const updatedList = [];
-	for (const id of targets) {
-		const skill = getSkill(id);
-		if (!skill) {
-			console.log(`\x1b[33m⚠️  Skill "${id}" not found in current registry.\x1b[0m`);
-			continue;
-		}
-		const paths = installSkill(skill, baseDir);
-		updatedList.push(skill.id);
-		for (const p of paths) console.log(`  \x1b[32m✔\x1b[0m Updated \x1b[1m${skill.id}\x1b[0m -> \x1b[2m${p}\x1b[0m`);
-	}
-	outro(`\x1b[32mSuccessfully updated ${updatedList.length} skill(s)!\x1b[0m`);
-}
-//#endregion
-//#region src/commands/remove.ts
-function removeSkills(skillIds, baseDir = process.cwd()) {
-	intro("\x1B[1m\x1B[31m🗑️  Remove Wangs UI Consumer Skills\x1B[0m");
-	const targets = skillIds.filter(Boolean);
-	if (targets.length === 0) {
-		console.log("Please specify skill name(s) to remove.");
-		outro("Aborted.");
-		return;
-	}
-	const removedList = [];
-	for (const id of targets) {
-		const paths = removeSkill(id, baseDir);
-		if (paths.length > 0) {
-			removedList.push(id);
-			for (const p of paths) console.log(`  \x1b[31m✔\x1b[0m Removed \x1b[1m${id}\x1b[0m from \x1b[2m${p}\x1b[0m`);
-		} else console.log(`  \x1b[90m- Skill "${id}" was not installed.\x1b[0m`);
-	}
-	outro(`\x1b[32mCompleted. Removed ${removedList.length} skill(s).\x1b[0m`);
-}
-//#endregion
-export { getAgentSkillDirs as a, isSkillInstalled as c, getSkillsDir as d, loadAllSkills as f, listSkills as i, removeSkill as l, updateSkills as n, getInstalledSkills as o, addSkills as r, installSkill as s, removeSkills as t, getSkill as u };