@salesforce/webapp-template-app-react-template-b2x-experimental 1.81.0 → 1.83.0

package/dist/.a4drules/skills/webapp-csp-trusted-sites/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: webapp-csp-trusted-sites
+description: Creates Salesforce CSP Trusted Site metadata when adding external domains. Use when the user adds an external API, CDN, image host, font provider, map tile server, or any third-party URL that the web application needs to load resources from — or when a browser console shows a CSP violation error.
+---
+
+# CSP Trusted Sites
+
+## When to Use
+
+Use this skill whenever the application references a new external domain that is not already registered as a CSP Trusted Site. This includes:
+
+- Adding images from a new CDN (Unsplash, Pexels, Cloudinary, etc.)
+- Loading fonts from an external provider (Google Fonts, Adobe Fonts)
+- Calling a third-party API (Open-Meteo, Nominatim, Mapbox, etc.)
+- Loading map tiles from a tile server (OpenStreetMap, Mapbox)
+- Embedding iframes from external services (YouTube, Vimeo)
+- Loading external stylesheets or scripts
+
+Salesforce enforces Content Security Policy (CSP) headers on all web applications. Any external domain not registered as a CSP Trusted Site will be blocked by the browser, causing images to not load, API calls to fail, or fonts to be missing.
+
+**Reference:** [Salesforce CspTrustedSite Object Reference](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_csptrustedsite.htm)
+
+---
+
+## Step 1 — Identify external domains
+
+Scan the code for any URLs pointing to external domains. Common patterns:
+
+- `fetch("https://api.example.com/...")` — API calls
+- `<img src="https://images.example.com/..." />` — images
+- `<link href="https://fonts.example.com/..." />` — stylesheets
+- `url="https://tiles.example.com/{z}/{x}/{y}.png"` — map tiles
+- `@import url("https://cdn.example.com/...")` — CSS imports
+
+Extract the **origin** (scheme + host) from each URL. For example:
+- `https://api.open-meteo.com/v1/forecast?lat=...` → `https://api.open-meteo.com`
+- `https://images.unsplash.com/photo-123?w=800` → `https://images.unsplash.com`
+
+---
+
+## Step 2 — Check existing CSP Trusted Sites
+
+Before creating a new file, check if the domain already has a CSP Trusted Site:
+
+```bash
+ls force-app/main/default/cspTrustedSites/
+```
+
+If the domain is already registered, no action is needed.
+
+---
+
+## Step 3 — Determine the CSP directive(s)
+
+Map the resource type to the correct CSP `isApplicableTo*Src` fields. Read `implementation/metadata-format.md` for the full reference.
+
+Quick reference:
+
+| Resource type | CSP directive field(s) to set `true` |
+|--------------|--------------------------------------|
+| Images (img, background-image) | `isApplicableToImgSrc` |
+| API calls (fetch, XMLHttpRequest) | `isApplicableToConnectSrc` |
+| Fonts (.woff, .woff2, .ttf) | `isApplicableToFontSrc` |
+| Stylesheets (CSS) | `isApplicableToStyleSrc` |
+| Video / audio | `isApplicableToMediaSrc` |
+| Iframes | `isApplicableToFrameSrc` |
+
+**Always also set `isApplicableToConnectSrc` to `true`** — most resources also require connect-src for preflight/redirect handling.
+
+---
+
+## Step 4 — Create the metadata file
+
+Read `implementation/metadata-format.md` and follow the instructions to create the `.cspTrustedSite-meta.xml` file.
+
+---
+
+## Step 5 — Verify
+
+1. Confirm the file is valid XML and matches the expected schema.
+2. Confirm the file is placed in `force-app/main/default/cspTrustedSites/`.
+3. Confirm only the necessary `isApplicableTo*Src` fields are set to `true`.
+4. Run from the web app directory:
+
+```bash
+cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
+```
+
+- **Lint:** MUST result in 0 errors.
+- **Build:** MUST succeed.

package/dist/.a4drules/skills/webapp-csp-trusted-sites/implementation/metadata-format.md

