@wangs-ui/skills 1.3.0-alpha.2 → 1.3.0-alpha.20

package/skills/wangs-ui/layout-navigation/SKILL.md

@@ -0,0 +1,156 @@
+---
+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, tabbed views, or feature routing with `@wangs-ui/react-core`, `@wangs-ui/foundation`, and `@wangs-ui/react-navigation`.
+
+---
+
+## 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 (`component` parameter):
+
+```json
+get_component_api({ "component": "applayout" })
+get_component_api({ "component": "sidebar" })
+get_component_api({ "component": "tabletoolbar" })
+get_component_api({ "component": "breadcrumb" })
+get_component_api({ "component": "tabs" })
+```
+
+
+### Read Curated Layout Documentation (`id` parameter):
+
+```json
+get_documentation({ "id": "applayout" })
+get_documentation({ "id": "sidebar" })
+get_documentation({ "id": "react-navigation" })
+```
+
+### 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`)**:
+   - Subpath: `@wangs-ui/react-core/blocks/applayout`
+   - Outer responsive shell arranging navigation, navbar, sidebars, main viewport, and footer. Inspect slots and layout variants via `get_component_api({ "component": "applayout" })`.
+2. **Hierarchical Menu (`Sidebar`)**:
+   - Subpath: `@wangs-ui/react-core/blocks/sidebar`
+   - Primary app navigation drawer/rail supporting nested menus, badges, and collapse states. Inspect items and events via `get_component_api({ "component": "sidebar" })`.
+3. **Breadcrumb Trail (`Breadcrumb`)**:
+   - Subpath: `@wangs-ui/react-core/primitive/breadcrumb`
+   - Secondary hierarchy navigation displaying screen depth. Inspect item structure via `get_component_api({ "component": "breadcrumb" })`.
+4. **Tabbed Sub-Views (`Tabs`)**:
+   - Subpath: `@wangs-ui/react-core/primitive/tabs`
+   - In-page view switcher for partitioning entity details into distinct panels. Inspect via `get_component_api({ "component": "tabs" })`.
+5. **Universal Routing (`@wangs-ui/react-navigation`)**:
+   - Platform-agnostic route graph abstraction (`buildGraph`, `paramRoute`).
+   - Web router bridge: `@wangs-ui/react-navigation/web` (React Router).
+   - Native router bridge: `@wangs-ui/react-navigation/native` (React Navigation / Expo).
+
+---
+
+## 3. Structural Page Blueprint (Standard Pattern)
+
+```tsx
+import AppLayout from '@wangs-ui/react-core/blocks/applayout';
+import Sidebar from '@wangs-ui/react-core/blocks/sidebar';
+import Breadcrumb from '@wangs-ui/react-core/primitive/breadcrumb';
+import { Container, Section, Stack, HStack } from '@wangs-ui/foundation/layout';
+import { Text } from '@wangs-ui/foundation/theme';
+import { useI18n } from '@wangs-ui/react-i18n';
+import { HomeLine, Settings4Line } from '@wangs-ui/react-icons';
+import { useState } from 'react';
+
+export function ApplicationShell({ children }: { children: React.ReactNode }) {
+  const { t } = useI18n();
+  const [activeRoute, setActiveRoute] = useState('dashboard');
+  const [collapsed, setCollapsed] = useState(false);
+
+  const sidebarItems = [
+    { value: 'dashboard', label: t('Dashboard'), icon: HomeLine, to: '/' },
+    { value: 'settings', label: t('Settings'), icon: Settings4Line, to: '/settings' },
+  ];
+
+  return (
+    <AppLayout
+      variant="full-sidebar"
+      sidebar={
+        <Sidebar
+          items={sidebarItems}
+          value={activeRoute}
+          onValueChange={setActiveRoute}
+          collapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+          collapseMode="rail"
+        />
+      }
+    >
+      <Container size="xl">
+        <Section space="md">
+          <Stack gap="4">
+            <Breadcrumb
+              items={[
+                { label: t('Home'), href: '/' },
+                { label: t('Dashboard') },
+              ]}
+            />
+            <Text variant="headlineLarge">{t('Overview')}</Text>
+            {children}
+          </Stack>
+        </Section>
+      </Container>
+    </AppLayout>
+  );
+}
+```
+
+---
+
+## 4. Mandatory Implementation Rules
+
+1. **Query MCP First**: Always inspect `applayout` and `sidebar` stories via MCP before assembling the layout.
+2. **Strict Subpath Imports**:
+   - Blocks: `@wangs-ui/react-core/blocks/*` (`applayout`, `sidebar`, `tabletoolbar`)
+   - Primitives: `@wangs-ui/react-core/primitive/*` (`breadcrumb`, `tabs`)
+   - Layout Primitives: `@wangs-ui/foundation/layout` (`Container`, `Section`, `Stack`, `HStack`, `Box`, `Grid`)
+   - Typography: `@wangs-ui/foundation/theme` (`Text`)
+3. **Standard Layout Containers & Spacing**:
+   - Use `Container` (max-width rhythm) and `Section` (vertical rhythm) for page boundaries.
+   - Use flat numeric Tailwind spacing (`gap="4"`, `p="6"`). Never use legacy named tokens like `p-3xl` or `gap-md`.
+4. **Typography Scale**:
+   - Use `<Text variant="headlineLarge">` or `display*` / `title*` for page headers. Never use obsolete `.heading-*` helper classes or raw HTML heading tags without primitives.
+5. **No Redundant Layout Wrappers**:
+   - Do NOT insert intermediate pass-through `<div>` or `<Box>` wrappers between `<Card>`/`<Tabs>` and tab contents.
+   - Render active tab content directly as a child of the container:
+     ```tsx
+     // ✅ Good
+     <Card>
+       <Tabs items={tabItems} value={activeTab} onValueChange={setActiveTab} />
+       {activeTab === 'general' ? <GeneralTab /> : <SecurityTab />}
+     </Card>
+     ```
+6. **Translate Navigation Labels**: Wrap all sidebar item labels, breadcrumb text, and page headings in `t('...')` from `@wangs-ui/react-i18n`.

