@schandlergarcia/sf-web-components 1.9.63 → 1.9.65

package/.a4drules/skills/command-center-builder/improved-build-process.md

@@ -1,341 +1,30 @@
-# Improved Dashboard Build Process
+# Dashboard Build Process
 
-## 4-Phase Build Approach
+## 4-Phase Build
 
-Build dashboards in 4 distinct phases with clear separation of concerns:
+Build dashboards in 4 distinct phases. Each phase has a dedicated instruction file with a code template in `.a4drules/phases/`:
 
-### Phase 1: Layout & Structure
-**Goal:** Establish layout, spacing, and component placement
-**Output:** Skeleton with placeholders, no real data or logic
+| Phase | File | Goal | Output |
+|-------|------|------|--------|
+| 1 | `phase-1-layout.md` | Layout & structure | Skeleton with placeholders |
+| 2 | `phase-2-components.md` | Components & sample data | Fully functional UI with mock data |
+| 3 | `phase-3-live-data.md` | Real data integration | Dashboard connected to Salesforce |
+| 4 | `phase-4-agent.md` | Agentforce integration | Eva agent + Salesforce signals |
 
-### Phase 2: Components & Sample Data
-**Goal:** Build all UI components with realistic mock data
-**Output:** Fully functional UI using hardcoded sample data
-
-### Phase 3: Real Data Integration
-**Goal:** Replace sample data with live Salesforce data
-**Output:** Dashboard connected to real data sources
-
-### Phase 4: Agentforce Integration
-**Goal:** Add AI agent capabilities
-**Output:** Eva agent integrated with chat interface
-
----
-
-## Example: Engine Travel Command Center
-
-### Prompt 1 — Layout & Structure
-
-> Load skills: command-center-builder, command-center-project, component-library, outer-app. 
-> Use `docs/engine-command-center-prd.md` as source of truth.
->
-> **Phase 1: Layout Only**
->
-> Scaffold the Engine Travel Command Center structure:
-> 
-> 1. **Header Layout** - Compact dark header with:
->    - Engine logo placeholder (gray box)
->    - Wordmark placeholder
->    - Theme toggle (functional)
->    - Empty space for ChatBar (Phase 4)
->
-> 2. **Hero Section** - Full-width map container:
->    - Empty GeoMap component (no markers, no data)
->    - Placeholder for KPI overlays (gray boxes with labels)
->    - Placeholder for flight status strip (gray bar)
->
-> 3. **Data Panels Grid** - Layout sections with empty cards:
->    - Disruptions panel (left, wide)
->    - Active travelers panel (right, narrow)
->    - Activity feed + chart row
->    - Bookings table section
->    - Policy + spend chart row
->
-> 4. **Theme Setup** - Update brand palette to Engine teal tokens (section 3 PRD)
->
-> 5. **File Structure**:
->    - Create `src/pages/EngineDashboard.tsx`
->    - Wire into `CommandCenter.tsx`
->    - Use placeholder cards: `<BaseCard><div className="h-48 bg-slate-100">Section Name</div></BaseCard>`
->
-> **DO NOT:**
-> - Add any real data or sample data
-> - Build actual components beyond placeholders
-> - Add data fetching logic
-> - Add interactive features beyond theme toggle
->
-> **Deliverable:** A skeleton dashboard with proper layout, spacing, and placeholder cards that shows the structure.
-
----
-
-### Prompt 2 — Components & Sample Data
-
-> Load skills: command-center-builder, command-center-project, component-library.
-> Refer to `docs/engine-command-center-prd.md` sections 7, 8, and 12.
->
-> **Phase 2: Build All Components with Sample Data**
->
-> Replace all placeholders with fully functional components using hardcoded sample data:
->
-> 1. **Create Sample Data File** - `src/data/engine-sample-data.ts`:
->    - Travelers (10 active travelers with names, flights, hotels)
->    - Flights (8 active flights with routes, status, progress %)
->    - Disruptions (3 weather events, 2 delays, 1 cancellation)
->    - Bookings (20 bookings with all fields)
->    - Policy items (5 compliance items with status)
->    - Eva actions (15 recent actions)
->    - Spend history (12 months of data)
->    - Destination stats (top 10 cities)
->
-> 2. **Populate Map** - Wire sample data into GeoMap:
->    - Show markers at origin/destination cities
->    - Draw flight arcs with animated progress dots
->    - Add weather overlays for disrupted areas
->    - Add 4 glass KPI overlays (flights, travelers, disruptions, bookings count)
->    - Add flight status strip with colored status chips
->
-> 3. **Build Disruptions Panel**:
->    - Use ListCard with disruption items
->    - Show severity indicators (red/yellow/blue)
->    - Show affected travelers
->    - Show Eva's actions
->
-> 4. **Build Active Travelers Panel**:
->    - Use ListCard with expandable traveler cards
->    - Click to expand and show flight, hotel, return date
->    - Use Avatar for traveler photos
->    - Show status chips
->
-> 5. **Build Activity Feed + Chart**:
->    - Use FeedPanel for Eva activities
->    - Use ChartCard with bar chart of travelers by destination
->
-> 6. **Build Bookings Table**:
->    - Use TableCard with search, sort, pagination
->    - Show all booking fields from section 12
->    - Add status chips
->
-> 7. **Build Policy + Spend Charts**:
->    - Use StatusCard for policy compliance
->    - Use ChartCard with line chart of monthly spend
->
-> 8. **Add Interactivity**:
->    - Click travelers to expand/collapse
->    - Search/filter bookings table
->    - Sort table columns
->    - Hover map markers for tooltips
->
-> **DO NOT:**
-> - Connect to Salesforce data (use hardcoded data only)
-> - Add data fetching hooks
-> - Add GraphQL queries
-> - Add Agentforce/Eva chat
->
-> **Deliverable:** A fully functional dashboard with all components working using sample data. Everything should look and feel complete, just not connected to live data yet.
-
----
-
-### Prompt 3 — Real Data Integration
-
-> Load skills: command-center-builder, command-center-project, component-library, using-salesforce-data.
-> Refer to `docs/engine-command-center-prd.md` sections 11 and 13.
->
-> **Phase 3: Connect to Salesforce Data**
->
-> Replace sample data with live Salesforce data:
->
-> 1. **Create Data Hooks** - `src/hooks/`:
->    - `useFlights.ts` - Fetch active flights from Flight__c
->    - `useTravelers.ts` - Fetch travelers from Contact with flight relationships
->    - `useDisruptions.ts` - Fetch disruption cases from Case
->    - `useBookings.ts` - Fetch bookings from Booking__c
->    - `usePolicyItems.ts` - Fetch policy compliance from Policy__c
->    - `useEvaActions.ts` - Fetch Eva activity from Eva_Action__c
->    - `useSpendData.ts` - Fetch spend trends from aggregate query
->
-> 2. **GraphQL Queries** - For each hook, write GraphQL:
->    - Use @optional on all fields (FLS resilience)
->    - Include all relationships needed
->    - Add proper filters (Active__c = true, etc.)
->    - Use proper Salesforce field names from section 13
->
-> 3. **Replace Sample Data** - In EngineDashboard.tsx:
->    - Replace hardcoded arrays with hook calls
->    - Add loading states with CardSkeleton
->    - Add error states with EmptyState
->    - Add refresh functionality
->
-> 4. **Data Transformations** - Create `src/utils/engine-data-transforms.ts`:
->    - Transform Salesforce records to map data format
->    - Calculate KPI values from live data
->    - Aggregate data for charts
->    - Format dates, currencies, percentages
->
-> 5. **Real-time Updates** - Add DataModeToggle:
->    - Toggle between "sample" (Phase 2 data) and "live" (Salesforce data)
->    - Store preference in localStorage
->    - Show "Last synced" timestamp for live mode
->
-> 6. **Error Handling**:
->    - Network errors → Show retry button
->    - No data → Show EmptyState with action
->    - Partial data → Show what's available with warning
->
-> **DO NOT:**
-> - Add Agentforce/Eva chat yet
-> - Add complex AI features
-> - Modify component UI (should look same as Phase 2)
->
-> **Deliverable:** Dashboard connected to live Salesforce data with loading states, error handling, and ability to toggle between sample/live data for testing.
-
----
-
-### Prompt 4 — Agentforce Integration
-
-> Load skills: command-center-builder, command-center-project, component-library, managing-agentforce-conversation-client.
-> Refer to `docs/engine-command-center-prd.md` sections 9 and 10.
->
-> **Phase 4: Add Eva Agent**
->
-> Integrate Agentforce Eva agent:
->
-> 1. **Add ChatBar to Header**:
->    - Import ChatBar from @/components/library
->    - Position in header (right side, before theme toggle)
->    - Add keyboard shortcut (Cmd+K / Ctrl+K)
->    - Add starter suggestions:
->      - "Which travelers are affected by disruptions?"
->      - "Show me all delayed flights"
->      - "What's Eva doing right now?"
->      - "Summarize today's travel status"
->
-> 2. **Configure Eva Agent**:
->    - Use Agentforce Eva agent ID from PRD section 9
->    - Configure context: current user, visible data, dashboard state
->    - Add tool calls for dashboard actions:
->      - View traveler details
->      - Filter bookings
->      - Export data
->      - Refresh data
->
-> 3. **Add Salesforce Signals**:
->    - Header: "Powered by Salesforce Data Cloud" badge
->    - Traveler cards: "View in Salesforce" links → open Contact record
->    - Booking rows: "View in Salesforce" links → open Booking__c record
->    - Success toasts on actions: "Updated by Eva" with undo option
->    - Live sync indicator with timestamp
->
-> 4. **Eva Integration Points**:
->    - ChatBar can filter visible data
->    - ChatBar can expand specific travelers
->    - ChatBar can open specific bookings
->    - ChatBar can trigger refreshes
->    - ChatBar shows contextual suggestions based on current view
->
-> 5. **Testing Mode**:
->    - If no Eva agent configured, show mock responses
->    - Add "Configure Eva" EmptyState in ChatBar
->    - Link to Agentforce setup docs
->
-> **Deliverable:** Fully functional dashboard with Eva agent integrated, able to answer questions about travel data and perform dashboard actions.
-
----
+Each phase file is self-contained — it includes the code template, exact imports, and the 5 constraints that matter for that phase. No cross-references needed.
 
 ## Why This Works
 