@@ -0,0 +1,281 @@
+# CSP Trusted Site Metadata — Implementation Guide
+
+## File location
+
+```
+force-app/main/default/cspTrustedSites/{Name}.cspTrustedSite-meta.xml
+```
+
+The `cspTrustedSites/` directory must be a direct child of `force-app/main/default/`. Create it if it does not exist.
+
+---
+
+## File naming convention
+
+The file name must match the `<fullName>` value inside the XML, with `.cspTrustedSite-meta.xml` appended.
+
+| Domain | fullName | File name |
+|--------|----------|-----------|
+| `https://images.unsplash.com` | `Unsplash_Images` | `Unsplash_Images.cspTrustedSite-meta.xml` |
+| `https://api.open-meteo.com` | `Open_Meteo_API` | `Open_Meteo_API.cspTrustedSite-meta.xml` |
+| `https://tile.openstreetmap.org` | `OpenStreetMap_Tiles` | `OpenStreetMap_Tiles.cspTrustedSite-meta.xml` |
+
+**Naming rules:**
+- Use PascalCase with underscores separating words (e.g. `Google_Fonts_Static`)
+- Name should describe the provider and resource type (e.g. `Pexels_Videos`, not just `Pexels`)
+- Must be unique across the org
+- Maximum 80 characters
+
+---
+
+## XML template
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>{UNIQUE_NAME}</fullName>
+    <description>{DESCRIPTION}</description>
+    <endpointUrl>{HTTPS_ORIGIN}</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>{true|false}</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>{true|false}</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>{true|false}</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>{true|false}</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>{true|false}</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>{true|false}</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+---
+
+## Field reference
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `fullName` | Yes | Unique API name. Must match the file name (before `.cspTrustedSite-meta.xml`). |
+| `description` | Yes | Human-readable purpose. Start with "Allow access to..." |
+| `endpointUrl` | Yes | The external origin (scheme + host). Must start with `https://`. No trailing slash. No path. |
+| `isActive` | Yes | Always `true` for new entries. Set `false` to disable without deleting. |
+| `context` | Yes | `All` (applies to all contexts). Other values: `LEX` (Lightning Experience only), `Communities` (Experience Cloud only), `VisualForce`. Use `All` unless there is a specific reason to restrict. |
+| `isApplicableToConnectSrc` | Yes | `true` if the domain is called via `fetch()`, `XMLHttpRequest`, or WebSocket. |
+| `isApplicableToFontSrc` | Yes | `true` if the domain serves font files (`.woff`, `.woff2`, `.ttf`, `.otf`). |
+| `isApplicableToFrameSrc` | Yes | `true` if the domain is loaded in an `<iframe>` or `<object>`. |
+| `isApplicableToImgSrc` | Yes | `true` if the domain serves images (`<img>`, CSS `background-image`, `<svg>`). |
+| `isApplicableToMediaSrc` | Yes | `true` if the domain serves audio or video (`<audio>`, `<video>`). |
+| `isApplicableToStyleSrc` | Yes | `true` if the domain serves CSS stylesheets (`<link rel="stylesheet">`). |
+
+**Reference:** [CspTrustedSite — Salesforce Object Reference](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_csptrustedsite.htm)
+
+---
+
+## CSP directive mapping
+
+| CSP header directive | Metadata field | What it allows |
+|---------------------|----------------|----------------|
+| `connect-src` | `isApplicableToConnectSrc` | `fetch()`, `XMLHttpRequest`, WebSocket, `EventSource` |
+| `font-src` | `isApplicableToFontSrc` | `@font-face` sources |
+| `frame-src` | `isApplicableToFrameSrc` | `<iframe>`, `<frame>`, `<object>`, `<embed>` |
+| `img-src` | `isApplicableToImgSrc` | `<img>`, `background-image`, `favicon`, `<picture>` |
+| `media-src` | `isApplicableToMediaSrc` | `<audio>`, `<video>`, `<source>`, `<track>` |
+| `style-src` | `isApplicableToStyleSrc` | `<link rel="stylesheet">`, `@import` in CSS |
+
+---
+
+## Common external domains and their directives
+
+Use this table as a quick reference when adding new domains:
+
+| Domain | connect-src | font-src | frame-src | img-src | media-src | style-src |
+|--------|:-----------:|:--------:|:---------:|:-------:|:---------:|:---------:|
+| `https://images.unsplash.com` | true | false | false | true | false | false |
+| `https://images.pexels.com` | true | false | false | true | false | false |
+| `https://videos.pexels.com` | true | false | false | false | true | false |
+| `https://fonts.googleapis.com` | true | false | false | false | false | true |
+| `https://fonts.gstatic.com` | true | true | false | false | false | false |
+| `https://avatars.githubusercontent.com` | true | false | false | true | false | false |
+| `https://api.open-meteo.com` | true | false | false | false | false | false |
+| `https://nominatim.openstreetmap.org` | true | false | false | false | false | false |
+| `https://tile.openstreetmap.org` | true | false | false | true | false | false |
+| `https://api.mapbox.com` | true | false | false | true | false | false |
+| `https://cdn.jsdelivr.net` | true | false | false | false | false | true |
+| `https://www.youtube.com` | false | false | true | true | false | false |
+| `https://player.vimeo.com` | false | false | true | false | false | false |
+| `https://res.cloudinary.com` | true | false | false | true | false | false |
+
+---
+
+## Complete examples
+
+### Image CDN (Unsplash)
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Unsplash_Images</fullName>
+    <description>Allow access to Unsplash image content for static app media</description>
+    <endpointUrl>https://images.unsplash.com</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>true</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+### REST API (Open-Meteo weather)
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Open_Meteo_API</fullName>
+    <description>Allow access to Open-Meteo weather forecast API</description>
+    <endpointUrl>https://api.open-meteo.com</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>false</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+### Font provider (Google Fonts — requires two entries)
+
+Google Fonts needs two CSP entries because CSS is served from `fonts.googleapis.com` and font files from `fonts.gstatic.com`:
+
+**Entry 1: Stylesheets**
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Google_Fonts</fullName>
+    <description>Allow access to Google Fonts stylesheets for custom typography</description>
+    <endpointUrl>https://fonts.googleapis.com</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>false</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>true</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+**Entry 2: Font files**
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>Google_Fonts_Static</fullName>
+    <description>Allow access to Google Fonts static files for font loading</description>
+    <endpointUrl>https://fonts.gstatic.com</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>true</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>false</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+### Map tiles (OpenStreetMap)
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>OpenStreetMap_Tiles</fullName>
+    <description>Allow access to OpenStreetMap tile images for map rendering</description>
+    <endpointUrl>https://tile.openstreetmap.org</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>true</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+### Geocoding API (Nominatim)
+
+```xml
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <fullName>OpenStreetMap_Nominatim</fullName>
+    <description>Allow access to OpenStreetMap Nominatim geocoding API</description>
+    <endpointUrl>https://nominatim.openstreetmap.org</endpointUrl>
+    <isActive>true</isActive>
+    <context>All</context>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>false</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>
+```
+
+---
+
+## Endpoint URL rules
+
+| Rule | Correct | Incorrect |
+|------|---------|-----------|
+| Must be HTTPS | `https://api.example.com` | `http://api.example.com` |
+| No trailing slash | `https://api.example.com` | `https://api.example.com/` |
+| No path | `https://api.example.com` | `https://api.example.com/v1/forecast` |
+| No port (unless non-standard) | `https://api.example.com` | `https://api.example.com:443` |
+| No wildcards | `https://api.example.com` | `https://*.example.com` |
+
+Each subdomain needs its own entry. For example, `fonts.googleapis.com` and `fonts.gstatic.com` are separate entries.
+
+---
+
+## When a service requires multiple domains
+
+Some services split resources across multiple subdomains. Create one CSP Trusted Site per domain:
+
+| Service | Domains needed |
+|---------|---------------|
+| Google Fonts | `fonts.googleapis.com` (CSS) + `fonts.gstatic.com` (font files) |
+| Mapbox | `api.mapbox.com` (tiles/API) + `events.mapbox.com` (telemetry) |
+| YouTube embed | `www.youtube.com` (iframe) + `i.ytimg.com` (thumbnails) |
+| Cloudflare CDN | `cdnjs.cloudflare.com` (scripts/CSS) |
+
+---
+
+## Troubleshooting CSP violations
+
+If the browser console shows a CSP error like:
+
+```
+Refused to load the image 'https://example.com/image.png' because it violates
+the following Content Security Policy directive: "img-src 'self' ..."
+```
+
+1. Extract the **blocked origin** from the URL (e.g. `https://example.com`).
+2. Identify the **directive** from the error message (e.g. `img-src` → `isApplicableToImgSrc`).
+3. Check if a CSP Trusted Site already exists for that origin.
+4. If not, create one using this skill.
+5. Deploy the metadata and refresh the page.
+
+---
+
+## Common mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Including a path in `endpointUrl` | Use only the origin: `https://api.example.com` |
+| Adding trailing slash | Remove it: `https://api.example.com` not `https://api.example.com/` |
+| Using HTTP instead of HTTPS | Salesforce requires HTTPS. If the service only supports HTTP, it cannot be added. |
+| Forgetting `isApplicableToConnectSrc` | Most resources also need connect-src for redirects/preflight. Set to `true` by default. |
+| One entry for multiple subdomains | Each subdomain needs its own file (e.g. `api.example.com` and `cdn.example.com` are separate) |
+| File name doesn't match `fullName` | They must be identical (excluding the `.cspTrustedSite-meta.xml` extension) |