package/skills/wangs-ui/responsive-design/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: responsive-design
+description: Guidelines for implementing responsive UIs with Wangs UI — covering Breakpoint tiers, responsive props (ResponsiveValue), <Show> conditional rendering, and spacing conventions.
+metadata:
+  owner: wangs-ui
+---
+# Skill: Responsive Design (Consumer Guide)
+
+Use this skill when building responsive pages, layouts, or screen adaptations with Wangs UI components.
+
+---
+
+## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)
+
+Do **NOT** guess responsive prop types or breakpoint keys. Query the MCP server dynamically:
+
+```json
+resolve_type_definition({ "types": ["ResponsiveValue", "Breakpoint", "SpacingKey"] })
+```
+
+---
+
+## 2. Breakpoint Reference
+
+Wangs UI uses three standardized breakpoints:
+
+| Breakpoint     | Viewport Range | Typical Target             |
+| :------------- | :------------- | :------------------------- |
+| **`compact`**  | `< 600px`      | Mobile phones              |
+| **`medium`**   | `600–839px`    | Tablet portrait            |
+| **`expanded`** | `≥ 840px`      | Tablet landscape & Desktop |
+
+### Reading the Current Breakpoint in Code
+
+```tsx
+import { useTheme } from '@wangs-ui/foundation/theme';
+
+const { breakpoint } = useTheme(); // 'compact' | 'medium' | 'expanded'
+```
+
+---
+
+## 3. Responsive Props (`ResponsiveValue`)
+
+Visual scale props (`size`, layout `gap`, `columns`, `p`, `m`) accept either a single value or an object mapped by breakpoint:
+
+```tsx
+import { Button } from '@wangs-ui/react-core/components/button';
+import { Grid, Stack } from '@wangs-ui/foundation/layout';
+
+// Static (identical across all devices)
+<Button size="md" />
+<Stack gap="4" />
+
+// Adaptive (changes across breakpoints)
+<Button size={{ compact: 'lg', expanded: 'sm' }} />
+<Grid columns={{ compact: 1, medium: 2, expanded: 4 }} />
+```
+
+> **Rule**: Do **NOT** attempt to use responsive objects on event handlers or boolean flags (e.g. `disabled`, `onClick`). Only visual scale props support responsive objects.
+
+---
+
+## 4. Conditional Rendering (`<Show>`)
+
+Use `<Show>` when a component should be mounted or unmounted based on the active breakpoint:
+
+```tsx
+import { Show } from '@wangs-ui/foundation/theme';
+
+// Render only on tablet & desktop
+<Show above="medium">
+  <SidebarNav />
+</Show>
+
+// Render only on mobile
+<Show below="medium">
+  <MobileNavbar />
+</Show>
+
+// Swap component with a fallback
+<Show at="compact" fallback={<DesktopTable />}>
+  <MobileCardList />
+</Show>
+```
+
+### When to use `<Show>` vs CSS `hidden`:
+
+- **Use `<Show>`**: If the hidden component has expensive network fetches, subscriptions, or animations (unmounts completely).
+- **Use CSS Tailwind (`hidden md:block`)**: If it's just a visual styling toggle with no side effects.
+
+---
+
+## 5. Spacing Conventions
+
+Spacing tokens are **flat and fixed** (1 unit = 4px):
+
+- **Web**: Use standard Tailwind numeric classes (`gap-2`, `px-4`, `py-3`). **Never** use legacy named classes like `gap-md` or `px-sm`.
+- **Native**: Use `const { spacing } = useTheme();` (`spacing[4]` = 16px).
+
+---
+
+## 6. Anti-Patterns to Avoid
+
+1. **Avoid `hidden md:block` for stateful/heavy trees**: Always prefer `<Show>` so unused components cleanly unmount.
+2. **Never pass responsive objects to behavioral props**: `<Button disabled={{ compact: true }} />` is invalid.
+3. **No manual pixel calculations**: Use Tailwind numeric tokens (`gap-4`, `p-6`) or `ResponsiveValue`.

