@equal-experts/kuat-react 0.14.0-beta.2 → 0.15.0-beta.0

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/{dashboards.md → dashboard.md}

@@ -1,19 +1,19 @@
-# Dashboard Scenarios
+# Dashboard
 
-Patterns for data dashboards, analytics views, metrics displays, and reporting interfaces.
+**User goal:** See the key metrics at a glance, understand trends over time, and move from data to a
+confident decision — drilling into detail only when needed.
 
----
+> **Pattern:** *Pages* · single-medium (web-product) — concept and implementation together.
+> Covers analytics views, metrics displays, data tables, and reporting interfaces.
 
-## Principles
-
-### User Goals
+## Context
 
-- **Get insights quickly** - Key metrics visible at a glance
-- **Understand trends** - Patterns and changes over time
-- **Take action** - Clear paths from data to decisions
-- **Explore deeper** - Drill down into details when needed
+A dashboard exists to turn data into decisions. Users arrive wanting insights quickly, with the most
+important metrics visible at a glance, patterns and changes over time made legible, and clear paths from
+what the numbers say to what to do next — while keeping the option to explore deeper when a question
+demands it.
 
-### UX Principles
+## Principles
 
 | Principle | Implementation |
 |-----------|----------------|
@@ -22,22 +22,18 @@ Patterns for data dashboards, analytics views, metrics displays, and reporting i
 | Consistent data | Same time periods, units, formats |
 | Actionable context | Explain what numbers mean |
 
-### Success Metrics
+Success shows up as: time to find key information, decision confidence, filter usage patterns, and
+drill-down completion rates.
 
-- Time to find key information
-- Decision confidence
-- Filter usage patterns
-- Drill-down completion rates
+## Solution in web-product
 
----
-
-## Layout
+### Layout
 
 **Base Layout:** Sidebar Navigation
 
 Dashboards benefit from persistent navigation and maximum content width.
 
-### Metrics Dashboard Structure
+#### Metrics Dashboard Structure
 
 ```
 ┌──────┬──────────────────────────────────┐
@@ -57,7 +53,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 └──────┴──────────────────────────────────┘
 ```
 
-### Data Table Dashboard Structure
+#### Data Table Dashboard Structure
 
 ```
 ┌──────┬──────────────────────────────────┐
@@ -76,7 +72,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 └──────┴──────────────────────────────────┘
 ```
 
-### Specifications
+#### Specifications
 
 | Element | Value |
 |---------|-------|
@@ -85,11 +81,9 @@ Dashboards benefit from persistent navigation and maximum content width.
 | KPI card grid | 4 columns desktop, 2 tablet, 1 mobile |
 | Grid gap | 16-24px |
 
----
-
-## Design
+### Design
 
-### Color Tokens
+#### Color Tokens
 
 | Element | Token |
 |---------|-------|
@@ -101,7 +95,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Negative trend | `text-destructive` |
 | Neutral | `text-muted-foreground` |
 
-### KPI Card Pattern
+#### KPI Card Pattern
 
 | Element | Specification |
 |---------|---------------|
@@ -111,7 +105,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Value | `text-2xl font-bold` or `text-3xl font-bold` |
 | Trend | Small text with arrow icon |
 
-### Chart Container Pattern
+#### Chart Container Pattern
 
 | Element | Specification |
 |---------|---------------|
@@ -120,7 +114,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Header | Title left, controls right |
 | Min height | 300px primary, 200px secondary |
 
-### Typography Hierarchy
+#### Typography Hierarchy
 
 | Element | Style |
 |---------|-------|
@@ -131,11 +125,9 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Chart titles | `text-base font-medium` |
 | Table headers | `text-sm font-medium` |
 
----
+### Content
 
-## Content
-
-### KPI Cards
+#### KPI Cards
 
 **Structure:**
 
@@ -152,7 +144,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 | "Active Users" | "2,847" | "-3% vs last week" |
 | "Conversion Rate" | "4.2%" | "No change" |
 