package/dist/.a4drules/skills/{webapp-add-react-component → webapp-react-add-component}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-add-react-component
+name: webapp-react-add-component
 description: Creates React components, pages, headers, and footers using shadcn UI and Tailwind CSS. Use when the user asks to create a component, add a widget, build a UI element, add a page, create a new page, add a section (e.g. "add a contacts page"), add a header, add a footer, add a navigation bar, or add anything to the web application.
 ---
 

package/dist/.a4drules/skills/webapp-react-data-visualization/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: webapp-react-data-visualization
+description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
+---
+
+# Data Visualization
+
+## When to Use
+
+Use this skill when:
+- Adding charts (donut, pie, bar, line, area) to a dashboard or analytics page
+- Displaying KPI/metric stat cards with trend indicators
+- Building a dashboard layout with mixed chart types and summary cards
+
+---
+
+## Step 1 — Determine the visualization type
+
+Identify what the user needs:
+
+- **Donut / pie chart** — categorical breakdown (e.g. issue types, status distribution)
+- **Bar chart** — comparison across categories or time periods
+- **Line / area chart** — trends over time
+- **Stat card** — single KPI metric with optional trend indicator
+- **Combined dashboard** — stat cards + one or more charts
+
+If unclear, ask:
+
+> "What data should the chart display, and would a donut chart, bar chart, line chart, or stat cards work best?"
+
+---
+
+## Step 2 — Install dependencies
+
+All chart types in this skill use **recharts**. Install once from the web app directory:
+
+```bash
+npm install recharts
+```
+
+Recharts is built on D3 and provides declarative React components. No additional CSS is needed.
+
+---
+
+## Step 3 — Choose implementation path
+
+Read the corresponding guide:
+
+- **Bar chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
+- **Line / area chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
+- **Donut / pie chart** — read `implementation/donut-chart.md`
+- **Stat card with trend** — read `implementation/stat-card.md`
+- **Dashboard layout** — read `implementation/dashboard-layout.md`
+
+---
+
+## Verification
+
+Before completing:
+
+1. Chart renders with correct data and colors.
+2. Chart is responsive (resizes with container).
+3. Legend labels match the data categories.
+4. Stat card trends display correct positive/negative indicators.
+5. Run from the web app directory:
+
+```bash
+cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
+```
+
+- **Lint:** MUST result in 0 errors.
+- **Build:** MUST succeed.