package/skills/wangs-ui/universal-layout/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: universal-layout
+description: Universal layout primitives (Box, Flex, Stack, Grid, Container, Section) with ResponsiveValue patterns for Web and React Native in Wangs UI.
+metadata:
+  owner: wangs-ui
+---
+# Skill: Universal Layout Primitives
+
+Use this skill when arranging page structure, spacing, or responsive grids with
+`@wangs-ui/foundation/layout`.
+For app shells (sidebar, breadcrumb, tabs), see the `layout-navigation` skill instead.
+
+---
+
+## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)
+
+Do **NOT** guess layout prop names, spacing scales, or breakpoint keys. Query the MCP
+server dynamically:
+
+```json
+list_catalog({ "query": "layout" })
+resolve_type_definition({ "types": ["ResponsiveValue", "SpacingKey", "StackProps", "GridProps", "BoxProps", "ScrollAreaProps"] })
+```
+
+---
+
+## 2. Choosing the Right Primitive
+
+1. **Stack (Vertical)** — default for vertical flows (forms, cards, page sections).
+   Fixed `column` direction, uniform `gap`, optional auto-`separator`.
+2. **HStack** — horizontal rows with vertical centering (avatar + label + action,
+   toolbar clusters). Fixed `row` direction.
+3. **Flex** — only when you need explicit `direction`, `wrap`, `align`, or `justify`
+   control beyond what Stack/HStack fix. Prefer Stack/HStack otherwise.
+4. **Grid** — two-dimensional placement or multi-column flows:
+   - explicit `columns={{ compact: 1, medium: 2, expanded: 4 }}` for fixed column counts;
+   - `minItemWidth` for auto-fit (columns grow/shrink with container width, no media query);
+   - `GridItem` with `colSpan` / `rowSpan` for featured tiles.
+5. **Box** — leaf-level spacing/sizing wrapper (`p`, `m`, `radius`, `overflow`), or
+   polymorphic `as="section" | "main" | "article"` for landmarks.
+6. **Container / Section** — page-level rhythm only: `Container` bounds max-width
+   (`size`, default `'xl'`) with consistent horizontal padding; `Section` sets
+   vertical rhythm (`space: 'sm' | 'md' | 'lg'`, default `'md'`). Never nest
+   `Container` inside `Container`.
+7. **ZStack** — overlays (badge on card, status dot on avatar, hero overlay).
+8. **ScrollArea** — styled, accessible scrollable viewports (`orientation: 'vertical' | 'horizontal' | 'both'`, `variant: 'hover' | 'always' | 'scroll'`).
+9. **AspectRatio / Bleed / Spacer** — media frames (`ratio`), full-bleed breakouts
+   inside padded containers (`Bleed`), and flexible fillers in stacks (`Spacer`).
+
+---
+
+## 3. Mandatory Implementation Rules
+
+1. **ResponsiveValue everywhere**: scalar for static (`gap="4"`), object for
+   adaptive (`gap={{ compact: '2', medium: '4', expanded: '6' }}`,
+   `columns={{ compact: 1, medium: 2, expanded: 4 }}`). Breakpoints are
+   `compact` (mobile-first base), `medium` (`md:`), `expanded` (`lg:`).
+2. **Separators, not manual dividers**: `<Stack separator={<Divider />}>` inserts
+   dividers between children with no trailing element. Never hand-place a divider
+   after every child.
+3. **Spacing scale**: `gap`/`p`/`m` use `SpacingKey` (Tailwind numeric scale strings,
+   e.g. `'0'`, `'1'`, `'2'`, `'4'`, `'6'`, `'8'`, `'12'`, `'16'`). Never pass raw pixel strings to spacing props.
+4. **Strict subpath imports**:
+   ```tsx
+   import { Stack, HStack, Grid, Container, Box, Flex, ScrollArea } from '@wangs-ui/foundation/layout';
+   ```
+5. **Translate visible labels** inside layout children via `t('...')` from
+   `@wangs-ui/react-i18n` (layout props themselves are never translated).
+
+---
+
+## 4. Anti-Patterns (Forbidden)
+
+1. **Gap vs margin**: NEVER hardcode `marginBottom`/`mb-*` on children inside a
+   Stack/Flex/Grid to fake spacing — always use the parent's `gap`/`gapX`/`gapY`.
+   Margins collapse unpredictably and break `separator` insertion.
+2. **No nested Containers** and no `Container` for non-page content (cards, modals).
+3. **No `Flex` with hardcoded `flexDirection` styles** when `Stack`/`HStack` express it.
+4. **No raw media queries** for `direction`/`gap`/`columns` — use `ResponsiveValue`.
+5. **No `Grid` for one-dimensional lists** — that is `Stack`/`HStack` territory.

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