-### Chart Headers
+#### Chart Headers
 
 ```
 ┌─────────────────────────────────────┐
@@ -168,7 +160,7 @@ Dashboards benefit from persistent navigation and maximum content width.
 - Period selector for time range
 - Overflow menu for export, settings
 
-### Empty States
+#### Empty States
 
 | Scenario | Message |
 |----------|---------|
@@ -177,16 +169,14 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Loading error | "Unable to load data" + "Retry" button |
 | New user | "No activity yet" + guidance to get started |
 
-### Loading States
+#### Loading States
 
 - KPI cards: Skeleton with pulse animation
 - Charts: Skeleton rectangle with centered spinner
 - Tables: 5-10 skeleton rows
 - Show loading indicator, never stale data without indicator
 
----
-
-## Accessibility
+### Accessibility
 
 **Base requirements:** See [accessibility foundations](../../../accessibility/accessibility.md) and [web accessibility](../accessibility.md)
 
@@ -200,18 +190,16 @@ Dashboards benefit from persistent navigation and maximum content width.
 | Focus order | KPIs first, then filters, then main content |
 | Live regions | Use `aria-live` for updating data |
 
-### Data Visualisation
+#### Data Visualisation
 
 - Provide text summaries of chart insights
 - Link to accessible data table from each chart
 - Use patterns/textures in addition to colors
 - Ensure legends are keyboard navigable
 
----
-
-## Implementation
+### Implementation
 
-### Filter Patterns
+#### Filter Patterns
 
 **Filter Bar (above content):**
 
@@ -236,7 +224,7 @@ Use for complex filtering (10+ filter options):
 - Range sliders
 - "Apply" and "Clear" actions at bottom
 
-### Data Table Patterns
+#### Data Table Patterns
 
 | Element | Implementation |
 |---------|----------------|
@@ -246,7 +234,7 @@ Use for complex filtering (10+ filter options):
 | Pagination | Bottom of table with page size selector |
 | Empty state | Centered message in table body |
 
-### State Management
+#### State Management
 
 | State | Handling |
 |-------|----------|
@@ -256,7 +244,7 @@ Use for complex filtering (10+ filter options):
 | Stale | Show "Last updated" timestamp |
 | Refreshing | Show subtle loading indicator, keep data visible |
 
-### Responsive Behavior
+#### Responsive Behavior
 
 | Breakpoint | KPI Grid | Charts | Tables |
 |------------|----------|--------|--------|
@@ -264,8 +252,6 @@ Use for complex filtering (10+ filter options):
 | Tablet | 2 columns | Full width | Horizontal scroll |
 | Desktop | 4 columns | Grid layout | Full table |
 
----
-
 ## Best Practices
 
 ### Do's
@@ -305,9 +291,14 @@ Use for complex filtering (10+ filter options):
 | Real-time data | Show update indicator, timestamp |
 | Export large datasets | Async export with notification |
 
----
+## Examples
+
+The sidebar-navigation frame above is the canonical mid-fidelity dashboard: a row of KPI cards across the
+top (4 columns on desktop), a primary chart below, and secondary charts beneath that. The data-table
+variant swaps the chart stack for a filters bar, a scrollable table, and pagination — same shell, different
+content body.
 
-## Related Documentation
+## Related
 
 - [Product Design](../design.md) - Sidebar Navigation layout
 - [Accessibility foundations](../../../accessibility/accessibility.md) - Color and contrast

package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/documentation.md

@@ -1,19 +1,18 @@
-# Documentation Scenarios
+# Documentation
 
-Patterns for documentation sites, knowledge bases, API references, and content-heavy pages.
+**User goal:** Find information quickly, understand it, complete tasks with step-by-step guidance, and
+stay oriented throughout.
 
----
+> **Pattern:** *Pages* · single-medium (web-product) — concept and implementation together.
+> Covers documentation sites, knowledge bases, API references, and content-heavy pages.
 
-## Principles
-
-### User Goals
+## Context
 
-- **Find information quickly** - Search and navigate efficiently
-- **Understand content** - Clear, well-structured explanations
-- **Complete tasks** - Step-by-step guidance that works
-- **Stay oriented** - Know where they are and where to go next
+Documentation is where users go to find information, understand how something works, and complete tasks.
+They want to search and navigate efficiently, read clear and well-structured explanations, follow
+step-by-step guidance that works, and always know where they are and where to go next.
 
-### UX Principles
+## Principles
 
 | Principle | Implementation |
 |-----------|----------------|
@@ -22,22 +21,18 @@ Patterns for documentation sites, knowledge bases, API references, and content-h
 | Multiple paths | Search, navigation, breadcrumbs |
 | Progressive detail | Overview first, details on demand |
 
-### Success Metrics
+Success shows up as: search effectiveness (found what they needed), time to find information, page bounce
+rate, and task completion rate for tutorials.
 
-- Search effectiveness (found what they needed)
-- Time to find information
-- Page bounce rate
-- Task completion rate (for tutorials)
+## Solution in web-product
 
----
-
-## Layout
+### Layout
 
 **Base Layout:** Sidebar Navigation + Split Layout
 
 Documentation uses a three-column layout on desktop:
 
-### Docs Landing Page
+#### Docs Landing Page
 
 Use Horizontal Navigation:
 
@@ -57,7 +52,7 @@ Use Horizontal Navigation:
 └─────────────────────────────────────┘
 ```
 
-### Docs Content Page
+#### Docs Content Page
 
 Use Sidebar + Split (three-column):
 