package/dist/.a4drules/skills/webapp-react-data-visualization/implementation/dashboard-layout.md

@@ -0,0 +1,189 @@
+# Dashboard Layout — Implementation Guide
+
+## Anatomy of a dashboard page
+
+A typical dashboard combines stat cards, charts, and data tables:
+
+```
+┌────────────────────────────────────────────────────┐
+│  Search / global action bar                         │
+├──────────┬──────────┬──────────────────────────────┤
+│ Stat 1   │ Stat 2   │ Stat 3                       │
+├──────────┴──────────┴──────┬───────────────────────┤
+│                            │                       │
+│  Data table / list         │  Donut chart          │
+│  (70% width)               │  (30% width)          │
+│                            │                       │
+└────────────────────────────┴───────────────────────┘
+```
+
+---
+
+## Layout implementation
+
+```tsx
+import { PageContainer } from "@/components/layout/PageContainer";
+import { StatCard } from "@/components/StatCard";
+import { DonutChart } from "@/components/DonutChart";
+
+export default function Dashboard() {
+  return (
+    <PageContainer>
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Search bar */}
+        <div>{/* global search component */}</div>
+
+        {/* Main content: 70/30 split */}
+        <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
+          <div className="space-y-6">
+            {/* Stat cards row */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <StatCard title="Metric A" value={42} />
+              <StatCard title="Metric B" value={18} />
+              <StatCard title="Metric C" value={7} />
+            </div>
+
+            {/* Data table */}
+            <div>{/* table component */}</div>
+          </div>
+
+          {/* Sidebar chart */}
+          <div>
+            <DonutChart title="Distribution" data={chartData} />
+          </div>
+        </div>
+      </div>
+    </PageContainer>
+  );
+}
+```
+
+---
+
+## Responsive behavior
+
+| Breakpoint | Layout |
+|------------|--------|
+| Mobile (`< 768px`) | Single column, everything stacked |
+| Tablet (`md`) | Stat cards in 3-col grid, rest stacked |
+| Desktop (`lg`) | 70/30 split for table + chart |
+
+Key Tailwind classes:
+
+```
+grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6
+grid grid-cols-1 md:grid-cols-3 gap-6
+```
+
+---
+
+## Loading state
+
+Show a full-page loading state while dashboard data is being fetched:
+
+```tsx
+if (loading) {
+  return (
+    <PageContainer>
+      <div className="flex items-center justify-center min-h-[400px]">
+        <p className="text-muted-foreground">Loading dashboard…</p>
+      </div>
+    </PageContainer>
+  );
+}
+```
+
+Or use a skeleton layout:
+
+```tsx
+if (loading) {
+  return (
+    <PageContainer>
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-28 animate-pulse rounded-xl bg-muted" />
+          ))}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6">
+          <div className="h-64 animate-pulse rounded-xl bg-muted" />
+          <div className="h-64 animate-pulse rounded-xl bg-muted" />
+        </div>
+      </div>
+    </PageContainer>
+  );
+}
+```
+
+---
+
+## Data fetching pattern
+
+Use `useEffect` with cancellation for dashboard metrics:
+
+```ts
+const [metrics, setMetrics] = useState<Metrics | null>(null);
+const [loading, setLoading] = useState(true);
+
+useEffect(() => {
+  let cancelled = false;
+  (async () => {
+    try {
+      setLoading(true);
+      const data = await fetchDashboardMetrics();
+      if (!cancelled) setMetrics(data);
+    } catch (error) {
+      if (!cancelled) console.error("Error loading metrics:", error);
+    } finally {
+      if (!cancelled) setLoading(false);
+    }
+  })();
+  return () => { cancelled = true; };
+}, []);
+```
+
+---
+
+## Combining multiple data sources
+
+Dashboards often aggregate data from several APIs. Load them in parallel:
+
+```ts
+const [metrics, setMetrics] = useState<Metrics | null>(null);
+const [requests, setRequests] = useState<Request[]>([]);
+const [loading, setLoading] = useState(true);
+
+useEffect(() => {
+  let cancelled = false;
+  Promise.all([fetchMetrics(), fetchRecentRequests()])
+    .then(([metricsData, requestsData]) => {
+      if (!cancelled) {
+        setMetrics(metricsData);
+        setRequests(requestsData);
+      }
+    })
+    .catch((err) => {
+      if (!cancelled) console.error(err);
+    })
+    .finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+  return () => { cancelled = true; };
+}, []);
+```
+
+---
+
+## PageContainer wrapper
+
+A simple wrapper for consistent page padding:
+
+```tsx
+interface PageContainerProps {
+  children: React.ReactNode;
+}
+
+export function PageContainer({ children }: PageContainerProps) {
+  return <div className="p-6">{children}</div>;
+}
+```