@pega/sdk 0.0.3 → 0.0.4

package/templates/react-native-sdk-reference/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@pega/sdk-react": "^0.1.0",
-    "expo": "~52.0.0",
-    "react": "^18.3.1",
-    "react-native": "0.76.0"
+    "expo": "~57.0.4",
+    "react": "^19.2.7",
+    "react-native": "0.86.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "^18.3.18",
-    "typescript": "~5.8.2"
+    "@babel/core": "^8.0.1",
+    "@types/react": "^19.2.17",
+    "typescript": "~6.0.3"
   }
 }

package/templates/react-native-sdk-reference/tsconfig.json

@@ -6,7 +6,8 @@
     "strict": true,
     "jsx": "react-jsx",
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "ignoreDeprecations": "6.0"
   },
   "extends": "expo/tsconfig.base"
 }

package/templates/react-sdk-reference/.claude/instructions/component-map.md

@@ -11,7 +11,7 @@ import { sdkComponents } from '@pega/sdk-react';
 
 function getSampleComponentMap() {
   return {
-    ...sdkComponents,   // NEVER remove this — provides infrastructure
+    ...sdkComponents, // NEVER remove this — provides infrastructure
     // Your components below:
     TextInput,
     Dropdown,

package/templates/react-sdk-reference/.claude/instructions/field-component.md

@@ -7,11 +7,13 @@ When creating or modifying field components, follow these rules:
 ## Required Structure
 
 1. **Import types from `@pega/sdk-react`**:
+
    ```typescript
    import type { PConnFieldProps } from '@pega/sdk-react';
    ```
 
 2. **Define a props interface extending `PConnFieldProps`**:
+
    ```typescript
    interface MyFieldProps extends PConnFieldProps {
      // additional props specific to this field
@@ -28,6 +30,7 @@ When creating or modifying field components, follow these rules:
 1. **Extract standard props**: `getPConnect`, `label`, `required`, `disabled`, `value`, `validatemessage`, `status`, `readOnly`, `testId`, `helperText`, `displayMode`, `hideLabel`, `placeholder`
 
 2. **Get PConnect APIs**:
+
    ```typescript
    const pConn = getPConnect();
    const actions = pConn.getActionsApi();
@@ -35,6 +38,7 @@ When creating or modifying field components, follow these rules:
    ```
 
 3. **Handle displayMode** (MUST be before the main return):
+
    ```typescript
    if (displayMode === 'DISPLAY_ONLY') {
      return <FieldValueList name={hideLabel ? '' : label} value={value} />;

package/templates/react-sdk-reference/.claude/instructions/template-component.md

@@ -7,6 +7,7 @@ When creating or modifying template/layout components, follow these rules:
 ## Required Structure
 
 1. **Import types from `@pega/sdk-react`**:
+
    ```typescript
    import type { PConnProps } from '@pega/sdk-react';
    ```
@@ -26,7 +27,7 @@ Receive React `children` directly:
 import type { PropsWithChildren, ReactElement } from 'react';
 
 interface TwoColumnProps extends PConnProps {
-  templateCol?: string;  // e.g. "1fr 1fr", "2fr 1fr"
+  templateCol?: string; // e.g. "1fr 1fr", "2fr 1fr"
 }
 
 export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {

package/templates/react-sdk-reference/.claude/instructions/widget-component.md

@@ -7,6 +7,7 @@ When creating or modifying widget components, follow these rules:
 ## Required Structure
 
 1. **Import types from `@pega/sdk-react`**:
+
    ```typescript
    import type { PConnProps } from '@pega/sdk-react';
    // or PConnFieldProps if the widget behaves like a field (e.g., Attachment)

package/templates/react-sdk-reference/.claude/prompts/add-component.md

@@ -10,6 +10,7 @@ Read the user's message carefully. Extract:
 If any of the four are missing or ambiguous, ask the user all unresolved items in **one numbered list** and wait for their answers before continuing. Do not guess or proceed with assumptions.
 
 Example questions to ask (only ask the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. What is the exact component name?
 3. What type of component is this? (field / template / widget / designSystemExtension)
@@ -39,29 +40,31 @@ Before generating, check if a component already exists at the resolved output pa
 
 Always read the **general type skill** for the component type:
 
-| Component Type | General Skill File |
-|---|---|
-| `field` | `.claude/skills/field-components.md` |
-| `template` | `.claude/skills/template-components.md` |
-| `widget` | `.claude/skills/widget-components.md` |
+| Component Type          | General Skill File                          |
+| ----------------------- | ------------------------------------------- |
+| `field`                 | `.claude/skills/field-components.md`        |
+| `template`              | `.claude/skills/template-components.md`     |
+| `widget`                | `.claude/skills/widget-components.md`       |
 | `designSystemExtension` | `.claude/skills/design-system-extension.md` |
 
 Then look for a **component-specific skill** based on the component type:
 
-| Component Type | Specific Skill Location |
-|---|---|
-| `field` | `.claude/skills/field-skills/<ComponentName>.md` |
-| `template` | `.claude/skills/template-skills/<ComponentName>.md` |
-| `widget` | `.claude/skills/widget-skills/<ComponentName>.md` |
+| Component Type          | Specific Skill Location                                            |
+| ----------------------- | ------------------------------------------------------------------ |
+| `field`                 | `.claude/skills/field-skills/<ComponentName>.md`                   |
+| `template`              | `.claude/skills/template-skills/<ComponentName>.md`                |
+| `widget`                | `.claude/skills/widget-skills/<ComponentName>.md`                  |
 | `designSystemExtension` | `.claude/skills/design-system-extension-skills/<ComponentName>.md` |
 
 If the component-specific skill file exists, read it fully. Pay special attention to:
+
 - **Behavioral Contract** — state management, event handling, option loading, edge cases
 - **Design System Mapping** table — the recommended component for the chosen design system
 
 You must read **both** the general type skill and the component-specific skill (if it exists) before proceeding.
 
 Examples:
+
 - `AutoComplete` (field) → read `field-components.md` + `field-skills/AutoComplete.md`
 - `AdvancedSearch` (template) → read `template-components.md` + `template-skills/AdvancedSearch.md`
 - `AppAnnouncement` (widget) → read `widget-components.md` + `widget-skills/AppAnnouncement.md`
@@ -74,11 +77,13 @@ If no component-specific skill file exists, continue using the general pattern f
 ## Step 3 — Check and install dependencies
 
 Run:
+
 ```
 cat package.json | grep "<design-system-package>"
 ```
 
 If the design system package is **not** listed in `dependencies` or `devDependencies`, install it:
+
 ```
 npm install <design-system-package>
 ```
@@ -98,6 +103,7 @@ Before writing any code, inspect the installed package:
 4. Only use component names and prop names confirmed in those files. Do not rely on training knowledge of the API.
 
 Also check:
+
 - Whether the design system has a **form layout wrapper** (label + input + helper text) — use it instead of manual margins
 - Whether it has **size/density/variant conventions** — use built-in props rather than custom padding
 - Whether it has a **companion icons package** — read its exports before using any icon name; never guess icon names
@@ -117,6 +123,7 @@ Create `<ComponentName>.tsx` using the pattern for the component type:
 - **designSystemExtension**: Pure display props or extend `PConnProps`
 
 Create `index.tsx`:
+
 ```typescript
 export { default } from './<ComponentName>';
 ```
@@ -137,6 +144,7 @@ Do not restructure or reorder any existing entries.
 ## Step 7 — Verify the build
 
 Run:
+
 ```
 npm run build
 ```

package/templates/react-sdk-reference/.claude/prompts/component-manifest.json

@@ -10,102 +10,184 @@
     "workflow-form": {
       "folders": ["field"],
       "components": [
-        { "name": "Stages", "category": "infra", "path": "src/components/infra/Stages" }
+        {
+          "name": "Stages",
+          "category": "infra",
+          "path": "src/components/infra/Stages"
+        }
       ]
     }
   },
   "components": {
     "field": [
-      { "name": "AutoComplete",    "path": "src/components/field/AutoComplete" },
-      { "name": "CancelAlert",     "path": "src/components/field/CancelAlert" },
-      { "name": "Checkbox",        "path": "src/components/field/Checkbox" },
-      { "name": "Currency",        "path": "src/components/field/Currency" },
-      { "name": "Date",            "path": "src/components/field/Date" },
-      { "name": "DateTime",        "path": "src/components/field/DateTime" },
-      { "name": "Decimal",         "path": "src/components/field/Decimal" },
-      { "name": "Dropdown",        "path": "src/components/field/Dropdown" },
-      { "name": "Email",           "path": "src/components/field/Email" },
-      { "name": "Group",           "path": "src/components/field/Group" },
-      { "name": "Integer",         "path": "src/components/field/Integer" },
-      { "name": "Location",        "path": "src/components/field/Location" },
-      { "name": "Multiselect",     "path": "src/components/field/Multiselect" },
-      { "name": "ObjectReference", "path": "src/components/field/ObjectReference" },
-      { "name": "Percentage",      "path": "src/components/field/Percentage" },
-      { "name": "Phone",           "path": "src/components/field/Phone" },
-      { "name": "RadioButtons",    "path": "src/components/field/RadioButtons" },
-      { "name": "RichText",        "path": "src/components/field/RichText" },
-      { "name": "ScalarList",      "path": "src/components/field/ScalarList" },
-      { "name": "SelectableCard",  "path": "src/components/field/SelectableCard" },
-      { "name": "SemanticLink",    "path": "src/components/field/SemanticLink" },
-      { "name": "TextArea",        "path": "src/components/field/TextArea" },
-      { "name": "TextContent",     "path": "src/components/field/TextContent" },
-      { "name": "TextInput",       "path": "src/components/field/TextInput" },
-      { "name": "Time",            "path": "src/components/field/Time" },
-      { "name": "URL",             "path": "src/components/field/URL" },
-      { "name": "UserReference",   "path": "src/components/field/UserReference" }
+      { "name": "AutoComplete", "path": "src/components/field/AutoComplete" },
+      { "name": "CancelAlert", "path": "src/components/field/CancelAlert" },
+      { "name": "Checkbox", "path": "src/components/field/Checkbox" },
+      { "name": "Currency", "path": "src/components/field/Currency" },
+      { "name": "Date", "path": "src/components/field/Date" },
+      { "name": "DateTime", "path": "src/components/field/DateTime" },
+      { "name": "Decimal", "path": "src/components/field/Decimal" },
+      { "name": "Dropdown", "path": "src/components/field/Dropdown" },
+      { "name": "Email", "path": "src/components/field/Email" },
+      { "name": "Group", "path": "src/components/field/Group" },
+      { "name": "Integer", "path": "src/components/field/Integer" },
+      { "name": "Location", "path": "src/components/field/Location" },
+      { "name": "Multiselect", "path": "src/components/field/Multiselect" },
+      {
+        "name": "ObjectReference",
+        "path": "src/components/field/ObjectReference"
+      },
+      { "name": "Percentage", "path": "src/components/field/Percentage" },
+      { "name": "Phone", "path": "src/components/field/Phone" },
+      { "name": "RadioButtons", "path": "src/components/field/RadioButtons" },
+      { "name": "RichText", "path": "src/components/field/RichText" },
+      { "name": "ScalarList", "path": "src/components/field/ScalarList" },
+      {
+        "name": "SelectableCard",
+        "path": "src/components/field/SelectableCard"
+      },
+      { "name": "SemanticLink", "path": "src/components/field/SemanticLink" },
+      { "name": "TextArea", "path": "src/components/field/TextArea" },
+      { "name": "TextContent", "path": "src/components/field/TextContent" },
+      { "name": "TextInput", "path": "src/components/field/TextInput" },
+      { "name": "Time", "path": "src/components/field/Time" },
+      { "name": "URL", "path": "src/components/field/URL" },
+      { "name": "UserReference", "path": "src/components/field/UserReference" }
     ],
     "template": [
-      { "name": "AdvancedSearch",         "path": "src/components/template/AdvancedSearch" },
-      { "name": "AppShell",               "path": "src/components/template/AppShell" },
-      { "name": "BannerPage",             "path": "src/components/template/BannerPage" },
-      { "name": "CaseSummary",            "path": "src/components/template/CaseSummary" },
-      { "name": "CaseView",               "path": "src/components/template/CaseView" },
-      { "name": "CaseViewActionsMenu",    "path": "src/components/template/CaseViewActionsMenu" },
-      { "name": "Confirmation",           "path": "src/components/template/Confirmation" },
-      { "name": "DataReference",          "path": "src/components/template/DataReference" },
-      { "name": "DefaultForm",            "path": "src/components/template/DefaultForm" },
-      { "name": "DefaultPage",            "path": "src/components/template/DefaultPage" },
-      { "name": "Details",                "path": "src/components/template/Details" },
-      { "name": "FieldGroupTemplate",     "path": "src/components/template/FieldGroupTemplate" },
-      { "name": "HierarchicalForm",       "path": "src/components/template/HierarchicalForm" },
-      { "name": "InlineDashboard",        "path": "src/components/template/InlineDashboard" },
-      { "name": "InlineDashboardPage",    "path": "src/components/template/InlineDashboardPage" },
-      { "name": "ListPage",               "path": "src/components/template/ListPage" },
-      { "name": "ListView",               "path": "src/components/template/ListView" },
-      { "name": "MultiReferenceReadOnly", "path": "src/components/template/MultiReferenceReadOnly" },
-      { "name": "NarrowWide",             "path": "src/components/template/NarrowWide" },
-      { "name": "ObjectPage",             "path": "src/components/template/ObjectPage" },
-      { "name": "OneColumn",              "path": "src/components/template/OneColumn" },
-      { "name": "PromotedFilters",        "path": "src/components/template/PromotedFilters" },
-      { "name": "SelfServiceCaseView",    "path": "src/components/template/SelfServiceCaseView" },
-      { "name": "SimpleTable",            "path": "src/components/template/SimpleTable" },
-      { "name": "SingleReferenceReadOnly","path": "src/components/template/SingleReferenceReadOnly" },
-      { "name": "SubTabs",                "path": "src/components/template/SubTabs" },
-      { "name": "TwoColumn",              "path": "src/components/template/TwoColumn" },
-      { "name": "WideNarrow",             "path": "src/components/template/WideNarrow" },
-      { "name": "WssNavBar",              "path": "src/components/template/WssNavBar" }
+      {
+        "name": "AdvancedSearch",
+        "path": "src/components/template/AdvancedSearch"
+      },
+      { "name": "AppShell", "path": "src/components/template/AppShell" },
+      { "name": "BannerPage", "path": "src/components/template/BannerPage" },
+      { "name": "CaseSummary", "path": "src/components/template/CaseSummary" },
+      { "name": "CaseView", "path": "src/components/template/CaseView" },
+      {
+        "name": "CaseViewActionsMenu",
+        "path": "src/components/template/CaseViewActionsMenu"
+      },
+      {
+        "name": "Confirmation",
+        "path": "src/components/template/Confirmation"
+      },
+      {
+        "name": "DataReference",
+        "path": "src/components/template/DataReference"
+      },
+      { "name": "DefaultForm", "path": "src/components/template/DefaultForm" },
+      { "name": "DefaultPage", "path": "src/components/template/DefaultPage" },
+      { "name": "Details", "path": "src/components/template/Details" },
+      {
+        "name": "FieldGroupTemplate",
+        "path": "src/components/template/FieldGroupTemplate"
+      },
+      {
+        "name": "HierarchicalForm",
+        "path": "src/components/template/HierarchicalForm"
+      },
+      {
+        "name": "InlineDashboard",
+        "path": "src/components/template/InlineDashboard"
+      },
+      {
+        "name": "InlineDashboardPage",
+        "path": "src/components/template/InlineDashboardPage"
+      },
+      { "name": "ListPage", "path": "src/components/template/ListPage" },
+      { "name": "ListView", "path": "src/components/template/ListView" },
+      {
+        "name": "MultiReferenceReadOnly",
+        "path": "src/components/template/MultiReferenceReadOnly"
+      },
+      { "name": "NarrowWide", "path": "src/components/template/NarrowWide" },
+      { "name": "ObjectPage", "path": "src/components/template/ObjectPage" },
+      { "name": "OneColumn", "path": "src/components/template/OneColumn" },
+      {
+        "name": "PromotedFilters",
+        "path": "src/components/template/PromotedFilters"
+      },
+      {
+        "name": "SelfServiceCaseView",
+        "path": "src/components/template/SelfServiceCaseView"
+      },
+      { "name": "SimpleTable", "path": "src/components/template/SimpleTable" },
+      {
+        "name": "SingleReferenceReadOnly",
+        "path": "src/components/template/SingleReferenceReadOnly"
+      },
+      { "name": "SubTabs", "path": "src/components/template/SubTabs" },
+      { "name": "TwoColumn", "path": "src/components/template/TwoColumn" },
+      { "name": "WideNarrow", "path": "src/components/template/WideNarrow" },
+      { "name": "WssNavBar", "path": "src/components/template/WssNavBar" }
     ],
     "widget": [
-      { "name": "AppAnnouncement", "path": "src/components/widget/AppAnnouncement" },
-      { "name": "Attachment",      "path": "src/components/widget/Attachment" },
-      { "name": "CaseHistory",     "path": "src/components/widget/CaseHistory" },
-      { "name": "FileUtility",     "path": "src/components/widget/FileUtility" },
-      { "name": "Followers",       "path": "src/components/widget/Followers" },
-      { "name": "QuickCreate",     "path": "src/components/widget/QuickCreate" },
-      { "name": "SummaryItem",     "path": "src/components/widget/SummaryItem" },
-      { "name": "SummaryList",     "path": "src/components/widget/SummaryList" },
-      { "name": "ToDo",            "path": "src/components/widget/ToDo" }
+      {
+        "name": "AppAnnouncement",
+        "path": "src/components/widget/AppAnnouncement"
+      },
+      { "name": "Attachment", "path": "src/components/widget/Attachment" },
+      { "name": "CaseHistory", "path": "src/components/widget/CaseHistory" },
+      { "name": "FileUtility", "path": "src/components/widget/FileUtility" },
+      { "name": "Followers", "path": "src/components/widget/Followers" },
+      { "name": "QuickCreate", "path": "src/components/widget/QuickCreate" },
+      { "name": "SummaryItem", "path": "src/components/widget/SummaryItem" },
+      { "name": "SummaryList", "path": "src/components/widget/SummaryList" },
+      { "name": "ToDo", "path": "src/components/widget/ToDo" }
     ],
     "infra": [
-      { "name": "ActionButtons",   "path": "src/components/infra/ActionButtons" },
-      { "name": "DashboardFilter", "path": "src/components/infra/DashboardFilter" },
-      { "name": "DeferLoad",       "path": "src/components/infra/DeferLoad" },
-      { "name": "NavBar",          "path": "src/components/infra/NavBar" },
-      { "name": "Stages",          "path": "src/components/infra/Stages" },
-      { "name": "VerticalTabs",    "path": "src/components/infra/VerticalTabs" }
+      { "name": "ActionButtons", "path": "src/components/infra/ActionButtons" },
+      {
+        "name": "DashboardFilter",
+        "path": "src/components/infra/DashboardFilter"
+      },
+      { "name": "DeferLoad", "path": "src/components/infra/DeferLoad" },
+      { "name": "NavBar", "path": "src/components/infra/NavBar" },
+      { "name": "Stages", "path": "src/components/infra/Stages" },
+      { "name": "VerticalTabs", "path": "src/components/infra/VerticalTabs" }
     ],
     "designSystemExtension": [
-      { "name": "AlertBanner",       "path": "src/components/designSystemExtension/AlertBanner" },
-      { "name": "Banner",            "path": "src/components/designSystemExtension/Banner" },
-      { "name": "CaseSummaryFields", "path": "src/components/designSystemExtension/CaseSummaryFields" },
-      { "name": "DetailsFields",     "path": "src/components/designSystemExtension/DetailsFields" },
-      { "name": "FieldGroup",        "path": "src/components/designSystemExtension/FieldGroup" },
-      { "name": "FieldGroupList",    "path": "src/components/designSystemExtension/FieldGroupList" },
-      { "name": "FieldValueList",    "path": "src/components/designSystemExtension/FieldValueList" },
-      { "name": "Operator",          "path": "src/components/designSystemExtension/Operator" },
-      { "name": "Pulse",             "path": "src/components/designSystemExtension/Pulse" },
-      { "name": "RichTextEditor",    "path": "src/components/designSystemExtension/RichTextEditor" },
-      { "name": "WssQuickCreate",    "path": "src/components/designSystemExtension/WssQuickCreate" }
+      {
+        "name": "AlertBanner",
+        "path": "src/components/designSystemExtension/AlertBanner"
+      },
+      {
+        "name": "Banner",
+        "path": "src/components/designSystemExtension/Banner"
+      },
+      {
+        "name": "CaseSummaryFields",
+        "path": "src/components/designSystemExtension/CaseSummaryFields"
+      },
+      {
+        "name": "DetailsFields",
+        "path": "src/components/designSystemExtension/DetailsFields"
+      },
+      {
+        "name": "FieldGroup",
+        "path": "src/components/designSystemExtension/FieldGroup"
+      },
+      {
+        "name": "FieldGroupList",
+        "path": "src/components/designSystemExtension/FieldGroupList"
+      },
+      {
+        "name": "FieldValueList",
+        "path": "src/components/designSystemExtension/FieldValueList"
+      },
+      {
+        "name": "Operator",
+        "path": "src/components/designSystemExtension/Operator"
+      },
+      { "name": "Pulse", "path": "src/components/designSystemExtension/Pulse" },
+      {
+        "name": "RichTextEditor",
+        "path": "src/components/designSystemExtension/RichTextEditor"
+      },
+      {
+        "name": "WssQuickCreate",
+        "path": "src/components/designSystemExtension/WssQuickCreate"
+      }
     ]
   }
 }

package/templates/react-sdk-reference/.claude/prompts/generate-all-components.md

@@ -9,6 +9,7 @@ Read the user's message carefully. Extract:
 Both **design system** and **base components folder** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the base folder — the client's folder structure may differ.
 
 Example questions (ask only the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. What is your base components folder? (e.g. `src/components/`) — subfolders `field/`, `template/`, `widget/`, and `designSystemExtension/` will be used under it.
 
@@ -16,13 +17,13 @@ Example questions (ask only the ones that are actually missing):
 
 Extract which types the user wants from the message:
 
-| User says | Types in scope |
-|---|---|
-| "generate all components" | field + template + widget + designSystemExtension |
-| "generate field and widget components" | field + widget |
-| "generate widget, template components" | widget + template |
-| "generate all components except templates" | field + widget + designSystemExtension |
-| "replace everything" | field + template + widget + designSystemExtension |
+| User says                                  | Types in scope                                    |
+| ------------------------------------------ | ------------------------------------------------- |
+| "generate all components"                  | field + template + widget + designSystemExtension |
+| "generate field and widget components"     | field + widget                                    |
+| "generate widget, template components"     | widget + template                                 |
+| "generate all components except templates" | field + widget + designSystemExtension            |
+| "replace everything"                       | field + template + widget + designSystemExtension |
 
 Default to **all four types** if the message does not restrict the scope.
 
@@ -30,11 +31,11 @@ Default to **all four types** if the message does not restrict the scope.
 
 Once the base folder is known, derive the output path for each type in scope:
 
-| Type | Derived path |
-|---|---|
-| field | `<base>/field/` |
-| template | `<base>/template/` |
-| widget | `<base>/widget/` |
+| Type                  | Derived path                    |
+| --------------------- | ------------------------------- |
+| field                 | `<base>/field/`                 |
+| template              | `<base>/template/`              |
+| widget                | `<base>/widget/`                |
 | designSystemExtension | `<base>/designSystemExtension/` |
 
 Once design system, base folder, and type scope are resolved, continue to Step 1.
@@ -45,11 +46,11 @@ Once design system, base folder, and type scope are resolved, continue to Step 1
 
 Read the general skill file for every type in scope. Do this upfront — do not re-read per component.
 
-| Type | Skill file to read |
-|---|---|
-| field | `.claude/skills/field-components.md` |
-| template | `.claude/skills/template-components.md` |
-| widget | `.claude/skills/widget-components.md` |
+| Type                  | Skill file to read                          |
+| --------------------- | ------------------------------------------- |
+| field                 | `.claude/skills/field-components.md`        |
+| template              | `.claude/skills/template-components.md`     |
+| widget                | `.claude/skills/widget-components.md`       |
 | designSystemExtension | `.claude/skills/design-system-extension.md` |
 
 Keep all loaded skill files active throughout the entire session.
@@ -59,11 +60,13 @@ Keep all loaded skill files active throughout the entire session.
 ## Step 2 — Install and discover the design system (once)
 
 Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
+
 - Check `package.json` for the DS package
 - Install if missing, including any peer dependencies
 - Report what was installed
 
 Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
+
 - Read the DS README from `node_modules`
 - Discover all exported components from `dist/index.d.ts`
 - Read prop interfaces for primitives needed across **all types in scope**:
@@ -84,6 +87,7 @@ For every type in scope, check whether each component's `<outputPath>/<Component
 Collect all existing components across all types and report them in one consolidated list:
 
 > "The following N components already exist across [types]: [list grouped by type]. How should I proceed?
+>
 > - **Overwrite all** — replace all existing implementations
 > - **Skip existing** — only generate components that don't exist yet
 > - **Cancel** — stop without generating anything"
@@ -95,6 +99,7 @@ Wait for the user's answer before proceeding. If none exist, continue immediatel
 ## Step 4 — Generate field components (skip if field not in scope)
 
 If `field` is in scope, execute **Step 4** from `.claude/prompts/generate-field-components.md` in full:
+
 - Use the derived field output path: `<base>/field/`
 - The general skill (`field-components.md`) is already loaded from Step 1 — do not re-read it
 - The DS API reference map is already built from Step 2 — do not repeat discovery commands
@@ -106,6 +111,7 @@ If `field` is in scope, execute **Step 4** from `.claude/prompts/generate-field-
 ## Step 5 — Generate template components (skip if template not in scope)
 
 If `template` is in scope, execute **Step 4** from `.claude/prompts/generate-template-components.md` in full:
+
 - Use the derived template output path: `<base>/template/`
 - The general skill (`template-components.md`) is already loaded from Step 1 — do not re-read it
 - The DS layout API is already discovered from Step 2 — do not repeat discovery commands
@@ -117,6 +123,7 @@ If `template` is in scope, execute **Step 4** from `.claude/prompts/generate-tem
 ## Step 6 — Generate widget components (skip if widget not in scope)
 
 If `widget` is in scope, execute **Step 4** from `.claude/prompts/generate-widget-components.md` in full:
+
 - Use the derived widget output path: `<base>/widget/`
 - The general skill (`widget-components.md`) is already loaded from Step 1 — do not re-read it
 - The DS UI primitive map is already built from Step 2 — do not repeat discovery commands
@@ -129,6 +136,7 @@ If `widget` is in scope, execute **Step 4** from `.claude/prompts/generate-widge
 ## Step 7 — Generate design system extension components (skip if DSE not in scope)
 
 If `designSystemExtension` is in scope, execute **Step 4** from `.claude/prompts/generate-dse-components.md` in full:
+
 - Use the derived DSE output path: `<base>/designSystemExtension/`
 - The general skill (`design-system-extension.md`) is already loaded from Step 1 — do not re-read it
 - The DS display primitive map is already built from Step 2 — do not repeat discovery commands
@@ -141,6 +149,7 @@ If `designSystemExtension` is in scope, execute **Step 4** from `.claude/prompts
 ## Step 8 — Verify the build
 
 Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
+
 - Run `npm run build`
 - Fix any TypeScript or build errors before reporting completion
 - Report a final summary: