@schandlergarcia/sf-web-components 1.0.0 → 1.0.1

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

@@ -0,0 +1,103 @@
+---
+name: command-center-project
+description: >-
+  Project architecture, tech stack, and conventions for the enginebespokeapp.
+  Use when building components, pages, or features in this project, or when
+  asking about its structure, patterns, or conventions.
+---
+
+# Enginebespokeapp — Project Context
+
+Vite 7 + React 19 + TypeScript 5.9 + Tailwind CSS 4 + React Router 7. SPA (not Next.js).
+
+## Tech Stack
+
+- **Build:** Vite 7 (`@tailwindcss/vite` plugin, `@vitejs/plugin-react`)
+- **Routing:** React Router 7 (`createBrowserRouter` in `src/app.tsx`, routes in `src/routes.tsx`)
+- **Styling:** Tailwind CSS 4 + two parallel UI systems (see below)
+- **Testing:** Vitest 4 (unit) + Playwright (e2e)
+- **Salesforce:** SDKs linked via `file:` refs; stubbed in standalone mode (`src/stubs/`)
+- **Install:** Always use `npm install --legacy-peer-deps` for dependency conflicts.
+
+## Project Structure
+
+```
+src/
+├── app.tsx                    # Entry: creates router, renders into #root
+├── routes.tsx                 # Route definitions (RouteObject[])
+├── appLayout.tsx              # Outer app shell (nav + Outlet)
+├── styles/global.css          # Tailwind + HeroUI + shadcn + brand tokens
+├── lib/utils.ts               # cn() helper (clsx + tailwind-merge)
+├── pages/                     # App-level pages (Home, NotFound)
+├── features/                  # Feature modules (global-search)
+│   └── global-search/         # Search API, components, hooks
+├── components/
+│   ├── library/               # Vendored command-center component library (.jsx files)
+│   ├── workspace/             # ComponentRegistry.jsx (schema renderer)
+│   ├── pages/                 # Dashboard pages (CommandCenter.tsx wraps active dashboard)
+│   ├── ui/                    # shadcn/ui components (button, card, dialog, etc.)
+│   ├── alerts/                # StatusAlert (CVA + Lucide)
+│   └── layouts/               # CardLayout (uses shadcn Card)
+└── stubs/                     # No-op stubs for standalone dev (sdk-data, webapp-experimental, agentforce)
+```
+
+## Two UI Systems
+
+This project runs **two parallel UI systems** with separate scoping:
+
+1. **shadcn/ui** (`src/components/ui/`) — Used by the outer app (auth pages, search, layouts). Uses Radix UI + Lucide icons + CVA. Helper: `cn()` from `src/lib/utils.ts`.
+
+2. **Command Center library** (`src/components/library/`) — Used by the dashboard at `/` (rendered via `Home.tsx` → `CommandCenter.tsx`). Uses HeroUI + Heroicons + custom cards/charts. Barrel: `@/components/library`.
+
+**CSS scoping:** The `.heroui-scope` class in `global.css` restores HeroUI theme variables inside the command center, because shadcn redefines `--muted`, `--accent`, etc. with different semantics.
+
+**Never mix these systems.** Don't import shadcn components into command center pages, and don't import library components into outer app pages.
+
+## Route Architecture
+
+All routes live under `AppLayout` in `src/routes.tsx`:
+
+| Route | Content | Notes |
+|-------|---------|-------|
+| `/` (index) | `Home` → `CommandCenter` | Dashboard with providers (`AppThemeProvider`, `DataModeProvider`), wrapped in `heroui-scope` |
+| `/search` | Search page | Global search input (shadcn/outer app) |
+| `/global-search/:query` | Search results | Results + filters (shadcn/outer app) |
+| `/object/:objectApiName/:recordId` | Detail page | Record detail (shadcn/outer app) |
+
+The command center renders at `/` inside the app layout shell. Its `heroui-scope` wrapper isolates HeroUI theme variables.
+
+## Path Aliases
+
+Configured in both `vite.config.ts` and `tsconfig.json`:
+
+- `@/` → `src/` (primary — use this)
+- `@components/` → `src/components/`
+- `@api/` → `src/api/`
+- `@utils/` → `src/utils/`
+- `@styles/` → `src/styles/`
+- `@assets/` → `src/assets/`
+
+## Key Conventions
+
+- **Dashboard pages** go in `src/components/pages/`. Wire into `CommandCenter.tsx` by importing and rendering.
+- **Outer app pages** go in `src/pages/` or `src/features/*/pages/`. Wire into `src/routes.tsx`.
+- **TypeScript** for outer app code (`.tsx`/`.ts`). **JSX** for command center library and dashboard pages (`.jsx`).
+- **Component library** is a vendored copy from command-center-starter — not an npm package. Changes sync manually.
+- Vite config has `loader: { '.js': 'jsx' }` in `optimizeDeps` to support the `.js`→JSX library files.
+- **Reset script:** `npm run reset:command-center` wipes custom dashboards and restores blank canvas.
+
+## Naming
+
+- Page IDs: kebab-case (`"fleet-status"`)
+- Page titles: Title Case (`"Fleet Status"`)
+- Registry types: PascalCase (`"MetricCard"`)
+- Component files: PascalCase (`FleetStatus.js`)
+- Styling: Tailwind only. No CSS Modules, no inline styles for layout.
+
+## Scripts
+
+- `npm run dev` — Start dev server
+- `npm run dev:design` — Design mode (standalone)
+- `npm run build` — TypeScript check + Vite build
+- `npm run test` — Vitest
+- `npm run reset:command-center` — Reset dashboard to blank canvas