@@ -77,7 +72,7 @@ Use Sidebar + Split (three-column):
 └──────┴──────────────────────────────────┘
 ```
 
-### Specifications
+#### Specifications
 
 | Element | Value |
 |---------|-------|
@@ -86,11 +81,9 @@ Use Sidebar + Split (three-column):
 | Content max-width | 800px (prose) |
 | Content padding | 32-48px |
 
----
-
-## Design
+### Design
 
-### Color Tokens
+#### Color Tokens
 
 | Element | Token |
 |---------|-------|
@@ -101,7 +94,7 @@ Use Sidebar + Split (three-column):
 | Inline code | `bg-muted` |
 | Links | `text-primary` |
 
-### Typography
+#### Typography
 
 | Element | Style |
 |---------|-------|
@@ -112,7 +105,7 @@ Use Sidebar + Split (three-column):
 | Code | `font-mono text-sm` |
 | Sidebar nav | `text-sm` |
 
-### Navigation Sidebar
+#### Navigation Sidebar
 
 | Element | Specification |
 |---------|---------------|
@@ -123,7 +116,7 @@ Use Sidebar + Split (three-column):
 | Sub-pages | Indented, smaller text |
 | Scroll | Independent from content |
 
-### Table of Contents (Right)
+#### Table of Contents (Right)
 
 | Element | Specification |
 |---------|---------------|
@@ -132,11 +125,9 @@ Use Sidebar + Split (three-column):
 | Active tracking | Highlight current section on scroll |
 | Visibility | Hide below 1280px |
 
----
+### Content
 
-## Content
-
-### Page Structure
+#### Page Structure
 
 ```markdown
 # Page Title           ← H1, one per page
@@ -150,7 +141,7 @@ Intro paragraph        ← No heading, describes page purpose
 #### Detail            ← H4, use sparingly
 ```
 
-### Navigation Hierarchy
+#### Navigation Hierarchy
 
 ```
 Getting Started        ← Category (bold, not clickable)
@@ -163,7 +154,7 @@ Components             ← Category
     Examples           ← Sub-page
 ```
 
-### Breadcrumbs
+#### Breadcrumbs
 
 ```
 Docs / Components / Button / Variants
@@ -173,7 +164,7 @@ Docs / Components / Button / Variants
 - All items clickable except current
 - Truncate middle items on mobile if needed
 
-### Previous/Next Navigation
+#### Previous/Next Navigation
 
 ```
 ┌─────────────────────────────────────────┐
@@ -186,9 +177,7 @@ Docs / Components / Button / Variants
 - Based on sidebar navigation order
 - Show page titles, not just "Previous/Next"
 
----
-
-## Accessibility
+### Accessibility
 
 **Base requirements:** See [accessibility foundations](../../../accessibility/accessibility.md) and [web accessibility](../accessibility.md)
 
@@ -203,18 +192,16 @@ Docs / Components / Button / Variants
 | Code blocks | Scrollable with keyboard, screen reader context |
 | Multiple nav labels | `aria-label` to distinguish left vs right sidebars |
 
-### Code Blocks
+#### Code Blocks
 
 - Ensure code blocks are keyboard scrollable
 - Provide language context for screen readers
 - Copy button must be keyboard accessible
 - Don't rely on syntax highlighting alone for meaning
 
----
-
-## Implementation
+### Implementation
 
-### Code Block Patterns
+#### Code Block Patterns
 
 **Inline Code:**
 
@@ -248,7 +235,7 @@ Docs / Components / Button / Variants
 - Preserve selection across page navigation
 - Accessible tab panel pattern
 
-### Search Patterns
+#### Search Patterns
 
 **Search Bar:**
 
@@ -264,7 +251,7 @@ Docs / Components / Button / Variants
 - Keyboard navigation (arrows + enter)
 - Recent searches
 
-### Table of Contents Behavior
+#### Table of Contents Behavior
 
 | Behavior | Implementation |
 |----------|----------------|
@@ -274,7 +261,7 @@ Docs / Components / Button / Variants
 | Hide on small screens | Below 1280px |
 | Collapse | Optionally collapsible |
 
-### Responsive Behavior
+#### Responsive Behavior
 
 | Breakpoint | Left Sidebar | Content | Right Sidebar |
 |------------|--------------|---------|---------------|
@@ -282,8 +269,6 @@ Docs / Components / Button / Variants
 | Tablet | Collapsible | Full width | Hidden |
 | Desktop | Visible (240px) | Centered (max 800px) | Visible (200px) |
 
----
-
 ## Best Practices
 
 ### Do's
@@ -324,9 +309,14 @@ Docs / Components / Button / Variants
 | External links | Mark with icon, open in new tab |
 | Deprecated content | Clear warnings, link to current |
 
----
+## Examples
+
+The three-column docs content page above is the canonical mid-fidelity frame: a left navigation sidebar
+(240-280px) with the doc tree, a centred prose column (max 800px) carrying breadcrumbs, title, and body,
+and a sticky right-hand "On This Page" table of contents. The docs landing page is the same system in a
+horizontal-nav variant — hero search, category cards, popular articles — with the sidebar dropped.
 
-## Related Documentation
+## Related
 
 - [Product Design](../design.md) - Sidebar and Split layouts
 - [Accessibility foundations](../../../accessibility/accessibility.md) - Structure and headings