@@ -0,0 +1,104 @@
+---
+name: wangs-ui-components
+description: MCP Discovery Protocol, modular subpath import map, and primitive substitution map for Wangs UI applications.
+metadata:
+  owner: wangs-ui
+---
+
+# Skill: Wangs UI Component Fundamentals & MCP Protocol
+
+Use this skill to navigate the Wangs UI ecosystem. **MCP is the single source of truth** for all component APIs, props, variants, slots, and examples. Do not hardcode or assume props — always query MCP dynamically.
+
+---
+
+## 1. The MCP Discovery Protocol (Single Source of Truth)
+
+Do **NOT** guess component props, Pass-Through (`pt`) slots, or event names. Always query the MCP server dynamically:
+
+```mermaid
+graph TD
+    A[Identify Component / Primitive Needed] --> B[list_catalog to confirm name/id]
+    B --> C[get_component_api for typed contract]
+    B --> D[get_documentation for curated guidance]
+    C --> E{Need live story / variant code?}
+    D --> E
+    E -->|Yes| F[get_component_examples]
+    E -->|No| G[Implement with Subpath Import Map]
+    F --> G
+```
+
+### Discovery Steps:
+
+1. **Discover Catalog Entries**:
+   ```json
+   list_catalog({ "query": "button" })
+   list_catalog({ "category": "component" })
+   ```
+2. **Inspect Typed Contracts & Props** (`component` parameter):
+   ```json
+   get_component_api({ "component": "button" })
+   get_component_api({ "component": "datatable" })
+   get_component_api({ "component": "field" })
+   ```
+3. **Read Curated Narrative Documentation** (`id` parameter):
+   ```json
+   get_documentation({ "id": "button" })
+   get_documentation({ "id": "foundation" })
+   get_documentation({ "id": "form" })
+   ```
+4. **Fetch Live Storybook TSX Examples**:
+   ```json
+   get_component_examples({ "component": "button", "variant": "Sizes" })
+   get_component_examples({ "component": "datatable", "variant": "Basic" })
+   ```
+5. **Explore Knowledge Graph Relationships**:
+   ```json
+   query_graph({ "query": "DataTable" })
+   query_graph({ "query": "useForm" })
+   ```
+
+---
+
+## 2. Modular Subpath Import Map
+
+Always import via specific subpath modules to guarantee tree-shaking and avoid bundling entire packages:
+
+| Ecosystem Layer | Subpath Pattern | Example Imports |
+| :--- | :--- | :--- |
+| **Core Primitives** | `@wangs-ui/react-core/primitive/<name>` | `Button`, `Input`, `Select`, `DataTable`, `Dialog`, `Modal`, `Field`, `Form`, `Card`, `Badge` |
+| **Layout Primitives** | `@wangs-ui/foundation/layout` | `Stack`, `HStack`, `VStack`, `Flex`, `Grid`, `Box`, `Container`, `Section`, `ScrollArea` |
+| **Typography Primitives** | `@wangs-ui/foundation/theme` | `Text`, `Code`, `Kbd`, `Link`, `Blockquote`, `List`, `Mark` |
+| **Blocks & Shells** | `@wangs-ui/react-core/blocks/<name>` | `AppLayout`, `Sidebar`, `TableToolbar` |
+| **Form Engine** | `@wangs-ui/form/core`, `@wangs-ui/form/react` | Headless form state, hooks, validation adapters |
+| **Universal Navigation** | `@wangs-ui/react-navigation/web`, `@wangs-ui/react-navigation/native` | `buildGraph`, `paramRoute`, platform router bridges |
+| **Theme & Providers** | `@wangs-ui/react-core/api`, `@wangs-ui/foundation/theme` | `WangsUiProvider`, `ThemeProvider`, `useTheme` |
+| **Vector Icons** | `@wangs-ui/react-icons` | `SearchLine`, `AddLine`, `DeleteBin6Line`, `CheckLine` |
+| **i18n & Localization** | `@wangs-ui/react-i18n` | `useI18n`, `t`, `WangsUiI18nProvider` |
+
+---
+
+## 3. Primitive Substitution Map
+
+Zero raw HTML elements. Never write raw HTML tags when a Wangs UI primitive exists:
+
+| Forbidden Raw HTML | Mandatory Wangs UI Primitive | Import Path | MCP Catalog / Doc 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` / `MultiSelect` | `@wangs-ui/react-core/primitive/select` | `select`, `multiselect` |
+| `<textarea>` | `Textarea` | `@wangs-ui/react-core/primitive/textarea` | `textarea` |
+| `<form>` | `Form` / `DialogForm` | `@wangs-ui/react-core/primitive/form` | `form`, `dialogform` |
+| `<dialog>` / alert modal | `Modal` / `Dialog` | `@wangs-ui/react-core/primitive/modal` | `modal`, `dialog` |
+| `<table>` | `DataTable` | `@wangs-ui/react-core/primitive/datatable` | `datatable` |
+| `<div>` (layout / flex / grid) | `Stack`, `HStack`, `Flex`, `Grid`, `Box` | `@wangs-ui/foundation/layout` | `universal-layout` |
+| `<div>` (surface card) | `Card` | `@wangs-ui/react-core/primitive/card` | `card` |
+| Pill / status chip | `Badge` | `@wangs-ui/react-core/primitive/badge` | `badge` |
+| `<h1>` - `<h6>` | `<Text variant="...">` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<p>`, `<span>` (body text) | `<Text variant="...">` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<a>` | `Link` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<code>` | `Code` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<kbd>` | `Kbd` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<blockquote>` | `Blockquote` | `@wangs-ui/foundation/theme` | `foundation` |
+| `<ul>`, `<ol>` | `List` | `@wangs-ui/foundation/theme` | `foundation` |

package/dist/skills/layout-navigation/SKILL.md

@@ -1,62 +0,0 @@
----
-name: layout-navigation
-description: Architecture, navigation hierarchies, and MCP discovery protocol for AppLayout, Sidebar, Breadcrumb, and Tabs in 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-documentation({ "id": "applayout" })
-get-documentation({ "id": "sidebar" })
-get-documentation({ "id": "breadcrumb" })
-get-documentation({ "id": "tabs" })
-```
-
-### Inspect Live Story Implementations:
-
-```json
-get-documentation-for-story({ "id": "applayout", "storyName": "Default" })
-get-documentation-for-story({ "id": "sidebar", "storyName": "Default" })
-get-documentation-for-story({ "id": "breadcrumb", "storyName": "Default" })
-get-documentation-for-story({ "id": "tabs", "storyName": "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`.