-### Clear Phases
-Each phase has a single focus:
-1. Structure → Can review layout before building components
-2. Components → Can test UX/interactions before data complexity
-3. Data → Can focus on data fetching/transformation without UI changes
-4. Agent → Can add AI on top of working dashboard
-
-### Easy Testing
-- Phase 1: Review layout, spacing, branding
-- Phase 2: Test all interactions, edge cases with known data
-- Phase 3: Test loading states, errors, real data shapes
-- Phase 4: Test agent responses, tool calls
-
-### Easy Debugging
-- UI issues? → Phase 2
-- Data issues? → Phase 3
-- Agent issues? → Phase 4
-
-### Easy Iterations
-- Don't like layout? → Go back to Phase 1
-- Component not working? → Fix in Phase 2 with sample data
-- Data mapping wrong? → Fix Phase 3 transforms
-- Agent not helpful? → Improve Phase 4 prompts
-
-### Can Stop Early
-- Need just the UI mockup? → Stop after Phase 2
-- Don't have Salesforce yet? → Stop after Phase 2
-- Don't need AI? → Stop after Phase 3
-
----
-
-## Phase Checklist Template
-
-### Phase 1: Layout ✓
-- [ ] Header structure
-- [ ] Hero section containers
-- [ ] Data panel grid
-- [ ] Placeholder cards in place
-- [ ] Theme/branding applied
-- [ ] Proper spacing and responsive layout
-
-### Phase 2: Components ✓
-- [ ] Sample data file created
-- [ ] All components built
-- [ ] All interactions working
-- [ ] All visualizations working
-- [ ] Charts rendering with sample data
-- [ ] Table search/sort/pagination working
-- [ ] Dashboard looks and feels complete
-
-### Phase 3: Data ✓
-- [ ] All data hooks created
-- [ ] All GraphQL queries working
-- [ ] Loading states added
-- [ ] Error states handled
-- [ ] Data transformations working
-- [ ] Live/sample toggle working
-- [ ] Real data rendering correctly
-
-### Phase 4: Agent ✓
-- [ ] ChatBar in header
-- [ ] Eva agent configured
-- [ ] Starter suggestions working
-- [ ] Agent can answer questions
-- [ ] Tool calls working
-- [ ] Salesforce signals added
-- [ ] Links to Salesforce records working
-
----
-
-## Benefits Over Original Approach
-
-### Original Approach Issues:
-- Mixed layout + components + data in early prompts
-- Hard to debug what phase an issue is from
-- No clear stopping point
-- Can't test UI without data
-- Can't review structure before building
-
-### New Approach Benefits:
-- Clear separation of concerns
-- Each phase builds on previous
-- Easy to identify issue source
-- Can demo/test after each phase
-- Can iterate on each phase independently
-- Stakeholders can provide feedback earlier
+- Each phase has a single focus
+- Code templates mean less interpretation, faster builds
+- Self-contained files eliminate contradictions
+- Can stop after any phase (Phase 2 is a complete demo on its own)
 
