@wangs-ui/create-react-app 1.0.40 → 1.0.42

package/dist/bin.js

@@ -1163,7 +1163,7 @@ function copyProjectTemplate(options) {
 			let content = fs.readFileSync(srcPath, "utf8");
 			if (destName === "package.json") content = content.replace(/"name":\s*"[^"]*"/, `"name": "${projectName}"`);
 			else if (destName === "index.html") content = content.replace(/<title>.*<\/title>/, `<title>${projectName}</title>`);
-			if (preset === "globalsettings") content = content.replace(/presetFixedAsset/g, "presetGlobalSettings").replace(/fixedasset/g, "globalsettings");
+			if (preset !== "blue") content = content.replace(/@wangs-ui\/react-presets\/blue/g, `@wangs-ui/react-presets/${preset}`).replace(/preset:\s*blue/g, `preset: ${preset}`).replace(/palette:\s*'blue'/g, `palette: '${preset}'`).replace(/import blue from/g, `import ${preset} from`);
 			fs.writeFileSync(destPath, content, "utf8");
 		}
 	}
@@ -1215,20 +1215,24 @@ function initGitRepository(targetDir) {
 	}
 }
 //#endregion
-//#region ../skills/dist/src-ER4GIzua.js
-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";
-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";
-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";
-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";
-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";
-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";
+//#region ../skills/dist/src-5wUGCMFL.js
+var SKILL_default$7 = "---\nname: create-form\ndescription: Architecture, validation workflows, and MCP discovery protocol for building forms and input controls with @wangs-ui/react-core.\n---\n\n# Skill: Form Architecture & Validation Workflows\n\nUse this skill when building forms, data entry panels, settings pages, or multipart forms in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** hardcode or guess prop names, field configurations, or validation options. Retrieve active component definitions and live implementation stories directly from MCP:\n\n### Inspect Component & Form Contracts:\n\n```json\nget-documentation({ \"id\": \"form\" })\nget-documentation({ \"id\": \"field\" })\nget-documentation({ \"id\": \"input\" })\nget-documentation({ \"id\": \"numberinput\" })\nget-documentation({ \"id\": \"select\" })\nget-documentation({ \"id\": \"multiselect\" })\nget-documentation({ \"id\": \"datepicker\" })\nget-documentation({ \"id\": \"fileupload\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"form\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"field\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"select\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datepicker\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"fileupload\", \"storyName\": \"Default\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"useFormControl\" })\nquery_graph({ \"query\": \"Field\" })\n```\n\n---\n\n## 2. Form Architecture & State Principles\n\n1. **State & Control**:\n   - Standard REST payload forms use `useFormControl` with JSON mode.\n   - Multipart file upload workflows use `useFormControl` with FormData mode.\n2. **Field Composition**:\n   - Form inputs are wrapped with `<Field>` layout containers for unified label, tooltip, helper text, and error rendering.\n   - Exact props, slot rendering functions, and field binding options must be retrieved via MCP (`get-documentation({ \"id\": \"field\" })`).\n3. **Server Validation Error Mapping**:\n   - Backend validation responses (e.g. `422 Unprocessable Entity`) are mapped back into the form instance via `formControl.setError()`.\n4. **Submission Lifecycle**:\n   - In-flight network requests should manage loading state on submit actions and prevent accidental reset during mutations.\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Always Query MCP First**: Never guess input props or event signatures; obtain the exact types from `get-documentation`.\n2. **Strict Subpath Imports**: All components must be imported via their granular subpath (`@wangs-ui/react-core/primitive/*`, `@wangs-ui/form`).\n3. **Translate All Visible Strings**: Every field label, placeholder, helper text, and error message must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.\n";
+var SKILL_default$6 = "---\nname: data-table\ndescription: Architecture, workflows, and MCP discovery protocol for building DataTables with sorting, pagination, filtering, selection, and export.\n---\n\n# Skill: DataTable Architecture & Integration Workflows\n\nUse this skill when implementing data grids, server-paginated tables, filterable listing views, or batch management interfaces with `@wangs-ui/react-core`.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** guess table prop names or hardcode table structures. Query the MCP server dynamically to inspect exact TypeScript signatures, live story implementations, and companion controls:\n\n### Inspect Component Contracts:\n\n```json\nget-documentation({ \"id\": \"datatable\" })\nget-documentation({ \"id\": \"exportbutton\" })\nget-documentation({ \"id\": \"filtercontainer\" })\nget-documentation({ \"id\": \"bulkactionbutton\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"ServerPagination\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"Sortable\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"MultipleSelection\" })\nget-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"CustomColumn\" })\nget-documentation-for-story({ \"id\": \"exportbutton\", \"storyName\": \"WithTable\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"DataTable\" })\nquery_graph({ \"query\": \"useDataTableFetch\" })\n```\n\n---\n\n## 2. Core Architecture & Mental Model\n\nThe Wangs UI `DataTable` is built on a modular, headless-first architecture:\n\n1. **Declarative Column Definitions (`TableColumn<T>[]`)**:\n   Columns are configured as typed array objects, not as JSX children. Check `get-documentation({ \"id\": \"datatable\" })` for column field types.\n2. **Table Instance Hook (`useDataTable`)**:\n   Coordinates table state (sorting, pagination, selection, column ordering, pinning, visibility).\n3. **Data Fetching Hook (`useDataTableFetch`)**:\n   Feeds server-side data, handles loading indicators, manages query parameters (`search`, `filter`, `sort`, `page`, `limit`), and debounces requests automatically.\n4. **Ecosystem Companions**:\n   - `FilterContainer` & `FilterToggleButton`: Filter popovers and faceted search.\n   - `ExportButton`: Client/server export to Excel, CSV, PDF, or Print.\n   - `BulkActionButton`: Contextual batch actions triggered when rows are selected.\n   - `CustomColumn`: User-controlled column ordering, visibility toggling, and pinning.\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Query MCP for Current Code Patterns**: Always run `get-documentation-for-story` for `datatable` before drafting code.\n2. **Strict Subpath Imports**: Import via `@wangs-ui/react-core/primitive/datatable` and companion primitive paths.\n3. **Always Translate Visible Copy**: All column header labels, empty state messages, and action button labels must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.\n4. **Stable Row Identity**: Always configure a unique key identifier for stable selection and row identity.\n";
+var SKILL_default$5 = "---\nname: dialog-modal\ndescription: Patterns, overlay selection criteria, and MCP discovery protocol for Dialog, Modal, and DialogForm components in Wangs UI.\n---\n\n# Skill: Dialog, Modal & Overlay Workflows\n\nUse this skill when building interactive modals, create/edit dialog forms, destructive action confirmations, or slide-in overlay panels.\n\n---\n\n## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** guess overlay props, event names, or footer slots. Query the MCP server dynamically to inspect exact contracts and live story implementations:\n\n### Inspect Overlay Contracts:\n\n```json\nget-documentation({ \"id\": \"dialog\" })\nget-documentation({ \"id\": \"dialogform\" })\nget-documentation({ \"id\": \"modal\" })\nget-documentation({ \"id\": \"toast\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"dialog\", \"storyName\": \"Confirmation\" })\nget-documentation-for-story({ \"id\": \"dialogform\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"modal\", \"storyName\": \"Default\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"Dialog\" })\nquery_graph({ \"query\": \"DialogForm\" })\n```\n\n---\n\n## 2. Overlay Selection Matrix\n\n| Component        | Primary Use Case                              | Key Characteristics                                                                   |\n| :--------------- | :-------------------------------------------- | :------------------------------------------------------------------------------------ |\n| **`Dialog`**     | Confirmations, alerts, simple detail previews | Standard `header`, `footer`, and body layout; built-in backdrop dimming.              |\n| **`DialogForm`** | Create/Edit forms embedded inside a dialog    | Built-in form submit/cancel action bar, dirty state tracking, and submit lifecycle.   |\n| **`Modal`**      | Slide-in drawers, complex custom viewports    | Headless overlay primitive with flexible animations, size variants, and drawer modes. |\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Query MCP for Current Code Patterns**: Always inspect `dialog`, `dialogform`, or `modal` stories via MCP before writing overlay code.\n2. **Strict Subpath Imports**: Import via `@wangs-ui/react-core/primitive/dialog`, `@wangs-ui/react-core/primitive/dialogform`, `@wangs-ui/react-core/primitive/modal`, or `@wangs-ui/react-core/primitive/toast`.\n3. **Prevent Dismissal During Async Mutations**: Guard the close handler so users cannot accidentally dismiss the dialog while a mutation request is in-flight.\n4. **Coordinate with Toast Notifications**: Trigger feedback toasts on successful creation, update, or deletion actions.\n5. **Translate All Overlay Copy**: All dialog titles, confirmation descriptions, and button labels must be localized using `t('...')` from `@wangs-ui/react-i18n`.\n";
+var SKILL_default$4 = "---\nname: i18n-usage\ndescription: Guidelines, formatting rules, and MCP discovery protocol for internationalization with @wangs-ui/react-i18n and localized components.\n---\n\n# Skill: Application Internationalization & Localization Protocol\n\nUse this skill when handling multi-language interfaces, currency inputs, localized date formats, or dynamic text translations in Wangs UI applications.\n\n---\n\n## 1. MCP Inspection Protocol (Single Source of Truth)\n\nDo **NOT** guess component localization props or language switcher variants. Query the MCP server dynamically to inspect exact contracts and live story implementations:\n\n### Inspect Localized Component Contracts:\n\n```json\nget-documentation({ \"id\": \"languageswitcher\" })\nget-documentation({ \"id\": \"currencyinput\" })\nget-documentation({ \"id\": \"datepicker\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"languageswitcher\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"currencyinput\", \"storyName\": \"Basic\" })\nget-documentation-for-story({ \"id\": \"datepicker\", \"storyName\": \"Default\" })\n```\n\n---\n\n## 2. Translation Syntax & Golden Rules\n\n1. **Sentence Keys in Natural English**:\n   Always write human-readable English sentence keys:\n\n   ```tsx\n   // ✅ Good\n   t('Invoice Summary');\n   t('Are you sure you want to delete this customer?');\n\n   // ❌ Bad — artificial dotted keys\n   t('invoice.summary.title');\n   ```\n\n2. **Dynamic Variables in Double Braces (`{{var}}`)**:\n   Pass variables as an object using `{{variableName}}` interpolation:\n\n   ```tsx\n   // ✅ Good\n   t('Welcome back, {{name}}!', { name: user.name });\n\n   // ❌ Bad — string concatenation breaks translation word order\n   t('Welcome back, ') + user.name + '!';\n   ```\n\n3. **Pluralization with ICU Formats**:\n   Use ICU plural format for quantity-dependent sentences:\n\n   ```tsx\n   t('{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}', {\n     count: selectedCount,\n   });\n   ```\n\n4. **Runtime Locale Switching**:\n   Use the `useI18n()` hook to read or update active language:\n   ```tsx\n   import { useI18n } from '@wangs-ui/react-i18n';\n\n   const { t, currentLocale, setLocale } = useI18n();\n   ```\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Inspect Localized Components via MCP**: Query `currencyinput` and `datepicker` documentation before binding locale-sensitive formatters.\n2. **Never Hardcode User-Facing Text**: Every visible label, placeholder, dialog title, tooltip, and error message in the application must pass through `t()`.\n3. **Keep Context Intact**: Do not split sentences into separate phrases across JSX elements; translate the full sentence as a single unit.\n";
+var SKILL_default$3 = "---\nname: layout-navigation\ndescription: Architecture, navigation hierarchies, and MCP discovery protocol for AppLayout, Sidebar, Breadcrumb, and Tabs in Wangs UI.\n---\n\n# Skill: Application Layout & Navigation Hierarchy\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. MCP Inspection Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** guess layout block slots, sidebar item interfaces, or breadcrumb props. Query the MCP server dynamically to inspect exact contracts and live story implementations:\n\n### Inspect Layout & Navigation Contracts:\n\n```json\nget-documentation({ \"id\": \"applayout\" })\nget-documentation({ \"id\": \"sidebar\" })\nget-documentation({ \"id\": \"breadcrumb\" })\nget-documentation({ \"id\": \"tabs\" })\n```\n\n### Inspect Live Story Implementations:\n\n```json\nget-documentation-for-story({ \"id\": \"applayout\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"sidebar\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"breadcrumb\", \"storyName\": \"Default\" })\nget-documentation-for-story({ \"id\": \"tabs\", \"storyName\": \"Default\" })\n```\n\n### Inspect Knowledge Graph & Usages:\n\n```json\nquery_graph({ \"query\": \"AppLayout\" })\nquery_graph({ \"query\": \"Sidebar\" })\n```\n\n---\n\n## 2. Layout Architecture & Mental Model\n\n1. **Top-Level App Shell (`AppLayout`)**:\n   Provides structured slots for `sidebar`, `header`, and main content view, handling responsive viewport scaling and mobile navigation overlays.\n2. **Hierarchical Menu (`Sidebar`)**:\n   Renders single and nested navigation items, active route indicators, collapsible state, and notification badges.\n3. **Breadcrumb Trail (`Breadcrumb`)**:\n   Maintains clear navigational hierarchy on page headers.\n4. **Tabbed Sub-Views (`Tabs`)**:\n   Organizes complex entity detail views or multi-section settings into distinct tabbed panels.\n\n---\n\n## 3. Mandatory Implementation Rules\n\n1. **Query MCP for Current Code Patterns**: Inspect `applayout` and `sidebar` stories via MCP before assembling the layout.\n2. **Strict Subpath Imports**: Import layout blocks via `@wangs-ui/react-core/blocks/*` and primitives via `@wangs-ui/react-core/primitive/*`.\n3. **Consistent Spacing Grid**: Use standard container padding (`p-6` or `p-xxl`) across page contents.\n4. **Page Hierarchy Alignment**: Every page view inside the layout must provide a clear `.heading-1` hierarchy and synchronized breadcrumbs.\n5. **Translate Navigation Labels**: Wrap all sidebar item labels and breadcrumb texts in `t('...')` from `@wangs-ui/react-i18n`.\n";
+var SKILL_default$2 = "---\nname: react19-compiler-typescript\ndescription: Enforce idiomatic React 19 + TypeScript conventions built around the React Compiler's automatic memoization. Use this any time writing, generating, reviewing, or refactoring React components, hooks, or props in TypeScript/TSX — including code that manually wraps things in useMemo/useCallback/React.memo, uses forwardRef, mutates props/state, or needs typing for Actions, useOptimistic, use(), or refs. Trigger even if the user didn't say \"React 19\" or \"compiler\" explicitly; it applies whenever React component/hook code is being written or optimized.\n---\n\n# React 19 + TypeScript with the React Compiler\n\n## Why this matters\n\nReact Compiler (stable since React Compiler 1.0, October 2025) rewrites your components\nand hooks at build time, inserting memoization equivalent to `useMemo`/`useCallback`/\n`React.memo` automatically and more granularly than a human would by hand. It ships as\n`babel-plugin-react-compiler`, and its lint rules live inside `eslint-plugin-react-hooks`\n(recommended preset) so linting and compilation share one source of truth.\n\nThe practical consequence: **manual memoization is no longer the default** — it's\neither redundant, or actively harmful if it doesn't match what the compiler would have\ninferred (the compiler bails out silently rather than risk breaking your app). Writing\n\"optimized\" React in 2026 means writing _plain, rule-following_ React and trusting the\nbuild step, not sprinkling `useMemo` everywhere out of habit.\n\nThis skill assumes and builds on the base `typescript-strict-typing` skill for general\ntyping discipline (no `any`, `interface` for entities, discriminated unions for variant\nstate, etc.) — apply both together.\n\n## Core principle\n\n> Write plain, obviously-pure React. Let the compiler memoize. The Rules of React are no\n> longer just style guidance — the compiler's correctness depends on you following them.\n\n---\n\n## 1. Stop hand-rolling memoization\n\n> ⚠️ **Everything in this section assumes the compiler is confirmed active** (wired per\n> §7, verified via the \"Memo ✨\" badge in §8). If you drop manual memoization _without_\n> that confirmation, you don't get automatic memoization to replace it — you get\n> **neither**. That's not a correctness bug (React still renders the right output), but\n> every child re-renders on every parent render regardless of whether its props\n> actually changed, and every inline computation reruns every render with nothing\n> caching it. It's the pre-memoization default behavior of React — often invisible in\n> small trees, but a real source of jank in large lists, heavy computations, or deep\n> trees under a frequently-re-rendering parent. If you're not certain the compiler is\n> active yet, keep existing manual memoization until you've verified it, then remove it.\n\nDon't reach for `useMemo`, `useCallback`, or `React.memo` by default — the compiler adds\nthis automatically wherever it determines it helps.\n\n```tsx\n// ❌ Old habit — noisy, and a mismatched dependency array is a whole class of bugs\nconst filteredUsers = useMemo(() => users.filter((u) => u.isActive), [users]);\nconst handleClick = useCallback(() => onSelect(user.id), [onSelect, user.id]);\n\n// ✅ New default — just write the logic; the compiler memoizes what's worth memoizing\nconst filteredUsers = users.filter((u) => u.isActive);\nconst handleClick = () => onSelect(user.id);\n```\n\nManual memoization is still justified, narrowly, when:\n\n- You've **confirmed a compiler bail-out** (see §6) on a genuine hot path via profiling,\n  and fixing the underlying Rules-of-React violation isn't possible right now.\n- A value must have **stable referential identity across a boundary the compiler can't\n  see** — e.g. passed into a non-React library, a WebSocket subscription, or a\n  third-party hook incompatible with the compiler (`react-hook-form`'s `useForm`,\n  `@tanstack/react-table`'s `useReactTable` are known cases).\n- Keep any manual memoization it produces isolated and commented with _why_, so it\n  doesn't silently rot into a bail-out later when the code around it changes.\n\n## 2. The Rules of React are now load-bearing\n\nThe compiler assumes your components and hooks are pure. Violating these rules doesn't\njust risk a subtle bug anymore — it causes the compiler to silently skip optimizing that\ncomponent:\n\n- **Idempotent renders** — given the same props/state/context, a component must return\n  the same output. No random values, no `Date.now()`, no side effects during render.\n- **Immutability** — never mutate props, state, or context directly. Always create new\n  objects/arrays for changes.\n- **Side effects only in effects or event handlers** — never during render.\n- **Hooks called unconditionally, top-level, same order every render** — no hooks inside\n  conditionals, loops, or nested functions.\n\n```tsx\n// ❌ Mutates a prop — breaks purity and the compiler can't safely memoize this\nfunction TodoList({ todos }: { todos: Todo[] }) {\n  todos.sort((a, b) => a.priority - b.priority); // mutates caller's array\n  return (\n    <ul>\n      {todos.map((t) => (\n        <li key={t.id}>{t.title}</li>\n      ))}\n    </ul>\n  );\n}\n\n// ✅ Creates a new array — pure, compiler-safe\nfunction TodoList({ todos }: { todos: Todo[] }) {\n  const sorted = [...todos].sort((a, b) => a.priority - b.priority);\n  return (\n    <ul>\n      {sorted.map((t) => (\n        <li key={t.id}>{t.title}</li>\n      ))}\n    </ul>\n  );\n}\n```\n\n## 3. Naming conventions the compiler relies on\n\nThe compiler identifies what to optimize by naming heuristics, same as the Rules of\nHooks linter:\n\n| Kind                                                                     | Convention                      | Notes                                                                         |\n| ------------------------------------------------------------------------ | ------------------------------- | ----------------------------------------------------------------------------- |\n| Components                                                               | `PascalCase`, returns JSX       | Compiler treats it as a component to optimize                                 |\n| Custom hooks                                                             | `camelCase`, prefixed `use`     | Required for both Rules-of-Hooks lint and compiler analysis                   |\n| Plain helper functions that return JSX-like values but aren't components | Avoid `PascalCase`/`use` naming | Prevents the compiler (and other devs) from mistaking it for a component/hook |\n\n## 4. Typing React 19 primitives\n\n**`ref` as a normal prop** — `forwardRef` is no longer required for most cases; function\ncomponents can accept `ref` directly.\n\n```tsx\ntype InputProps = {\n  ref?: React.Ref<HTMLInputElement>;\n  placeholder?: string;\n};\n\nfunction TextInput({ ref, placeholder }: InputProps) {\n  return <input ref={ref} placeholder={placeholder} />;\n}\n```\n\n**Actions with `useActionState`** — type the state and payload as generics; model the\nresult as a discriminated union (per the base typing skill) rather than optional fields.\n\n```tsx\ntype FormState = { status: 'idle' } | { status: 'error'; message: string } | { status: 'success' };\n\nconst [state, formAction, isPending] = useActionState<FormState, FormData>(\n  async (_previous, formData) => {\n    const email = formData.get('email');\n    if (typeof email !== 'string' || !email.includes('@')) {\n      return { status: 'error', message: 'Invalid email' };\n    }\n    await submit(email);\n    return { status: 'success' };\n  },\n  { status: 'idle' },\n);\n```\n\n**Optimistic updates with `useOptimistic`** — type both the state and the update shape.\n\n```tsx\nconst [optimisticTodos, addOptimisticTodo] = useOptimistic<Todo[], Todo>(\n  todos,\n  (state, newTodo) => [...state, newTodo],\n);\n```\n\n**Reading a promise or context with `use()`** — type the resolved value, not the\npromise wrapper; `use()` is not a hook and may be called conditionally.\n\n```tsx\nfunction Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {\n  const comments = use(commentsPromise); // suspends until resolved\n  return (\n    <ul>\n      {comments.map((c) => (\n        <li key={c.id}>{c.text}</li>\n      ))}\n    </ul>\n  );\n}\n```\n\n**Stable event callbacks with `useEffectEvent`** (React 19.2+) — separates \"event\"\nlogic from \"reactive\" effect logic so the callback always sees the latest props/state\nwithout being listed as an effect dependency. Needs `eslint-plugin-react-hooks@6+` to\nlint correctly.\n\n```tsx\nconst onVisit = useEffectEvent((url: string) => {\n  logVisit(url, theme); // always fresh `theme`, never re-triggers the effect\n});\n\nuseEffect(() => {\n  onVisit(url);\n}, [url]); // `theme` intentionally omitted — onVisit is stable\n```\n\n## 5. Compiler-friendly render patterns\n\n- Creating new object/array/function literals inline in render (`style={{ color }}`,\n  `onClick={() => ...}`) is fine — stop manually hoisting or `useMemo`-wrapping these\n  preemptively; the compiler memoizes them if it determines it's worthwhile.\n- Avoid module-level mutable variables read or written during render — that state is\n  invisible to the compiler and breaks idempotence.\n- Don't use `useRef` to store a value that should trigger a re-render when it changes —\n  refs are an imperative escape hatch, not state, and the compiler treats them as such.\n- Keep components small and composable. The compiler optimizes per component/hook\n  boundary, so a single 300-line component gives it far less to work with than several\n  focused ones.\n\n## 6. Typing props (builds on `typescript-strict-typing`)\n\n- `interface` for a component's `Props` — it's an entity shape, often extended.\n- A discriminated union when a component has mutually exclusive prop combinations,\n  instead of a pile of optional props that can contradict each other.\n\n```tsx\n// ❌ Bad — nothing stops passing both `href` and `onClick` incoherently\ninterface ButtonProps {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}\n\n// ✅ Good — the two variants can't be mixed\ntype ButtonProps =\n  | { variant: 'link'; label: string; href: string }\n  | { variant: 'action'; label: string; onClick: () => void };\n```\n\n## 7. Tooling setup\n\n**The compiler is opt-in — no default setup enables it automatically.** Plain\n`@vitejs/plugin-react` (`react()`), plain Next.js, plain Babel/webpack config, etc. do\n**not** run the compiler on their own. Verify it's actually wired up before assuming any\nof the memoization guidance above applies to your build.\n\n```bash\n# Compiler (build-time transform)\nnpm install --save-dev --save-exact babel-plugin-react-compiler@latest\n```\n\n**Lint rules — oxlint.** Oxlint ships a **native, Rust-based** `react/react-compiler`\nrule that runs the same compiler analysis in lint-only mode — same diagnostics as the\nBabel-based ESLint version, no Babel needed for linting. It's experimental and **off by\ndefault**, so it has to be enabled explicitly:\n\n```json\n// .oxlintrc.json\n{\n  \"plugins\": [\"react\"],\n  \"rules\": {\n    \"react/react-compiler\": \"error\"\n  }\n}\n```\n\nThis single rule reports two distinct things — both worth fixing, but for different\nreasons:\n\n- **Rules-of-React violations** (conditional hooks, reading a ref during render, mutating\n  props) — these are real bugs, independent of the compiler.\n- **Compiler bail-outs** — places the compiler declined to optimize (e.g. unsupported\n  syntax) without a rule violation. Not incorrect code, just a missed optimization —\n  lower priority than a violation, but worth knowing about on a hot path.\n\nIf you'd rather use an existing ESLint plugin's rules through oxlint instead of the\nnative one (e.g. to match a team convention), oxlint's `jsPlugins` can load\n`eslint-plugin-react-hooks` directly — slower than the native rule since it still runs\nthrough Babel, but useful if you need a rule the native port doesn't cover yet:\n\n```json\n{\n  \"jsPlugins\": [{ \"name\": \"react-hooks-js\", \"specifier\": \"eslint-plugin-react-hooks\" }],\n  \"rules\": { \"react-hooks-js/set-state-in-render\": \"error\" }\n}\n```\n\n**Lint rules — ESLint** (if not on oxlint): the same rules ship inside\n`eslint-plugin-react-hooks`.\n\n```bash\nnpm install --save-dev eslint-plugin-react-hooks@latest\n```\n\n```js\n// eslint.config.js\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport { defineConfig } from 'eslint/config';\n\nexport default defineConfig([reactHooks.configs.flat.recommended]);\n```\n\n**Wiring it into Vite 8.** `@vitejs/plugin-react` v6+ (the version that ships with Vite 8) switched its default transform from Babel to oxc for speed, so the compiler is\n**never** on by default and the old `react({ babel: {...} })` option **does not work**\non this setup — it's silently ignored, not an error, which is an easy way to think the\ncompiler is running when it isn't. Wire it in explicitly, as a separate Babel pass that\nruns before `react()`:\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport react, { reactCompilerPreset } from '@vitejs/plugin-react';\nimport babel from '@rolldown/plugin-babel';\n\nexport default defineConfig({\n  plugins: [\n    babel({ presets: [reactCompilerPreset()] }), // must run before react()\n    react(),\n  ],\n});\n```\n\n```bash\nnpm install --save-dev @rolldown/plugin-babel @babel/core babel-plugin-react-compiler\nnpm install --save-dev @types/babel__core   # if using TypeScript\n```\n\n`reactCompilerPreset()` is a helper exported from `@vitejs/plugin-react` itself — it\nbundles `babel-plugin-react-compiler` with sane default include/exclude filters so you\ndon't have to hand-roll a Babel preset. It optionally accepts:\n\n- `compilationMode: 'annotation'` — only compile components explicitly marked with a\n  `\"use memo\"` directive, instead of the whole codebase (useful for a gradual rollout).\n- `target: '17' | '18'` — if any part of the app still runs on an older React major and\n  needs the `react-compiler-runtime` package instead of `react/compiler-runtime`.\n\nAfter adding this, confirm it's actually active via the React DevTools \"Memo ✨\" badge\n(§8) before trusting the \"don't hand-roll memoization\" guidance in §1 — a silently\nmisconfigured Babel order (`react()` before `babel()`) is a common way for this to look\nwired up but do nothing.\n\n- Treat compiler-related lint errors (Rules-of-React violations, mismatched manual\n  memoization) as must-fix, not optional — an unfixed violation means that component\n  silently gets **zero** compiler optimization.\n- For a large existing codebase, adopt incrementally by scoping the babel plugin to a\n  directory (e.g. a UI component library) before enabling it globally.\n- If a specific function is genuinely incompatible with the compiler (e.g. it calls\n  `useForm` from `react-hook-form`), opt it out with the `\"use no memo\"` directive as\n  the **first line of the function body** — it's a temporary escape hatch, not a\n  permanent fix, so leave a comment explaining why.\n\n```tsx\nfunction LegacyForm() {\n  'use no memo';\n  const form = useForm(); // incompatible with the compiler today\n  // ...\n}\n```\n\n## 8. Checking whether the compiler is actually optimizing\n\n- **React DevTools** — an optimized component shows a \"Memo ✨\" badge next to its name\n  in the component tree.\n- **ESLint** — the compiler's recommended rules flag Rules-of-React violations at lint\n  time, before they ever become a silent runtime bail-out.\n- A bail-out is not a crash — it just means that specific component/hook is running\n  unoptimized. Treat a missing \"Memo ✨\" badge on a component you expect to be optimized\n  as a signal to check for a Rules-of-React violation, not a compiler bug.\n\n---\n\n## Review checklist\n\n- [ ] Compiler confirmed active (\"Memo ✨\" badge) before removing any _existing_ manual\n      memoization — don't strip it on faith\n- [ ] No new `useMemo`/`useCallback`/`React.memo` added without a documented reason\n      (confirmed bail-out, or a boundary the compiler can't see through)\n- [ ] No prop/state/context mutation anywhere in render\n- [ ] All hooks called unconditionally at the top level, same order every render\n- [ ] Side effects live in `useEffect`/event handlers, never during render\n- [ ] Components are `PascalCase`; hooks are `camelCase` and prefixed `use`\n- [ ] `ref` accepted as a normal prop instead of `forwardRef`, unless targeting a version\n      that requires it\n- [ ] Action/optimistic-update state modeled as a discriminated union, not optional\n      fields\n- [ ] Mutually exclusive prop combinations modeled as a discriminated union `Props` type\n- [ ] `eslint-plugin-react-hooks` recommended config enabled and passing\n- [ ] Any `\"use no memo\"` usage has a comment explaining why\n\n## Quick reference\n\n| Situation                                                      | Do                                                            |\n| -------------------------------------------------------------- | ------------------------------------------------------------- |\n| Tempted to write `useMemo`/`useCallback`                       | Don't — write the plain expression, let the compiler decide   |\n| Need a ref on a function component                             | Accept `ref` as a prop, skip `forwardRef`                     |\n| Form/async state with distinct outcomes                        | Discriminated union via `useActionState`, not optional fields |\n| Callback needs latest props/state without re-running an effect | `useEffectEvent`                                              |\n| A hook/library is known-incompatible with the compiler         | `\"use no memo\"` at the top of that function, with a comment   |\n| Checking if optimization is happening                          | React DevTools \"Memo ✨\" badge + compiler ESLint rules        |\n";
+var SKILL_default$1 = "---\nname: typescript-strict-typing\ndescription: Enforce strict TypeScript typing discipline and naming conventions whenever writing, generating, reviewing, or refactoring TypeScript/TSX code. Use this any time code contains `any`, loose/implicit types, untyped catch blocks, unchecked type assertions, boolean-flag state instead of variants, or inconsistent naming — even if the user didn't explicitly ask for a \"strict\" pass. Governs `any` vs `unknown`, narrowing, discriminated unions, `interface` vs `type` usage, naming conventions, and tsconfig strictness baseline.\n---\n\n# TypeScript Strict Typing Enforcer\n\n## Why this matters\n\nTypeScript's type system is only as strong as its weakest escape hatch. A single `any`,\nan un-narrowed `unknown`, or a lazy `as` assertion silently turns off the compiler for\neverything downstream of it — the bug doesn't disappear, it just moves to runtime where\nit's more expensive to find. The goal of this skill is not \"add types for the sake of\nit,\" it's **make illegal states unrepresentable** and **make the compiler prove\ncorrectness wherever possible**, so bugs surface at build time instead of in production.\n\nApply these rules by default whenever writing or editing TypeScript, without waiting for\nthe user to ask for \"strict mode\" explicitly. If a rule would need to be broken (e.g. a\nthird-party type is genuinely untyped), say so explicitly and isolate the escape hatch\nrather than letting it leak.\n\n## Core principle\n\n> Narrow, don't cast. Model states, don't flag them. Let the compiler do the checking.\n\n---\n\n## 1. Never use `any`\n\n`any` is not \"unknown type,\" it's \"type checking off.\" It's contagious — once a value is\n`any`, everything it touches becomes unchecked too.\n\n- Never write `any` for parameters, return types, variables, or generics.\n- Use `unknown` for genuinely unknown external data (API responses, `JSON.parse`, catch\n  clauses, third-party callbacks) and narrow it before use.\n- Use generics (`<T>`) when a function needs to work across types but preserve the\n  relationship between input and output.\n- If a library ships untyped, write a minimal local type/interface for the surface area\n  you actually use instead of reaching for `any`.\n\n```ts\n// ❌ Bad\nfunction parseConfig(json: any) {\n  return json.settings.theme; // no safety, no autocomplete, silent runtime crash\n}\n\n// ✅ Good\nfunction parseConfig(json: unknown): string {\n  if (\n    typeof json === 'object' &&\n    json !== null &&\n    'settings' in json &&\n    typeof (json as { settings: unknown }).settings === 'object'\n  ) {\n    // still narrow further or validate with a schema library (zod, valibot, etc.)\n  }\n  throw new Error('Invalid config shape');\n}\n```\n\nThe only acceptable `any` is a well-justified, isolated, and commented one (e.g.\ninterfacing with a genuinely untyped legacy module) — never a default.\n\n## 2. `unknown` + narrowing, not casting\n\nPrefer proving a type through control flow over asserting it with `as`.\n\n**Narrowing techniques, in order of preference:**\n\n1. **`typeof`** — primitives (`string`, `number`, `boolean`, `undefined`, `function`)\n2. **`instanceof`** — class instances, `Error`, `Date`, custom classes\n3. **`in`** — checking a property exists before accessing it on a union/unknown\n4. **User-defined type guards** — `function isUser(x: unknown): x is User`\n5. **Discriminated union tag checks** — `switch (value.kind) { ... }` (see §3)\n6. **Exhaustiveness checks** — a `never`-typed default branch so adding a new variant is\n   a compile error until every switch/if-chain handles it\n\n```ts\n// ✅ Type guard\nfunction isUser(value: unknown): value is User {\n  return typeof value === 'object' && value !== null && 'id' in value && 'email' in value;\n}\n\n// ✅ Exhaustiveness check\nfunction assertNever(x: never): never {\n  throw new Error(`Unhandled case: ${JSON.stringify(x)}`);\n}\n\nfunction area(shape: Shape): number {\n  switch (shape.kind) {\n    case 'circle':\n      return Math.PI * shape.radius ** 2;\n    case 'square':\n      return shape.side ** 2;\n    default:\n      return assertNever(shape); // compile error if a variant is missed\n  }\n}\n```\n\nType assertions (`as X`) and the non-null assertion (`!`) bypass this entirely — treat\nthem as a last resort (see §7), not a shortcut.\n\n## 3. Discriminated unions for variant state\n\nWhenever a value can be one of several distinct \"shapes\" (loading/success/error states,\nevent types, API response variants), model it as a **discriminated union** with a\nliteral tag field — never as a loose object with optional fields or boolean flags.\n\n```ts\n// ❌ Bad — booleans can contradict each other; unclear which fields are valid together\ninterface FetchState {\n  isLoading: boolean;\n  isError: boolean;\n  data?: User;\n  error?: string;\n}\n\n// ✅ Good — only one shape is possible at a time, and the compiler enforces it\ntype FetchState =\n  | { status: 'idle' }\n  | { status: 'loading' }\n  | { status: 'success'; data: User }\n  | { status: 'error'; error: string };\n\nfunction render(state: FetchState) {\n  switch (state.status) {\n    case 'success':\n      return state.data.name; // `data` is guaranteed to exist here\n    case 'error':\n      return state.error; // `error` is guaranteed to exist here\n    default:\n      return null;\n  }\n}\n```\n\nUse a consistent tag field name across a codebase (`kind`, `type`, or `status` — pick\none and stick with it) so narrowing patterns stay predictable.\n\n## 4. `interface` vs `type` — pick by intent, not habit\n\nBoth can describe object shapes, but they signal different intent. Default rule:\n\n| Use `interface` for...                                                     | Use `type` for...                                                          |\n| -------------------------------------------------------------------------- | -------------------------------------------------------------------------- |\n| Object / entity shapes (a `User`, a `Product`, a component's `Props`)      | Unions (`\"a\" \\| \"b\"`) and discriminated unions                             |\n| Public API contracts meant to be `implements`-ed by classes                | Intersections (`A & B`)                                                    |\n| Shapes that consumers may want to **extend/augment** (declaration merging) | Tuples (`[string, number]`)                                                |\n|                                                                            | Function types / callback signatures                                       |\n|                                                                            | Mapped, conditional, or utility-derived types (`Partial<T>`, `Pick<T, K>`) |\n|                                                                            | Aliasing a primitive or another type for readability                       |\n\n```ts\n// ✅ interface — an entity with identity, extendable\ninterface User {\n  id: string;\n  email: string;\n  role: UserRole;\n}\n\ninterface AdminUser extends User {\n  permissions: Permission[];\n}\n\n// ✅ type — union, alias, derived shape\ntype UserRole = 'admin' | 'editor' | 'viewer';\ntype UserId = User['id'];\ntype PartialUser = Partial<User>;\ntype Callback<T> = (value: T) => void;\n```\n\nDon't mix conventions arbitrarily within one file — if a shape is a plain data object\nthat will never need a union/intersection, `interface` is the default; the moment it\nneeds to express \"one of several shapes,\" reach for `type`.\n\n## 5. Naming conventions\n\n| Kind                                                       | Convention                                  | Example                             |\n| ---------------------------------------------------------- | ------------------------------------------- | ----------------------------------- |\n| Types, interfaces, classes, enums                          | `PascalCase`                                | `UserProfile`, `OrderStatus`        |\n| Interfaces                                                 | `PascalCase`, **no `I` prefix**             | `User`, not `IUser`                 |\n| Type aliases                                               | `PascalCase`                                | `type ApiResponse<T> = ...`         |\n| Variables, functions, methods, properties                  | `camelCase`                                 | `getUserById`, `isValid`            |\n| Booleans                                                   | `camelCase` with `is/has/should/can` prefix | `isLoading`, `hasPermission`        |\n| True constants (module-level, never reassigned, primitive) | `UPPER_SNAKE_CASE`                          | `MAX_RETRIES`, `DEFAULT_TIMEOUT_MS` |\n| Enum members                                               | `PascalCase`                                | `enum Status { Active, Archived }`  |\n| Generic type parameters (simple, single-purpose)           | Single uppercase letter                     | `T`, `K`, `V`, `E` for errors       |\n| Generic type parameters (multiple / non-obvious)           | Descriptive, prefixed with `T`              | `TInput`, `TOutput`, `TContext`     |\n| Discriminated union tag field                              | Consistent across the codebase              | `kind`, `type`, or `status`         |\n| Files with a single exported entity                        | Match the entity name                       | `UserProfile.ts`, `useAuth.ts`      |\n\nNaming should describe **intent**, not implementation — `fetchUser` not\n`getUserFromApiEndpoint`; `retryCount` not `numRetries2`.\n\n## 6. Baseline `tsconfig.json` strictness\n\nTreat these as the non-negotiable floor for any project this skill touches:\n\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"noImplicitAny\": true,\n    \"strictNullChecks\": true,\n    \"strictFunctionTypes\": true,\n    \"strictPropertyInitialization\": true,\n    \"noUncheckedIndexedAccess\": true,\n    \"exactOptionalPropertyTypes\": true,\n    \"noImplicitOverride\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"forceConsistentCasingInFileNames\": true\n  }\n}\n```\n\n`strict: true` alone enables the core group (`noImplicitAny`, `strictNullChecks`, etc.),\nbut `noUncheckedIndexedAccess` and `exactOptionalPropertyTypes` are commonly missed and\nclose real gaps (array/object index access returning `T` instead of `T | undefined`;\noptional properties silently accepting `undefined` as an explicit value).\n\n## 7. Type assertions and non-null assertions are a last resort\n\n- `as X` and `x!` tell the compiler \"trust me\" — they produce zero runtime safety and\n  actively hide bugs if wrong.\n- Acceptable only when the compiler genuinely cannot know something you do (e.g. a DOM\n  query you've already null-checked, or narrowing a third-party type at a well-tested\n  boundary) — and even then, prefer a type guard or a runtime check over a bare\n  assertion.\n- Never use `as any` or `as unknown as X` to force an incompatible cast — that's `any`\n  wearing a disguise.\n- `x!` should almost always be replaceable by an actual null check or optional chaining\n  (`x?.y`) plus a real fallback.\n\n## 8. Readonly by default\n\nPrefer immutable shapes unless mutation is intentional and localized.\n\n```ts\ninterface Point {\n  readonly x: number;\n  readonly y: number;\n}\n\nfunction config(values: readonly string[]) {\n  /* ... */\n}\n\nconst ROLES = ['admin', 'editor', 'viewer'] as const;\ntype UserRole = (typeof ROLES)[number];\n```\n\n## 9. Explicit return types on exported/public functions\n\nInference is fine for local, private helpers, but exported functions, class methods, and\nanything forming a public API should declare an explicit return type. This prevents an\ninternal implementation change from silently widening/narrowing the public contract.\n\n```ts\n// ❌ Return type is inferred and can silently drift\nexport function getActiveUsers(users: User[]) {\n  return users.filter((u) => u.active);\n}\n\n// ✅ Explicit, intentional contract\nexport function getActiveUsers(users: User[]): User[] {\n  return users.filter((u) => u.active);\n}\n```\n\n## 10. Prefer literal unions over numeric enums\n\nString literal unions are simpler, tree-shake better, and produce clearer error\nmessages than TypeScript `enum`. Reserve `enum` (or `as const` object maps) for cases\nthat need reverse lookup or genuinely benefit from a namespaced runtime value.\n\n```ts\n// ✅ Preferred\ntype OrderStatus = 'pending' | 'shipped' | 'delivered' | 'cancelled';\n\n// Acceptable when a namespaced runtime object is actually needed\nconst OrderStatus = {\n  Pending: 'pending',\n  Shipped: 'shipped',\n} as const;\ntype OrderStatus = (typeof OrderStatus)[keyof typeof OrderStatus];\n```\n\n---\n\n## Review checklist\n\nBefore considering TypeScript code \"done,\" verify:\n\n- [ ] No `any` anywhere (including implicit `any` from missing annotations)\n- [ ] External/uncertain data enters as `unknown` and is narrowed before use\n- [ ] Variant state is a discriminated union, not optional fields + booleans\n- [ ] `interface` used for object/entity shapes; `type` used for unions/aliases/intersections\n- [ ] No stray `I` prefixes on interfaces\n- [ ] Naming follows the casing table in §5 consistently\n- [ ] `as` / `!` are rare, justified, and can't be replaced by a guard or null check\n- [ ] Exported functions/methods have explicit return types\n- [ ] Switch statements over unions have an exhaustiveness (`never`) check\n- [ ] `tsconfig.json` includes the strictness baseline in §6\n\n## Quick reference\n\n| Situation                                      | Use                                                           |\n| ---------------------------------------------- | ------------------------------------------------------------- |\n| External/uncertain data                        | `unknown` + narrowing                                         |\n| \"This value is definitely one of these shapes\" | Discriminated union (`type`)                                  |\n| Object with identity, may be extended          | `interface`                                                   |\n| Union, intersection, tuple, mapped type        | `type`                                                        |\n| Need to prove a type through logic             | Type guard / narrowing                                        |\n| Tempted to write `any`                         | Stop — use `unknown`, a generic, or a local interface instead |\n";
+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`, `@wangs-ui/foundation`).\n\n---\n\n## 1. The MCP Discovery Protocol (Mandatory Single Source of Truth)\n\nDo **NOT** guess component props, Pass-Through (`pt`) slots, or event names. Always query the MCP server dynamically to retrieve the current API signatures and live story implementations:\n\n```mermaid\ngraph TD\n    A[Identify Component Needed] --> B[Call get-documentation id]\n    B --> C{Need live story / variant code?}\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\n### Discovery Steps:\n\n1. **Inspect Component Contract & Props**:\n   ```json\n   get-documentation({ \"id\": \"button\" })\n   get-documentation({ \"id\": \"input\" })\n   get-documentation({ \"id\": \"datatable\" })\n   ```\n2. **Inspect Live Usage & Story Variants**:\n   ```json\n   get-documentation-for-story({ \"id\": \"button\", \"storyName\": \"Default\" })\n   get-documentation-for-story({ \"id\": \"datatable\", \"storyName\": \"ServerPagination\" })\n   ```\n3. **Inspect Relationships & Real Usages in Graph**:\n   ```json\n   query_graph({ \"query\": \"DataTable\" })\n   query_graph({ \"query\": \"usePT\" })\n   ```\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 (@wangs-ui/react-core/primitive/*)\nimport Button from '@wangs-ui/react-core/primitive/button';\nimport Input from '@wangs-ui/react-core/primitive/input';\nimport NumberInput from '@wangs-ui/react-core/primitive/numberinput';\nimport Select from '@wangs-ui/react-core/primitive/select';\nimport Badge from '@wangs-ui/react-core/primitive/badge';\nimport Card from '@wangs-ui/react-core/primitive/card';\nimport DataTable from '@wangs-ui/react-core/primitive/datatable';\n\n// Blocks (@wangs-ui/react-core/blocks/*)\nimport AppLayout from '@wangs-ui/react-core/blocks/applayout';\nimport Sidebar from '@wangs-ui/react-core/blocks/sidebar';\n\n// Providers & System Hooks\nimport { WangsUiProvider } from '@wangs-ui/react-core/api';\nimport { useI18n } from '@wangs-ui/react-i18n';\nimport { useTheme } from '@wangs-ui/foundation/theme';\n\n// Icons (@wangs-ui/react-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 elements when a Wangs UI primitive exists:\n\n| Forbidden Raw HTML        | Mandatory Wangs UI Component | Subpath Import                               | MCP Documentation ID |\n| :------------------------ | :--------------------------- | :------------------------------------------- | :------------------- |\n| `<button>`                | `Button`                     | `@wangs-ui/react-core/primitive/button`      | `button`             |\n| `<input type=\"text\">`     | `Input`                      | `@wangs-ui/react-core/primitive/input`       | `input`              |\n| `<input type=\"number\">`   | `NumberInput`                | `@wangs-ui/react-core/primitive/numberinput` | `numberinput`        |\n| `<input type=\"checkbox\">` | `Checkbox`                   | `@wangs-ui/react-core/primitive/checkbox`    | `checkbox`           |\n| `<select>`                | `Select`                     | `@wangs-ui/react-core/primitive/select`      | `select`             |\n| `<dialog>` / modal        | `Dialog` / `Modal`           | `@wangs-ui/react-core/primitive/dialog`      | `dialog`, `modal`    |\n| `<table>`                 | `DataTable`                  | `@wangs-ui/react-core/primitive/datatable`   | `datatable`          |\n| Container box             | `Card`                       | `@wangs-ui/react-core/primitive/card`        | `card`               |\n| Pill badge / status       | `Badge`                      | `@wangs-ui/react-core/primitive/badge`       | `badge`              |\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";
 var __dirname$1 = 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,
+	"create-form": SKILL_default$7,
+	"data-table": SKILL_default$6,
+	"dialog-modal": SKILL_default$5,
+	"i18n-usage": SKILL_default$4,
+	"layout-navigation": SKILL_default$3,
+	"react19-compiler-typescript": SKILL_default$2,
+	"typescript-strict-typing": SKILL_default$1,
 	"wangs-ui-components": SKILL_default
 };
 function parseSkillContent(id, content) {
@@ -1417,12 +1421,18 @@ function generateProject(options) {
 }
 //#endregion
 //#region src/prompts.ts
+var VALID_PRESETS = [
+	"blue",
+	"emerald",
+	"crimson",
+	"carbon"
+];
 async function promptUser(initialOptions) {
 	let { projectName, preset, agents, skills, git } = initialOptions;
 	const allSkills = loadAllSkills();
 	if (initialOptions.yes) return {
 		projectName: projectName || "my-wangs-app",
-		preset: "fixedasset",
+		preset: preset || "blue",
 		agents: agents || [
 			"antigravity",
 			"opencode",
@@ -1432,7 +1442,7 @@ async function promptUser(initialOptions) {
 		skills: skills || allSkills.map((s) => s.id),
 		git: git !== void 0 ? git : true
 	};
-	intro(`\x1b[36m🚀 Wangs UI React App Scaffolder\x1b[0m (v1.0.40)`);
+	intro(`\x1b[36m🚀 Wangs UI React App Scaffolder\x1b[0m (v1.0.42)`);
 	if (!projectName) {
 		const nameResponse = await text({
 			message: "What is your project name?",
@@ -1453,12 +1463,29 @@ async function promptUser(initialOptions) {
 	if (!preset) {
 		const presetResponse = await select({
 			message: "Select a Wangs UI Design Preset:",
-			options: [{
-				value: "fixedasset",
-				label: "Fixed Asset",
-				hint: "Recommended & Official Theme Preset"
-			}],
-			initialValue: "fixedasset"
+			options: [
+				{
+					value: "blue",
+					label: "Blue",
+					hint: "Default & Recommended Theme Preset (Ocean Blue)"
+				},
+				{
+					value: "emerald",
+					label: "Emerald",
+					hint: "Fresh & Modern Theme Preset (Green / Teal)"
+				},
+				{
+					value: "crimson",
+					label: "Crimson",
+					hint: "Bold & Elegant Theme Preset (Deep Red)"
+				},
+				{
+					value: "carbon",
+					label: "Carbon",
+					hint: "Neutral & High-Contrast Theme Preset (Monochrome / Slate)"
+				}
+			],
+			initialValue: "blue"
 		});
 		if (isCancel(presetResponse)) {
 			cancel("Project scaffolding cancelled.");
@@ -1535,7 +1562,7 @@ async function promptUser(initialOptions) {
 	}
 	return {
 		projectName,
-		preset: "fixedasset",
+		preset,
 		agents,
 		skills: skills || allSkills.map((s) => s.id),
 		git: Boolean(git)
@@ -1551,10 +1578,10 @@ async function main() {
 		if (arg === "-y" || arg === "--yes") options.yes = true;
 		else if (arg.startsWith("--preset=")) {
 			const val = arg.split("=")[1];
-			if (val === "fixedasset") options.preset = val;
+			if (VALID_PRESETS.includes(val)) options.preset = val;
 		} else if (arg === "--preset" && args[i + 1]) {
 			const val = args[++i];
-			if (val === "fixedasset") options.preset = val;
+			if (VALID_PRESETS.includes(val)) options.preset = val;
 		} else if (arg.startsWith("--agent=") || arg.startsWith("--agents=")) {
 			const val = arg.split("=")[1];
 			if (val === "all") options.agents = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangs-ui/create-react-app",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Scaffold a modern React app with Wangs UI, Vite 8, Oxlint, Oxfmt, and AI Agent MCP integration",
   "keywords": [
     "antigravity",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.7.0",
-    "@wangs-ui/skills": "1.0.40"
+    "@wangs-ui/skills": "1.0.42"
   },
   "devDependencies": {},
   "scripts": {

package/template/agents/AGENTS.md

@@ -1,18 +1,19 @@
 # AI Agent Instructions for Wangs UI
 
-This application is built with **Wangs UI** (`@wangs-ui/react-core`, `@wangs-ui/react-icons`, `@wangs-ui/react-presets`, `@wangs-ui/react-i18n`, `@wangs-ui/form`), Tailwind CSS v4, and Vite 8.
+This application is built with **Wangs UI** (`@wangs-ui/react-core`, `@wangs-ui/foundation`, `@wangs-ui/react-icons`, `@wangs-ui/react-presets`, `@wangs-ui/react-i18n`, `@wangs-ui/form`), Tailwind CSS v4, and Vite 8.
 
 ---
 
 ## 1. Core Principles & Strict Rules
 
 1. **Primitive Component Rule (Mandatory)**:
-   - Always use components from `@wangs-ui/react-core` (`Button`, `Card`, `Dialog`, `Modal`, `Form`, `Field`, `InputText`, `Select`, `DataTable`, etc.).
-   - Do NOT write unstyled raw HTML controls (`<button>`, `<input>`, `<select>`, `<form>`).
+   - Always use components from `@wangs-ui/react-core` (`Button`, `Card`, `Dialog`, `Modal`, `Form`, `Field`, `Input`, `NumberInput`, `Select`, `DataTable`, etc.) and universal typography primitives from `@wangs-ui/foundation/theme` (`Text`, `Code`, `Kbd`, `Link`, `Mark`, `Blockquote`, `List`).
+   - Do NOT write unstyled raw HTML controls (`<button>`, `<input>`, `<select>`, `<form>`, `<h1-h6>`, `<p>`).
 
 2. **Internationalization (`@wangs-ui/react-i18n`)**:
    - All text visible to users MUST be wrapped in `t()` from `useI18n()`.
-   - Never hardcode raw string literals inside JSX components.
+   - Use natural English sentence keys (`t('Invoice Summary')`) and `{{variable}}` interpolation.
+   - Never hardcode raw string literals or concatenate strings in JSX.
    - For formatting dates, times, currencies, or numbers, use `useLocaleFormatter()`:
      ```tsx
      import { useI18n, useLocaleFormatter } from '@wangs-ui/react-i18n';
@@ -22,23 +23,27 @@ This application is built with **Wangs UI** (`@wangs-ui/react-core`, `@wangs-ui/
      ```
 
 3. **Typography & Styling Tokens**:
-   - Typeface: **Manrope** (geometric sans-serif).
-   - Use semantic heading classes (`.heading-1` to `.heading-6`, `.p`) for typography hierarchy.
-   - Use predefined color and spacing tokens (`bg-primary-500`, `text-secondary-900`, `gap-md`, `p-l`, `rounded-m`).
+   - Use universal typography components from `@wangs-ui/foundation/theme` (`Text`, `Code`, `Kbd`, `Link`, `Mark`, `Blockquote`, `List`) with semantic variants (`display*`, `headline*`, `title*`, `body*`, `label*`) and color roles.
+   - Use predefined 4px spacing tokens (`gap-xs`, `gap-s`, `gap-md`, `gap-m`, `gap-l`, `gap-xl`, `gap-xxl` / `p-xs` to `p-xxl`) and color tokens (`bg-primary-500`, `text-secondary-900`, `shadow-level-1` to `shadow-level-5`).
 
-4. **MCP Component Inspection**:
+4. **MCP Component Inspection (Single Source of Truth)**:
    - The `@wangs-ui/mcp` server is configured in this workspace.
-   - Query the MCP server (`get-documentation`, `list-all-documentation`) to inspect component schemas, props, and design specifications before writing components.
+   - Always query the MCP server (`get-documentation`, `get-documentation-for-story`, `query_graph`) to inspect live component contracts, props, and story implementations before writing code.
 
 ---
 
 ## 2. Specialized Skills Reference
 
-When performing specific tasks, consult the detailed skill files in `.agents/skills/`:
+When performing specific tasks, consult the modular skill files in `.agents/skills/`:
 
-- **`i18n-standardization`** (`.agents/skills/i18n-standardization/SKILL.md`): Rules for JIT translation, named variables `{count}`, ICU plurals, and locale formatters.
-- **`wangs-ui-components`** (`.agents/skills/wangs-ui-components/SKILL.md`): Component composition, iconography from `@wangs-ui/react-icons`, and token usage.
-- **`form-management`** (`.agents/skills/form-management/SKILL.md`): Form implementation, schema typing, and validation with `@wangs-ui/form`.
+- **`wangs-ui-components`**: Core component fundamentals, primitive substitution rule, subpath modular imports, and typography tokens.
+- **`data-table`**: Real-world data grids, `TableColumn<T>[]`, `useDataTable`, `useDataTableFetch`, pagination, sorting, and exports.
+- **`create-form`**: Form implementation, schema validation, server error mapping (`formControl.setError`), and multipart uploads.
+- **`dialog-modal`**: Overlay selection (`Dialog` vs `Modal` vs `DialogForm`), confirmation workflows, and mutation safety.
+- **`i18n-usage`**: Rules for JIT translation, natural English keys, dynamic variables `{{var}}`, ICU plurals, and locale formatters.
+- **`layout-navigation`**: Application layout structure with `AppLayout`, `Sidebar`, `Breadcrumb`, and `Tabs`.
+- **`react19-compiler-typescript`**: React 19 compiler conventions, automatic memoization, and pure rendering rules.
+- **`typescript-strict-typing`**: Strict type discipline (no `any`, `unknown` narrowing, discriminated unions).
 
 ---
 

package/template/package.json

@@ -13,22 +13,28 @@
     "format:check": "oxfmt --check"
   },
   "dependencies": {
-    "@wangs-ui/react-core": "^1.0.40",
-    "@wangs-ui/react-i18n": "^1.0.40",
-    "@wangs-ui/react-icons": "^1.0.40",
-    "@wangs-ui/react-presets": "^1.0.40",
+    "@wangs-ui/foundation": "^1.0.42",
+    "@wangs-ui/react-animations": "^1.0.42",
+    "@wangs-ui/react-core": "^1.0.42",
+    "@wangs-ui/react-i18n": "^1.0.42",
+    "@wangs-ui/react-icons": "^1.0.42",
+    "@wangs-ui/react-presets": "^1.0.42",
     "clsx": "^2.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
     "@fewangsit/oxlint-config-react": "^1.0.13",
+    "@rolldown/plugin-babel": "^0.2.3",
     "@tailwindcss/vite": "^4.3.0",
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.4",
+    "babel-plugin-react-compiler": "^1.0.0",
     "oxfmt": "^0.60.0",
     "oxlint": "^1.75.0",
     "tailwindcss": "^4.3.0",

package/template/src/App.tsx

@@ -1,3 +1,4 @@
+import { Text } from '@wangs-ui/foundation/theme';
 import Button from '@wangs-ui/react-core/primitive/button';
 import Card from '@wangs-ui/react-core/primitive/card';
 import { useI18n, useLocaleFormatter } from '@wangs-ui/react-i18n';
@@ -11,17 +12,23 @@ export default function App(): React.ReactElement {
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center p-6">
-      <Card className="flex w-full max-w-md flex-col gap-6 p-6 shadow-lg">
+      <Card className="shadow-level-3 flex w-full max-w-md flex-col gap-6 p-6">
         <div className="flex flex-col gap-1">
-          <h1 className="heading-1 text-secondary-900 font-semibold">{t('Welcome to Wangs UI')}</h1>
-          <p className="text-secondary-500 text-xs">
+          <Text as="h1" variant="headlineSmall" weight="semibold">
+            {t('Welcome to Wangs UI')}
+          </Text>
+          <Text variant="bodySmall" color="secondary">
             {t('Today is {0}', formatDate(new Date(), 'dd MMMM yyyy'))}
-          </p>
+          </Text>
         </div>
 
-        <div className="rounded-m border-secondary-200 bg-secondary-50 flex items-center justify-between border p-4">
-          <span className="text-secondary-700 text-sm font-medium">{t('Current count:')}</span>
-          <span className="text-primary-500 font-mono text-lg font-bold">{count}</span>
+        <div className="border-secondary-200 bg-secondary-50 flex items-center justify-between rounded-md border p-4">
+          <Text variant="bodyMedium" weight="medium" color="secondary">
+            {t('Current count:')}
+          </Text>
+          <Text variant="titleLarge" weight="bold" color="primary" className="font-mono">
+            {count}
+          </Text>
         </div>
 
         <div className="flex gap-3">
@@ -42,15 +49,16 @@ export default function App(): React.ReactElement {
           />
         </div>
 
-        <div className="border-secondary-200 text-secondary-400 flex items-center justify-between border-t pt-4 text-xs">
-          <span>{t('Language: {0}', locale.toUpperCase())}</span>
-          <button
-            type="button"
-            className="hover:text-primary-500 font-medium underline"
+        <div className="border-secondary-200 flex items-center justify-between border-t pt-4">
+          <Text variant="labelSmall" color="secondary">
+            {t('Language: {0}', locale.toUpperCase())}
+          </Text>
+          <Button
+            variant="text"
+            size="xs"
+            label={t('Switch to {0}', locale === 'en' ? 'Bahasa Indonesia' : 'English')}
             onClick={() => setLocale(locale === 'en' ? 'id' : 'en')}
-          >
-            {t('Switch to {0}', locale === 'en' ? 'Bahasa Indonesia' : 'English')}
-          </button>
+          />
         </div>
       </Card>
     </div>

package/template/src/index.css

@@ -1,5 +1,5 @@
-@import '@wangs-ui/react-presets/fixedasset/style.css';
-@import '@wangs-ui/react-presets/theme.css';
+@import '@wangs-ui/foundation/theme/theme.css';
+@import '@wangs-ui/react-presets/blue/style.css';
 @import '@wangs-ui/react-icons/style.css';
 
-@source "../node_modules/@wangs-ui/react-presets";
+@source "../node_modules/@wangs-ui/react-presets/blue";

package/template/src/main.tsx

@@ -1,6 +1,6 @@
 import { WangsUiProvider } from '@wangs-ui/react-core/api';
 import { WangsUiI18nProvider } from '@wangs-ui/react-i18n';
-import presetFixedAsset from '@wangs-ui/react-presets/fixedasset';
+import blue from '@wangs-ui/react-presets/blue';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -11,7 +11,7 @@ import './index.css';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <WangsUiI18nProvider defaultLocale="en">
-      <WangsUiProvider configOptions={{ preset: presetFixedAsset }}>
+      <WangsUiProvider configOptions={{ preset: blue, palette: 'blue' }}>
         <App />
       </WangsUiProvider>
     </WangsUiI18nProvider>

package/template/vite.config.ts

@@ -1,8 +1,9 @@
+import babel from '@rolldown/plugin-babel';
 import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [babel({ presets: [reactCompilerPreset()] }), react(), tailwindcss()],
 });