@wangs-ui/skills 1.3.0-alpha.13 → 1.3.0-alpha.15

package/dist/skills/wangs-ui-components/SKILL.md

@@ -1,117 +0,0 @@
----
-name: wangs-ui-components
-description: Foundational rules, subpath imports, design tokens, and the MCP Discovery Protocol for building React apps with Wangs UI.
-metadata:
-  owner: wangs-ui
----
-# Skill: Wangs UI Component Fundamentals & MCP Protocol
-
-Use 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`).
-
----
-
-## 1. The MCP Discovery Protocol (Mandatory Single Source of Truth)
-
-Do **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:
-
-```mermaid
-graph TD
-    A[Identify Component Needed] --> B[list_catalog to confirm the id]
-    B --> C[get_component_api for the typed contract]
-    C --> D{Need live story / variant code?}
-    D -->|Yes| E[get_component_examples]
-    D -->|No| F[get_documentation for curated guidance]
-    E --> G[Check Graphify: query_graph]
-    F --> G
-    G --> H[Implement Component with Subpath Imports]
-```
-
-### Discovery Steps:
-
-1. **Inspect Component Contract & Props**:
-   ```json
-   get_component_api({ "id": "button" })
-   get_component_api({ "id": "input" })
-   get_component_api({ "id": "datatable" })
-   ```
-2. **Inspect Curated Documentation**:
-   ```json
-   get_documentation({ "id": "button" })
-   ```
-3. **Inspect Live Usage & Story Variants**:
-   ```json
-   get_component_examples({ "component": "button", "variant": "Sizes" })
-   get_component_examples({ "component": "datatable", "variant": "CursorPagination" })
-   ```
-4. **Inspect Relationships & Real Usages in Graph**:
-   ```json
-   query_graph({ "query": "DataTable" })
-   query_graph({ "query": "usePT" })
-   ```
-
----
-
-## 2. Subpath Modular Imports (Mandatory)
-
-Always import via specific subpaths to guarantee tree-shaking and avoid bundling entire packages:
-
-```tsx
-// Primitives (@wangs-ui/react-core/primitive/*)
-import Button from '@wangs-ui/react-core/primitive/button';
-import Input from '@wangs-ui/react-core/primitive/input';
-import NumberInput from '@wangs-ui/react-core/primitive/numberinput';
-import Select from '@wangs-ui/react-core/primitive/select';
-import Badge from '@wangs-ui/react-core/primitive/badge';
-import Card from '@wangs-ui/react-core/primitive/card';
-import DataTable from '@wangs-ui/react-core/primitive/datatable';
-
-// Blocks (@wangs-ui/react-core/blocks/*)
-import AppLayout from '@wangs-ui/react-core/blocks/applayout';
-import Sidebar from '@wangs-ui/react-core/blocks/sidebar';
-
-// Providers & System Hooks
-import { WangsUiProvider } from '@wangs-ui/react-core/api';
-import { useI18n } from '@wangs-ui/react-i18n';
-import { useTheme } from '@wangs-ui/foundation/theme';
-
-// Icons (@wangs-ui/react-icons)
-import { SearchLine, AddLine, DeleteBin6Line, CheckLine } from '@wangs-ui/react-icons';
-```
-
----
-
-## 3. Strict Primitive Substitution Rule
-
-Never write raw HTML elements when a Wangs UI primitive exists:
-
-| Forbidden Raw HTML        | Mandatory Wangs UI Component | Subpath Import                               | MCP Documentation ID |
-| :------------------------ | :--------------------------- | :------------------------------------------- | :------------------- |
-| `<button>`                | `Button`                     | `@wangs-ui/react-core/primitive/button`      | `button`             |
-| `<input type="text">`     | `Input`                      | `@wangs-ui/react-core/primitive/input`       | `input`              |
-| `<input type="number">`   | `NumberInput`                | `@wangs-ui/react-core/primitive/numberinput` | `numberinput`        |
-| `<input type="checkbox">` | `Checkbox`                   | `@wangs-ui/react-core/primitive/checkbox`    | `checkbox`           |
-| `<select>`                | `Select`                     | `@wangs-ui/react-core/primitive/select`      | `select`             |
-| `<dialog>` / modal        | `Dialog` / `Modal`           | `@wangs-ui/react-core/primitive/dialog`      | `dialog`, `modal`    |
-| `<table>`                 | `DataTable`                  | `@wangs-ui/react-core/primitive/datatable`   | `datatable`          |
-| Container box             | `Card`                       | `@wangs-ui/react-core/primitive/card`        | `card`               |
-| Pill badge / status       | `Badge`                      | `@wangs-ui/react-core/primitive/badge`       | `badge`              |
-
----
-
-## 4. Typography Scale & 4px Spacing Tokens
-
-### Typography Helper Classes
-
-- `.heading-1` — Page title (22px, 600)
-- `.heading-2` — Section / Card title (18px, 600)
-- `.heading-3` — Sub-header (16px, 500)
-- `.heading-4` — Field label (14px, 500)
-- `.heading-5` — Small group header (12px, 600)
-- `.p` — Body copy (12px, 500)
-
-### Spacing Tokens
-
-- Flat numeric scale, Tailwind-aligned (1 unit = 4px): `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`…`16` (e.g. `4` = 16px)
-- Web: use numeric utilities directly — Gap: `gap-4`, Padding: `px-4 py-1.5`
-- Native: read pixel values via `useTheme().spacing` (e.g. `spacing[4] === 16`)
-- Responsiveness via `ResponsiveValue<T>` size props and `<Show>`, not per-density spacing tokens

package/skills/layout-navigation/SKILL.md

@@ -1,70 +0,0 @@
----
-name: layout-navigation
-description: Architecture, navigation hierarchies, and MCP discovery protocol for AppLayout, Sidebar, Breadcrumb, and Tabs in Wangs UI.
-metadata:
-  owner: wangs-ui
----
-# Skill: Application Layout & Navigation Hierarchy
-
-Use this skill when constructing application shells, multi-level sidebars, page headers, breadcrumbs, or tabbed views with `@wangs-ui/react-core`.
-
----
-
-## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)
-
-Do **NOT** guess layout block slots, sidebar item interfaces, or breadcrumb props. Query the MCP server dynamically to inspect exact contracts and live story implementations:
-
-### Inspect Layout & Navigation Contracts:
-
-```json
-get_component_api({ "id": "applayout" })
-get_component_api({ "id": "sidebar" })
-get_component_api({ "id": "breadcrumb" })
-get_component_api({ "id": "tabs" })
-```
-
-### Read Curated Layout Documentation:
-
-```json
-get_documentation({ "id": "applayout" })
-get_documentation({ "id": "sidebar" })
-```
-
-### Inspect Live Story Implementations:
-
-```json
-get_component_examples({ "component": "applayout", "variant": "TopNavbar" })
-get_component_examples({ "component": "sidebar", "variant": "WithSubMenu" })
-get_component_examples({ "component": "breadcrumb", "variant": "Default" })
-get_component_examples({ "component": "tabs", "variant": "Default" })
-```
-
-### Inspect Knowledge Graph & Usages:
-
-```json
-query_graph({ "query": "AppLayout" })
-query_graph({ "query": "Sidebar" })
-```
-
----
-
-## 2. Layout Architecture & Mental Model
-
-1. **Top-Level App Shell (`AppLayout`)**:
-   Provides structured slots for `sidebar`, `header`, and main content view, handling responsive viewport scaling and mobile navigation overlays.
-2. **Hierarchical Menu (`Sidebar`)**:
-   Renders single and nested navigation items, active route indicators, collapsible state, and notification badges.
-3. **Breadcrumb Trail (`Breadcrumb`)**:
-   Maintains clear navigational hierarchy on page headers.
-4. **Tabbed Sub-Views (`Tabs`)**:
-   Organizes complex entity detail views or multi-section settings into distinct tabbed panels.
-
----
-
-## 3. Mandatory Implementation Rules
-
-1. **Query MCP for Current Code Patterns**: Inspect `applayout` and `sidebar` stories via MCP before assembling the layout.
-2. **Strict Subpath Imports**: Import layout blocks via `@wangs-ui/react-core/blocks/*` and primitives via `@wangs-ui/react-core/primitive/*`.
-3. **Consistent Spacing Grid**: Use standard container padding (`p-6` or `p-3xl`) across page contents.
-4. **Page Hierarchy Alignment**: Every page view inside the layout must provide a clear `.heading-1` hierarchy and synchronized breadcrumbs.
-5. **Translate Navigation Labels**: Wrap all sidebar item labels and breadcrumb texts in `t('...')` from `@wangs-ui/react-i18n`.

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

@@ -1,117 +0,0 @@
----
-name: wangs-ui-components
-description: Foundational rules, subpath imports, design tokens, and the MCP Discovery Protocol for building React apps with Wangs UI.
-metadata:
-  owner: wangs-ui
----
-# Skill: Wangs UI Component Fundamentals & MCP Protocol
-
-Use 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`).
-
----
-
-## 1. The MCP Discovery Protocol (Mandatory Single Source of Truth)
-
-Do **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:
-
-```mermaid
-graph TD
-    A[Identify Component Needed] --> B[list_catalog to confirm the id]
-    B --> C[get_component_api for the typed contract]
-    C --> D{Need live story / variant code?}
-    D -->|Yes| E[get_component_examples]
-    D -->|No| F[get_documentation for curated guidance]
-    E --> G[Check Graphify: query_graph]
-    F --> G
-    G --> H[Implement Component with Subpath Imports]
-```
-
-### Discovery Steps:
-
-1. **Inspect Component Contract & Props**:
-   ```json
-   get_component_api({ "id": "button" })
-   get_component_api({ "id": "input" })
-   get_component_api({ "id": "datatable" })
-   ```
-2. **Inspect Curated Documentation**:
-   ```json
-   get_documentation({ "id": "button" })
-   ```
-3. **Inspect Live Usage & Story Variants**:
-   ```json
-   get_component_examples({ "component": "button", "variant": "Sizes" })
-   get_component_examples({ "component": "datatable", "variant": "CursorPagination" })
-   ```
-4. **Inspect Relationships & Real Usages in Graph**:
-   ```json
-   query_graph({ "query": "DataTable" })
-   query_graph({ "query": "usePT" })
-   ```
-
----
-
-## 2. Subpath Modular Imports (Mandatory)
-
-Always import via specific subpaths to guarantee tree-shaking and avoid bundling entire packages:
-
-```tsx
-// Primitives (@wangs-ui/react-core/primitive/*)
-import Button from '@wangs-ui/react-core/primitive/button';
-import Input from '@wangs-ui/react-core/primitive/input';
-import NumberInput from '@wangs-ui/react-core/primitive/numberinput';
-import Select from '@wangs-ui/react-core/primitive/select';
-import Badge from '@wangs-ui/react-core/primitive/badge';
-import Card from '@wangs-ui/react-core/primitive/card';
-import DataTable from '@wangs-ui/react-core/primitive/datatable';
-
-// Blocks (@wangs-ui/react-core/blocks/*)
-import AppLayout from '@wangs-ui/react-core/blocks/applayout';
-import Sidebar from '@wangs-ui/react-core/blocks/sidebar';
-
-// Providers & System Hooks
-import { WangsUiProvider } from '@wangs-ui/react-core/api';
-import { useI18n } from '@wangs-ui/react-i18n';
-import { useTheme } from '@wangs-ui/foundation/theme';
-
-// Icons (@wangs-ui/react-icons)
-import { SearchLine, AddLine, DeleteBin6Line, CheckLine } from '@wangs-ui/react-icons';
-```
-
----
-
-## 3. Strict Primitive Substitution Rule
-
-Never write raw HTML elements when a Wangs UI primitive exists:
-
-| Forbidden Raw HTML        | Mandatory Wangs UI Component | Subpath Import                               | MCP Documentation ID |
-| :------------------------ | :--------------------------- | :------------------------------------------- | :------------------- |
-| `<button>`                | `Button`                     | `@wangs-ui/react-core/primitive/button`      | `button`             |
-| `<input type="text">`     | `Input`                      | `@wangs-ui/react-core/primitive/input`       | `input`              |
-| `<input type="number">`   | `NumberInput`                | `@wangs-ui/react-core/primitive/numberinput` | `numberinput`        |
-| `<input type="checkbox">` | `Checkbox`                   | `@wangs-ui/react-core/primitive/checkbox`    | `checkbox`           |
-| `<select>`                | `Select`                     | `@wangs-ui/react-core/primitive/select`      | `select`             |
-| `<dialog>` / modal        | `Dialog` / `Modal`           | `@wangs-ui/react-core/primitive/dialog`      | `dialog`, `modal`    |
-| `<table>`                 | `DataTable`                  | `@wangs-ui/react-core/primitive/datatable`   | `datatable`          |
-| Container box             | `Card`                       | `@wangs-ui/react-core/primitive/card`        | `card`               |
-| Pill badge / status       | `Badge`                      | `@wangs-ui/react-core/primitive/badge`       | `badge`              |
-
----
-
-## 4. Typography Scale & 4px Spacing Tokens
-
-### Typography Helper Classes
-
-- `.heading-1` — Page title (22px, 600)
-- `.heading-2` — Section / Card title (18px, 600)
-- `.heading-3` — Sub-header (16px, 500)
-- `.heading-4` — Field label (14px, 500)
-- `.heading-5` — Small group header (12px, 600)
-- `.p` — Body copy (12px, 500)
-
-### Spacing Tokens
-
-- Flat numeric scale, Tailwind-aligned (1 unit = 4px): `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`…`16` (e.g. `4` = 16px)
-- Web: use numeric utilities directly — Gap: `gap-4`, Padding: `px-4 py-1.5`
-- Native: read pixel values via `useTheme().spacing` (e.g. `spacing[4] === 16`)
-- Responsiveness via `ResponsiveValue<T>` size props and `<Show>`, not per-density spacing tokens