----
+## Build Prompts
 
-## Notes
+Each phase is triggered by a simple prompt:
 
-- **Always use sample data mode in Phase 2** - DataModeProvider should default to "sample"
-- **Keep Phase 2 data file** - Useful for testing and demos
-- **Test Phase 3 with sample toggle** - Easy to compare live vs sample
-- **Phase 4 is optional** - Many dashboards don't need AI
-- **Can split Phase 2** - If many components, do 2a (map/KPIs) and 2b (panels/tables)
+- Phase 1: "Scaffold the Engine Travel Command Center skeleton"
+- Phase 2: "Replace placeholders with library components and sample data"
+- Phase 3: "Connect the dashboard to live Salesforce data"
+- Phase 4: "Add Eva ChatBar and Salesforce signals"

package/.a4drules/skills/command-center-builder/page-layout.md

@@ -108,9 +108,11 @@ Every dashboard needs a unique layout structure and at least one domain-specific
 
 ## Map Layout
 
-GeoMap should be placed in a **wide/narrow grid** (`lg:grid-cols-3` with `lg:col-span-2`), not full-width hero. Full-width maps dominate the page and waste space.
+**Default pattern:** GeoMap in a **wide/narrow grid** (`lg:grid-cols-3` with `lg:col-span-2`). This works well for dashboards where the map is one of several equal-weight sections.
 
-**Pattern: Map + sidebar at matched height**
+**If the PRD specifies a "visualization-hero" layout**, the map is full-width hero with glass overlays. The PRD always overrides this default pattern.
+
+**Default pattern: Map + sidebar at matched height**
 
 ```jsx
 <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">

package/.a4drules/skills/command-center-guide/SKILL.md

@@ -1,270 +1,36 @@
 ---
 name: command-center-guide
-description: Master guide for building command center dashboards. Routes to the appropriate specialized skills based on task type. Use this when starting any command center work to understand which skills to apply and in what order.
+description: Master guide for building command center dashboards. Routes to the appropriate phase file or reference skill.
 ---
 
 # Command Center Development Guide
 
-This is the master routing guide for building command center dashboards. It helps you understand which skills to use, when to use them, and how they work together.
+## Quick Start
 
-## Available Skills
+For the Engine Travel Command Center, use the phase files in `.a4drules/phases/`:
 
-### Project-Local Skills (in .a4drules/)
+| Phase | File | What to build |
+|-------|------|---------------|
+| 1 | `phase-1-layout.md` | Header, hero map, glass overlays, placeholder panels |
+| 2 | `phase-2-components.md` | Library components + sample data |
+| 3 | `phase-3-live-data.md` | GraphQL hooks + live Salesforce data |
+| 4 | `phase-4-agent.md` | Eva ChatBar + Salesforce signals |
 
-The command center codebase has **4 specialized skills** that work together:
+Each file is self-contained with a code template and exact imports. Complete phases in order.
 
-| Skill Name | Purpose | Line Count | When to Use |
-|------------|---------|------------|-------------|
-| **[component-library](#component-library)** | Complete component API reference | 55 + 8 sub-files | Looking up component props, data shapes, or choosing which component to use |
-| **[command-center-builder](#command-center-builder)** | Dashboard build rules and workflows | 46 + 6 sub-files | Building/editing dashboards, layouts, styling, validation |
-| **[command-center-project](#command-center-project)** | Project structure and routing | 100 lines | Understanding project organization, adding new pages to routes |
-| **[outer-app](#outer-app)** | App shell and global navigation | 61 lines | Modifying header, sidebar, global nav, or app wrapper |
+## Reference Skills (read on demand)
 
-Plus **1 feature rule**:
-- **command-center-dashboard-rule.md** (50 lines) — Automated validation rules for dashboards
+| Skill | When to use |
+|-------|-------------|
+| `component-library/SKILL.md` | Looking up component props or choosing which component to use |
+| `command-center-project/SKILL.md` | Understanding project structure, routing, tech stack |
+| `outer-app/SKILL.md` | Working on the app shell, navigation, or non-dashboard pages |
 
-### Global Skills (from VS Code)
+## Decision Tree
 
-These global Salesforce skills are automatically available and should be referenced when needed:
-
-| Skill Name | Purpose | When to Use |
-|------------|---------|-------------|
-| **accessing-webapp-data** | Data SDK patterns, GraphQL vs REST | Any data fetching from Salesforce |
-| **using-webapp-graphql** | GraphQL query workflow, codegen | Writing GraphQL queries for records |
-| **exploring-webapp-graphql-schema** | Schema exploration, field lookup | Finding available fields on objects |
-| **generating-webapp-graphql-read-query** | Query generation | Creating read queries |
-| **generating-webapp-graphql-mutation-query** | Mutation generation | Creating/updating records |
-| **managing-webapp-agentforce-conversation-client** | Agentforce chat integration | Adding Agentforce agent/chatbot |
-| **building-webapp-react-components** | React patterns, hooks | Building custom React components |
-| **building-webapp-data-visualization** | Charts, graphs, visualizations | Creating data visualizations |
-
-## Decision Tree: Which Skill to Use?
-
-Follow this decision tree to find the right skill:
-
-### 1. Are you building or editing a dashboard page?
-
-**YES** → Use **[command-center-builder](#command-center-builder)**
-
-Start with [getting-started.md](../command-center-builder/getting-started.md) to understand critical requirements, then follow the workflow:
-- Page structure & layout → [page-layout.md](../command-center-builder/page-layout.md)
-- Choosing components → [components-styling.md](../command-center-builder/components-styling.md)
-- Building charts → [charts-visualization.md](../command-center-builder/charts-visualization.md)
-- Validation → [completion-checklist.md](../command-center-builder/completion-checklist.md)
-
-**NO** → Continue to question 2
-
-### 2. Do you need to look up a component's props or data shape?
-
-**YES** → Use **[component-library](#component-library)**
-
-Start with [when-to-use.md](../component-library/when-to-use.md) decision matrix, then go to the relevant detail file:
-- Cards (MetricCard, ChartCard, TableCard, etc.) → [card-components.md](../component-library/card-components.md)
-- Charts & visualizations → [charts.md](../component-library/charts.md)
-- Forms & filters → [forms-filters.md](../component-library/forms-filters.md)
-- Chat & data → [chat-data.md](../component-library/chat-data.md)
-- Advanced components → [hero-ui.md](../component-library/hero-ui.md)
-- Troubleshooting props → [common-mistakes.md](../component-library/common-mistakes.md)
-
-**NO** → Continue to question 3
-
-### 3. Are you adding a new page or modifying routes?
-
-**YES** → Use **[command-center-project](#command-center-project)**
-
-This skill explains:
-- Project structure (`src/pages/`, `src/dashboards/`, etc.)
-- How to register new pages in the router
-- Route configuration
-- Where different file types live
-
-**NO** → Continue to question 4
-
-### 4. Are you connecting to live Salesforce data?
-
-**YES** → Use global skills: **accessing-webapp-data**, **exploring-webapp-graphql-schema**, **using-webapp-graphql**
-
-Workflow:
-1. Explore schema for custom objects
-2. Write GraphQL queries with actual field names
-3. Run codegen for TypeScript types
-4. Create hook with useDataSource for sample/live mode switching
-
-**NO** → Continue to question 5
-
-### 5. Are you adding an Agentforce agent or chatbot?
-
-**YES** → Use global skill: **managing-webapp-agentforce-conversation-client**
-
-Or for simpler chat UI: Use **[component-library](../component-library/chat-data.md)** (ChatBar component)
-
-**NO** → Continue to question 6
-
-### 6. Are you modifying the app shell (header, sidebar, global nav)?
-
-**YES** → Use **[outer-app](#outer-app)**
-
-This skill covers:
-- App wrapper layout
-- Global header component
-- Sidebar navigation
-- Theme/dark mode toggle
-- App-level configuration
-
-**NO** → If none of the above, ask for clarification or check **command-center-builder** as the default.
-
-## Common Workflows
-
-### Workflow 1: Build a New Dashboard from Scratch
-
-1. **[command-center-builder](../command-center-builder/getting-started.md)** — Read STOP and CRITICAL rules first
-2. **[command-center-project](../command-center-project/SKILL.md)** — Understand where to create the page file
-3. **[command-center-builder/page-layout.md](../command-center-builder/page-layout.md)** — Wire up the page and choose layout
-4. **[component-library/when-to-use.md](../component-library/when-to-use.md)** — Choose components from decision matrix
-5. **[component-library](../component-library/SKILL.md)** — Look up exact props for each component
-6. **[command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md)** — If using charts, follow MANDATORY rules
-7. **[command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md)** — Validate before reporting done
-
-### Workflow 1b: Connect Dashboard to Live Salesforce Data
-
-1. **accessing-webapp-data** (global) — Understand Data SDK requirements
-2. **exploring-webapp-graphql-schema** (global) — Explore schema for custom objects (Trip__c, Flight__c, etc.)
-3. **using-webapp-graphql** (global) — Write GraphQL queries, run codegen for types
-4. **[component-library/chat-data.md](../component-library/chat-data.md)** — Use DataModeProvider and useDataSource hook
-5. Create custom hook that transforms live data to match sample data shape
-6. Add DataModeToggle to switch between sample/live modes
-
-### Workflow 2: Add a Chart to an Existing Dashboard
-
-1. **[command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md)** — Read chart requirements
-2. **[component-library/charts.md](../component-library/charts.md)** — Look up D3Chart props and templates
-3. **[component-library/card-components.md](../component-library/card-components.md)** — Look up ChartCard wrapper props
-4. **[command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md)** — Validate chart implementation
-
-### Workflow 3: Troubleshoot a Component Error
-
-1. **[component-library/common-mistakes.md](../component-library/common-mistakes.md)** — Check "Do Not" list for common errors
-2. **[component-library](../component-library/SKILL.md)** — Look up the component in the relevant detail file
-3. Verify you're using exact prop names (not guessing)
-4. Check that you imported from `@/components/library` correctly
-
-### Workflow 4: Style or Theme a Dashboard
-
-1. **[command-center-builder/components-styling.md](../command-center-builder/components-styling.md)** — Brand colors, semantic colors, dark mode
-2. **[component-library/ui-primitives.md](../component-library/ui-primitives.md)** — UI primitives for styling consistency
-3. **[command-center-builder/getting-started.md](../command-center-builder/getting-started.md)** — Image requirements
-
-### Workflow 5: Add Global Navigation or Modify App Shell
-
-1. **[outer-app](../outer-app/SKILL.md)** — App shell structure and header/sidebar
-2. **[command-center-project](../command-center-project/SKILL.md)** — Router configuration if adding nav links
-
-### Workflow 6: Add Agentforce Agent/Chatbot
-
-1. **managing-webapp-agentforce-conversation-client** (global) — Complete integration guide
-2. **[component-library/chat-data.md](../component-library/chat-data.md)** — For ChatBar component (simpler alternative)
-3. Ask user for agent ID if not already configured
-4. Configure inline vs floating mode, styling, dimensions
-
-## Skill Interaction Rules
-
-### component-library vs command-center-builder
-
-- **component-library** = WHAT (exact props, data shapes, API reference)
-- **command-center-builder** = WHEN & HOW (which component to use, layout patterns, validation rules)
-
-**Use both together:** command-center-builder tells you which component to use, component-library tells you how to use it.
-
-### command-center-project vs outer-app
-
-- **command-center-project** = Dashboard pages and routing
-- **outer-app** = App wrapper and global navigation
-
-**Boundary:** If it's inside `src/dashboards/` → command-center-project. If it's in `App.tsx` or global layout → outer-app.
-
-### When to Read Multiple Skills
-
-Some tasks require multiple skills in sequence:
-
-- **Building a new dashboard** → command-center-builder + component-library + command-center-project
-- **Adding a chart** → command-center-builder + component-library
-- **Modifying navigation** → outer-app + command-center-project
-- **Troubleshooting** → component-library (common-mistakes) first, then command-center-builder
-
-## Critical Reminders
-
-1. **ALWAYS start with command-center-builder/getting-started.md** before building any dashboard
-2. **NEVER guess component prop names** — look them up in component-library
-3. **NEVER hand-roll HTML cards** — use library components only
-4. **ALWAYS run the completion checklist** before reporting done
-5. **Dark mode is MANDATORY** — check all color choices support it
-6. **Images are MANDATORY** — every dashboard needs visuals
-
-## Feature Rule
-
-The **command-center-dashboard-rule.md** feature provides automated validation. It checks:
-- Component usage (library components vs hand-rolled HTML)
-- Dark mode compliance
-- Image presence
-- Chart implementation
-- Navigation structure
-
-This rule runs automatically during validation. See [completion-checklist.md](../command-center-builder/completion-checklist.md) for details.
-
-## File Organization Summary
-
-All skills are split into sub-files (<300 lines each) for easier navigation:
-
-```
-.a4drules/
-├── features/
-│   └── command-center-dashboard-rule.md (50 lines)
-└── skills/
-    ├── command-center-guide/          ← YOU ARE HERE
-    │   └── SKILL.md (this file)
-    ├── component-library/
-    │   ├── SKILL.md (55 lines - routing file)
-    │   ├── when-to-use.md (39 lines)
-    │   ├── card-components.md (253 lines)
-    │   ├── charts.md (64 lines)
-    │   ├── ui-primitives.md (92 lines)
-    │   ├── forms-filters.md (130 lines)
-    │   ├── chat-data.md (184 lines)
-    │   ├── hero-ui.md (211 lines)
-    │   └── common-mistakes.md (25 lines)
-    ├── command-center-builder/
-    │   ├── SKILL.md (46 lines - routing file)
-    │   ├── getting-started.md (127 lines)
-    │   ├── page-layout.md (143 lines)
-    │   ├── components-styling.md (97 lines)
-    │   ├── data-forms-ai.md (43 lines)
-    │   ├── charts-visualization.md (136 lines)
-    │   └── completion-checklist.md (87 lines)
-    ├── command-center-project/
-    │   └── SKILL.md (100 lines)
-    └── outer-app/
-        └── SKILL.md (61 lines)
-```
-
-## Quick Reference Card
-
-| I need to... | Start here |
-|-------------|------------|
-| Build a new dashboard | [command-center-builder/getting-started.md](../command-center-builder/getting-started.md) |
-| Look up a component's props | [component-library/when-to-use.md](../component-library/when-to-use.md) → relevant detail file |
-| Add a new page to routes | [command-center-project](../command-center-project/SKILL.md) |
-| Modify header or sidebar | [outer-app](../outer-app/SKILL.md) |
-| Build a chart | [command-center-builder/charts-visualization.md](../command-center-builder/charts-visualization.md) |
-| Fix a component error | [component-library/common-mistakes.md](../component-library/common-mistakes.md) |
-| Validate before reporting done | [command-center-builder/completion-checklist.md](../command-center-builder/completion-checklist.md) |
-| Understand project structure | [command-center-project](../command-center-project/SKILL.md) |
-
-## Getting Help
-
-If you're unsure which skill to use:
-1. Start with this guide's decision tree
-2. Check the Quick Reference Card above
-3. When in doubt, start with **command-center-builder** for dashboard work
-4. Use **component-library** for any component prop lookups
-
-Remember: **Skills are split for easier navigation, not sequential reading.** Use the decision tree to jump directly to what you need.
+1. **Building the Engine dashboard?** → Read the phase file for your current phase
+2. **Need component API details?** → Read `component-library/SKILL.md` → relevant sub-file
+3. **Adding routes or pages?** → Read `command-center-project/SKILL.md`
+4. **Working on app shell/nav?** → Read `outer-app/SKILL.md`
+5. **Connecting to live data?** → Phase 3 file + global skills: `exploring-webapp-graphql-schema`, `using-webapp-graphql`
+6. **Adding Agentforce agent?** → Phase 4 file + global skill: `managing-webapp-agentforce-conversation-client`