@schandlergarcia/sf-web-components 1.9.33 → 1.9.35

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

@@ -9,6 +9,8 @@ This is the master routing guide for building command center dashboards. It help
 
 ## Available Skills
 
+### Project-Local Skills (in .a4drules/)
+
 The command center codebase has **4 specialized skills** that work together:
 
 | Skill Name | Purpose | Line Count | When to Use |
@@ -21,6 +23,21 @@ The command center codebase has **4 specialized skills** that work together:
 Plus **1 feature rule**:
 - **command-center-dashboard-rule.md** (50 lines) — Automated validation rules for dashboards
 
+### Global Skills (from VS Code)
+
+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:
@@ -63,7 +80,27 @@ This skill explains:
 
 **NO** → Continue to question 4
 
-### 4. Are you modifying the app shell (header, sidebar, global nav)?
+### 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)**
 
@@ -88,6 +125,15 @@ This skill covers:
 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
@@ -113,6 +159,13 @@ This skill covers:
 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.33",
+  "version": "1.9.35",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,6 +35,7 @@
     "build": "vite build && cp -r src/styles dist/",
     "build:types": "tsc --emitDeclarationOnly",
     "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/postinstall.mjs",
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",
     "graphql:schema": "node scripts/get-graphql-schema.mjs"