@valentia-ai-skills/framework 1.0.12 → 1.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valentia-ai-skills/framework",
-  "version": "1.0.12",
-  "description": "AI development skills framework — centralized coding standards, security patterns, and SOPs for AI-assisted development. Works with Claude Code, Cursor, Copilot, Windsurf, and any AI coding tool.",
+  "version": "1.0.14",
+  "description": "AI development skills framework — centralized coding standards, security patterns, and SOPs for AI-assisted development. Works with Claude Code, Cursor, Copilot, Windsurf, and any AI coding tool.",
   "keywords": [
     "ai-skills",
     "claude-code",

package/skills/global/aisupportapp-project-architecture/SKILL.md

@@ -0,0 +1,194 @@
+---
+name: aisupportapp/project-architecture
+description: Auto-generated project-architecture for aisupportapp. Created by project-scanner.
+version: 1.0.0
+scope: project
+last_reviewed: 2026-03-27
+---
+
+---
+name: project-architecture
+description: Architecture overview, data flow, layer diagram, and key abstractions for aiSupportApp — a single-page multi-step appointment booking wizard.
+---
+
+# Project Architecture — aiSupportApp
+
+## Architecture Pattern
+
+**Single-Page Application (SPA) with Wizard State Machine**
+
+The app is a single-route React SPA orchestrated around a sequential, numbered step wizard. State is managed centrally in Redux (single slice). There is no server-side rendering, no API routes, and no backend in this repo. All data comes from an external REST API (`bookinggateway.vitonta.com`).
+
+---
+
+## Provider Hierarchy (Entry Point)
+
+`src/main.tsx` establishes the provider stack from outermost to innermost:
+
+```
+GoogleReCaptchaProvider     ← Google reCAPTCHA v3 (bot protection)
+  └─ Provider (Redux)       ← Global state store
+       └─ MantineProvider   ← UI theme & component defaults
+            └─ ModalsProvider  ← Mantine modal context
+                 ├─ Notifications (top-right)
+                 └─ RouterProvider  ← react-router-dom BrowserRouter
+```
+
+---
+
+## Routing Layer
+
+`src/router/index.tsx` — Two routes, both rendering `BookingPage`:
+
+| Route | Component |
+|---|---|
+| `/` | `BookingPage` |
+| `/booking` | `BookingPage` |
+
+The `AppShell.tsx` layout component exists but is **not currently wired into the router** — it is a standalone Mantine shell with a header and footer, built as an optional wrapper. Step components each self-contain their own header/footer.
+
+---
+
+## Layer Diagram
+
+```
+User Browser
+│
+├─ src/pages/BookingPage.tsx        ← Wizard orchestrator (controls currentStep)
+│     │
+│     ├─ src/components/booking/
+│     │     Step1Category.tsx       ← Category selection
+│     │     Step2Service.tsx        ← Provider & service selection
+│     │     Step3Location.tsx       ← Location/clinic selection
+│     │     Step4Clinician.tsx      ← Clinician availability & date
+│     │     Step5Schedule.tsx       ← Time slot selection & reservation
+│     │     Step6Patient.tsx        ← Patient details form
+│     │     Step7Payment.tsx        ← Stripe payment
+│     │     Step8Completion.tsx     ← Confirmation screen
+│     │
+│     └─ src/hooks/ (useAppDispatch, useAppSelector)
+│
+├─ src/store/bookingSlice.ts        ← Redux slice: state + reducers + async thunks
+│     │
+│     └─ src/api/bookingApi.ts      ← Axios instance + typed API functions
+│
+└─ External REST API
+      https://bookinggateway.vitonta.com/{endpoint}
+```
+
+---
+
+## Key Abstractions
+
+### BookingState (Single Source of Truth)
+Defined in `src/store/bookingSlice.ts`. Divided into two top-level sections:
+
+```ts
+interface BookingState {
+    status: 'idle' | 'loading' | 'succeeded' | 'failed';
+    error: string | null;
+    token: string | null;
+    setupData: {
+        categories: ServiceCategory[];  // from GetServiceCategory
+        providers: Provider[];          // from GetPracticeProvider
+        services: any[];               // from GetServiceMapping
+        locations: any[];              // from GetPracticeLocation
+        paymentConfig: any | null;     // from GetPracticeforPaymentConfigration
+        dayRoster: any[];             // from GetDayRoaster
+        slots: any[];                 // from SearchListOfSlot
+        isLoadingSlots: boolean;
+    };
+    selections: {
+        // All user selections accumulated as the wizard progresses
+        selectedCategoryID, selectedCategoryName,
+        selectedProviderID, selectedServiceID, selectedServiceName,
+        selectedServiceDuration, selectedServicePrice,
+        practiceLocationID, practiceLocationName,
+        selectedDate, selectedTime,
+        patientInfo, appointmentID, invoiceID,
+        appointmentCode, patientID, customerID, price
+    };
+}
+```
+
+### Axios Instance (`bookingApi`)
+`src/api/bookingApi.ts` — A pre-configured Axios instance:
+- Base URL: `VITE_API_BASE_URL`
+- Request interceptor: automatically attaches `Authorization: Bearer {token}` from `localStorage.getItem('bookingToken')`, skipped for `PublicAccessToken` endpoint.
+
+### Typed Redux Hooks
+`src/hooks/useAppDispatch.ts` exports both:
+```ts
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+```
+These are the **only approved way** to dispatch or select from the Redux store in components.
+
+### Fetch-based `apiClient` Utility
+`src/utils/apiClient.ts` — A generic typed fetch wrapper as an alternative to the Axios instance. Handles auth headers, 401 detection, and typed response parsing. Used optionally alongside `bookingApi.ts`.
+
+### Mantine Theme
+`src/theme/mantineTheme.ts` — Centralizes design tokens:
+- Primary color: `brandBlue` (custom 10-shade palette, primary shade #5474b4)
+- Font: `Inter` (body), `Outfit` (headings, bold)
+- Default radius: `md`
+- Button default: `xl` radius, `sm` size, 600 font-weight
+- Card default: `lg` radius, `xl` padding, `sm` shadow, bordered
+- Paper default: `lg` radius, `xl` padding, `sm` shadow
+
+---
+
+## Data Flow for a Typical Request
+
+### Initialization (App Load → Step 1)
+1. `BookingPage` mounts, `useEffect` triggers `dispatch(fetchInitialData(apiKey))`.
+2. `fetchInitialData` thunk in `bookingSlice.ts`:
+   - Calls `getPublicAccessToken(apiKey)` → saves JWT to `localStorage('bookingToken')`.
+   - Calls `Promise.all([getPracticeProviders, getServiceCategory, getServiceMapping, getPaymentConfiguration])`.
+3. `extraReducers` handles `pending` → sets `status: 'loading'`, `fulfilled` → sets `status: 'succeeded'` and populates `setupData`.
+4. `BookingPage` re-renders, shows `Step1Category`.
+5. `Step1Category` reads `categories` and `services` from `useAppSelector((s) => s.booking.setupData)`.
+
+### User Selection (Step 1 → Step 2)
+1. User clicks a category card → `dispatch(setCategory({ id, name }))`.
+2. Reducer updates `state.selections.selectedCategoryID/Name`.
+3. User clicks "Next Step" → `onNext()` prop callback is called.
+4. `BookingPage` increments `currentStep` → renders `Step2Service`.
+
+### Booking Submission (Step 7)
+1. `submitBooking` thunk reads all selections from `getState()`.
+2. Orchestrates 5 sequential API calls: search patient → add patient (if new) → add appointment → create payment intent → finalize appointment.
+3. Each failure calls `rejectWithValue(error.response?.data || error.message)`.
+
+---
+
+## Authentication & Authorization Flow
+
+1. **Public token**: `POST /PublicAccessToken` with raw JSON string payload `"practiceApiKey"`.
+2. Token stored in `localStorage('bookingToken')`.
+3. All subsequent Axios requests automatically receive `Authorization: Bearer {token}` via request interceptor in `bookingApi.ts`.
+4. Google reCAPTCHA v3 (`react-google-recaptcha-v3`) wraps the entire app for bot protection.
+
+---
+
+## External Service Integrations
+
+| Service | Purpose | Integration Point |
+|---|---|---|
+| `bookinggateway.vitonta.com` | Core booking REST API | `src/api/bookingApi.ts` |
+| Stripe | Payment processing | `src/utils/StripeConfig.ts`, `@stripe/react-stripe-js` (Step7Payment) |
+| Google reCAPTCHA v3 | Bot protection | `main.tsx` + `src/hooks/useRecaptcha.ts` |
+
+---
+
+## Reference Implementations
+
+| Pattern | Best Example |
+|---|---|
+| Redux async thunk | `fetchInitialData` in `src/store/bookingSlice.ts` (L107-133) |
+| Orchestrated multi-step thunk | `submitBooking` in `src/store/bookingSlice.ts` (L201-270) |
+| Step component (simple) | `src/components/booking/Step1Category.tsx` |
+| Step component (complex, with roster/calendar) | `src/components/booking/Step5Schedule.tsx` |
+| API layer | `src/api/bookingApi.ts` |
+| Redux state shape | `BookingState` interface in `src/store/bookingSlice.ts` (L35-69) |
+| Typed hooks | `src/hooks/useAppDispatch.ts` |

package/skills/global/aisupportapp-project-conventions/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: aisupportapp/project-conventions
+description: Auto-generated project-conventions for aisupportapp. Created by project-scanner.
+version: 1.0.0
+scope: project
+last_reviewed: 2026-03-27
+---
+
+---
+name: project-conventions
+description: Naming conventions, code patterns, file structure, and project-specific idioms for aiSupportApp — a multi-step appointment booking wizard for Axis Sport & Medicine / HealthSync Portal.
+---
+
+# Project Conventions — aiSupportApp
+
+## Project Overview
+
+**aiSupportApp** is a React-based, multi-step appointment booking wizard for a healthcare/sports medicine practice (branded as "Axis Sport & Medicine" / "HealthSync Portal"). It guides patients through 8 sequential steps: category selection → service & provider → location → clinician availability → time scheduling → patient details → payment → confirmation.
+
+---
+
+## Tech Stack (Exact Versions)
+
+| Technology | Version |
+|---|---|
+| React | ^19.2.0 |
+| TypeScript | ~5.9.3 |
+| Vite | ^8.0.0-beta.13 |
+| Redux Toolkit | ^2.11.2 |
+| react-redux | ^9.2.0 |
+| react-router-dom | ^7.13.1 |
+| @mantine/core | ^8.3.15 |
+| @mantine/dates | ^8.3.15 |
+| @mantine/form | ^8.3.15 |
+| @mantine/notifications | ^8.3.15 |
+| @mantine/modals | ^8.3.15 |
+| @tabler/icons-react | ^3.38.0 |
+| axios | ^1.13.6 |
+| @stripe/react-stripe-js | ^5.6.1 |
+| date-fns | ^4.1.0 |
+| dayjs | ^1.11.19 |
+| tailwindcss | ^4.2.1 |
+| postcss-preset-mantine | ^1.18.0 |
+
+---
+
+## Naming Conventions
+
+### Variables & Functions
+- **camelCase** for all variables and functions.
+- Examples: `handleSelectCategory`, `getServiceCount`, `fetchInitialData`, `selectedCategoryID`.
+- Selector callbacks use arrow functions: `(state) => state.booking.selections.selectedCategoryID`.
+
+### Components & Files
+- **PascalCase** for React component filenames and their default export function names.
+- Examples: `Step1Category.tsx`, `BookingPage.tsx`, `AppShell.tsx`, `Step5Schedule.tsx`.
+- One component per file. File name matches the exported component name exactly.
+
+### Folders
+- **camelCase** for non-component folders: `api/`, `store/`, `hooks/`, `utils/`, `config/`, `router/`, `theme/`.
+- **PascalCase-like** folders for feature groupings under `components/`: `booking/`, `layout/`.
+
+### Redux Actions (Slice Reducers)
+- **camelCase** prefixed with the operation verb: `setCategory`, `setLocation`, `setSchedule`, `setPatientInfo`, `resetBooking`.
+- Async thunks use descriptive names: `fetchInitialData`, `fetchLocations`, `fetchDayRoster`, `fetchSlots`, `submitBooking`.
+- Async thunk IDs follow `sliceName/actionName`: `'booking/fetchInitialData'`.
+
+### API Endpoint Variables
+- API functions use **camelCase** prefixed with `get`, `add`, `create`, `search`, `finalize`: `getPublicAccessToken`, `addAppointment`, `createPayment`, `searchExistingPatient`.
+- See `src/api/bookingApi.ts` for the complete list.
+
+### TypeScript Interfaces
+- **PascalCase** for all interfaces: `BookingState`, `Provider`, `ServiceCategory`, `ApiClientOptions`.
+- Interfaces are defined inline in the same file where they are consumed — no separate `types/` folder.
+
+### Environment Variables
+- Prefix: `VITE_` (required for Vite to expose them to the browser).
+- Named with SCREAMING_SNAKE_CASE: `VITE_API_BASE_URL`, `VITE_PRACTICE_API_KEY`, `VITE_RECAPTCHA_SITE_KEY`.
+- Accessed through `src/config/constants.ts` via `import.meta.env.VITE_*`.
+
+---
+
+## File Structure Rules
+
+```
+src/
+  api/            ← Axios-based API functions (one file: bookingApi.ts)
+  components/
+    booking/      ← Step wizard components (Step1Category.tsx … Step8Completion.tsx)
+    layout/       ← AppShell layout wrapper (AppShell.tsx)
+  config/         ← constants.ts (env vars re-exported as named constants)
+  hooks/          ← Typed Redux hooks (useAppDispatch.ts, useAppSelector.ts, useRecaptcha.ts)
+  pages/          ← Top-level route components (BookingPage.tsx)
+  router/         ← react-router-dom config (index.tsx)
+  store/          ← Redux store (index.ts, bookingSlice.ts)
+  theme/          ← Mantine theme config (mantineTheme.ts)
+  utils/          ← Shared utilities (apiClient.ts, dateUtils.ts, StripeConfig.ts)
+  main.tsx        ← App entry point & provider hierarchy
+  App.tsx         ← Legacy Vite placeholder (not used in routing)
+  index.css       ← Global CSS & Tailwind custom properties
+```
+
+**Where to create new files:**
+- New booking step components → `src/components/booking/StepNName.tsx`
+- New API functions → add to `src/api/bookingApi.ts`
+- New Redux slices → `src/store/sliceName.ts`, then register in `src/store/index.ts`
+- New pages → `src/pages/PageName.tsx`, then define route in `src/router/index.tsx`
+- New utilities → `src/utils/utilName.ts`
+
+---
+
+## Import & Export Patterns
+
+### Absolute Path Alias
+- The `@/` alias resolves to `src/`. Use it for all cross-directory imports.
+- Examples from `src/main.tsx`:
+  ```ts
+  import { router } from '@/router';
+  import { theme } from '@/theme/mantineTheme';
+  import { RECAPTCHA_SITE_KEY } from '@/config/constants';
+  import { store } from '@/store';
+  ```
+
+### Component Imports (from siblings)
+- Step components use **relative paths** when importing within the same directory:
+  ```ts
+  import { useAppSelector } from '../../hooks/useAppSelector';
+  import { useAppDispatch } from '../../hooks/useAppDispatch';
+  import { setCategory } from '../../store/bookingSlice';
+  ```
+
+### Export Style
+- **Named exports** for actions, thunks, types, hooks, utilities:
+  ```ts
+  export const { setCategory, resetBooking } = bookingSlice.actions;
+  export type RootState = ReturnType<typeof store.getState>;
+  export type AppDispatch = typeof store.dispatch;
+  ```
+- **Default exports** for React components and Redux reducers:
+  ```ts
+  export default bookingSlice.reducer;
+  export default function Step1Category({ onNext, onClose }: Step1Props) { ... }
+  ```
+
+### CSS/Style Imports in `main.tsx`
+Order matters — always import Mantine styles before app CSS:
+```ts
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
+import '@/index.css';
+```
+
+---
+
+## Error Handling Pattern
+
+### Async Thunks
+All async thunks use a consistent try/catch with `rejectWithValue`:
+```ts
+// See src/store/bookingSlice.ts
+export const fetchInitialData = createAsyncThunk(
+    'booking/fetchInitialData',
+    async (practiceApiKey: string, { rejectWithValue }) => {
+        try {
+            // ... async work
+        } catch (error: any) {
+            return rejectWithValue(error.response?.data || error.message);
+        }
+    }
+);
+```
+
+### apiClient.ts (fetch-based utility)
+- Throws `'UNAUTHORIZED'` error string on 401.
+- Throws `API error {status} on {endpoint}` for other non-OK responses.
+- See `src/utils/apiClient.ts`.
+
+### UI Error States
+- Components check `status === 'failed'` from Redux state and display an error div:
+  ```tsx
+  // See src/pages/BookingPage.tsx
+  if (status === 'failed') {
+      return <div className="p-4 bg-red-50 text-red-600 rounded-lg">{error}</div>;
+  }
+  ```
+
+---
+
+## Coding Patterns Checklist
+
+- ✅ **Always use typed Redux hooks** — `useAppDispatch()` and `useAppSelector()` from `src/hooks/`. Never use raw `useDispatch`/`useSelector`.
+- ✅ **Step components receive callback props** — `onNext`, `onBack`, `onClose` — passed down from `BookingPage.tsx`.
+- ✅ **Store state is read via `useAppSelector`**, never via local state cache.
+- ✅ **Mixed styling**: Mantine components for UI controls (modals, notifications, forms), TailwindCSS utility classes for layout and step page shells.
+- ✅ **Custom CSS variables** are used for brand colors in Tailwind classes: `bg-primary`, `text-primary`, `bg-background-light`, `bg-background-dark`. These are defined in `src/index.css`.
+- ✅ **Material Symbols Outlined** icon font is used in step components (loaded via `index.html`).
+- ✅ **Tabler Icons** from `@tabler/icons-react` used in Mantine layout components.
+- ✅ **`date-fns/format`** is used for date formatting in thunks (dates as `MM/dd/yyyy` for API requests).
+- ✅ **`localStorage`** is used to persist the Bearer token between page refreshes: key `'bookingToken'`.
+- ✅ **`import.meta.env.VITE_PRACTICE_ID`** is accessed directly in thunks with a zero-UUID fallback.
+- ❌ **No test files exist** — do not assume a testing framework is in use.

package/skills/global/aisupportapp-project-workflows/SKILL.md

@@ -0,0 +1,230 @@
+---
+name: aisupportapp/project-workflows
+description: Auto-generated project-workflows for aisupportapp. Created by project-scanner.
+version: 1.0.0
+scope: project
+last_reviewed: 2026-03-27
+---
+
+---
+name: project-workflows
+description: How to run, build, deploy, add features, and extend the aiSupportApp appointment booking wizard.
+---
+
+# Project Workflows — aiSupportApp
+
+## Running Locally
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server (Vite HMR)
+npm run dev
+# → Runs at http://localhost:5173 (default Vite port)
+```
+
+**Before running, ensure `.env` is configured:**
+
+```bash
+# .env (copy from .env.example)
+VITE_API_BASE_URL=https://bookinggateway.vitonta.com
+VITE_PRACTICE_API_KEY=your_practice_api_key_here
+VITE_RECAPTCHA_SITE_KEY=your_google_recaptcha_v3_site_key
+```
+
+> ⚠️ The app will display "Initialization Failed" on load if `VITE_PRACTICE_API_KEY` is missing or incorrect. The `PublicAccessToken` API call will fail.
+
+---
+
+## Build for Production
+
+```bash
+npm run build
+# Outputs to dist/
+
+npm run preview
+# Preview the production build locally
+```
+
+---
+
+## Linting
+
+```bash
+npm run lint
+# Runs ESLint across all .ts and .tsx files
+```
+
+---
+
+## Testing
+
+**No test suite currently exists.** There are no `.test.ts`, `.spec.ts`, or test runner configurations (Jest, Vitest, Playwright) in this project. Manual browser testing is the current approach.
+
+---
+
+## Adding a New Booking Step
+
+Follow the established 8-step pattern:
+
+1. **Create the component** → `src/components/booking/StepNName.tsx`
+   - Accept `onNext`, `onBack`, `onClose` as props (typed inline interface).
+   - Use `useAppDispatch()` and `useAppSelector()` (from `src/hooks/`) for Redux I/O.
+   - Style with TailwindCSS utility classes. Use `bg-primary`, `text-primary`, `bg-background-light` CSS custom properties.
+   - Add a progress bar showing `{N/8 * 100}% Complete`.
+
+2. **Add Redux action** → `src/store/bookingSlice.ts`
+   - For synchronous selections, add to the `reducers` object:
+     ```ts
+     setMySelection: (state, action: PayloadAction<{ id: string }>) => {
+         state.selections.mySelectionID = action.payload.id;
+     }
+     ```
+   - For async data fetching, add a new `createAsyncThunk`:
+     ```ts
+     export const fetchMyData = createAsyncThunk(
+         'booking/fetchMyData',
+         async (params, { rejectWithValue }) => {
+             try {
+                 return await myApiFunction(params);
+             } catch (error: any) {
+                 return rejectWithValue(error.response?.data || error.message);
+             }
+         }
+     );
+     ```
+   - Handle it in `extraReducers`.
+
+3. **Add API function** → `src/api/bookingApi.ts`
+   - Add a typed async function using the pre-configured `bookingApi` Axios instance:
+     ```ts
+     export const myNewApiCall = async (payload: MyPayloadType) => {
+         const response = await bookingApi.post('/MyEndpoint', payload);
+         return response.data;
+     };
+     ```
+
+4. **Register in BookingPage** → `src/pages/BookingPage.tsx`
+   - Import the new step component.
+   - Add conditional render: `{currentStep === N && <StepNName onNext={handleNext} onBack={handleBack} onClose={handleClose} />}`
+   - Update `Math.min(prev + 1, N_MAX)` in `handleNext`.
+
+5. **No router changes needed** — all steps render under the same `/` or `/booking` route.
+
+---
+
+## Adding a New API Endpoint
+
+1. Add a typed function in `src/api/bookingApi.ts`:
+   ```ts
+   export const getMyResource = async (id: string) => {
+       const response = await bookingApi.get(`/GetMyResource?id=${id}`);
+       return response.data;
+   };
+   ```
+2. Import and call from an async thunk in `src/store/bookingSlice.ts`.
+3. The Axios instance handles token injection automatically — do not manually set `Authorization` headers unless overriding.
+
+---
+
+## Adding a New Redux Slice
+
+1. Create `src/store/myFeatureSlice.ts` following the `bookingSlice.ts` pattern.
+2. Register it in `src/store/index.ts`:
+   ```ts
+   import myFeatureReducer from './myFeatureSlice';
+   
+   export const store = configureStore({
+       reducer: {
+           booking: bookingReducer,
+           myFeature: myFeatureReducer, // ← add here
+       },
+   });
+   ```
+3. Update `RootState` type automatically (it uses `ReturnType<typeof store.getState>`).
+
+---
+
+## Adding a New Route / Page
+
+1. Create `src/pages/NewPage.tsx`.
+2. Add the route in `src/router/index.tsx`:
+   ```tsx
+   import NewPage from '@/pages/NewPage';
+   
+   export const router = createBrowserRouter([
+       { path: '/', element: <BookingPage /> },
+       { path: '/booking', element: <BookingPage /> },
+       { path: '/new-path', element: <NewPage /> },  // ← add here
+   ]);
+   ```
+
+---
+
+## Updating the Mantine Theme
+
+Edit `src/theme/mantineTheme.ts`. The `theme` object is passed to `<MantineProvider>` in `main.tsx`. Component overrides use `ComponentName.extend({ defaultProps, styles })` pattern:
+
+```ts
+// Example: customize TextInput globally
+TextInput: TextInput.extend({
+    defaultProps: { radius: 'md', size: 'sm' },
+    styles: { input: { borderColor: 'var(--mantine-color-brandBlue-4)' } }
+})
+```
+
+---
+
+## Environment Variables Reference
+
+| Variable | Required | Description |
+|---|---|---|
+| `VITE_API_BASE_URL` | ✅ Yes | Base URL for the booking REST API (e.g. `https://bookinggateway.vitonta.com`) |
+| `VITE_PRACTICE_API_KEY` | ✅ Yes | Practice API key used for `PublicAccessToken` auth and as `PracticeID` in API calls |
+| `VITE_RECAPTCHA_SITE_KEY` | ✅ Yes | Google reCAPTCHA v3 site key |
+| `VITE_PRACTICE_ID` | ⚠️ Optional | UUID for the practice; thunks fall back to `'00000000-0000-0000-0000-000000000000'` if absent |
+
+> Always access via `src/config/constants.ts` exports, not `import.meta.env.*` directly in components.
+
+---
+
+## API Integration Reference
+
+The canonical reference for all API calls, payloads, and UI data mappings is `appliworkflowfile.md` at the project root. Always consult it before implementing or modifying any API integration.
+
+### API Call Sequence (Booking Flow)
+
+| Step | API Call | Type |
+|---|---|---|
+| Init | `POST /PublicAccessToken` | Auth |
+| Init | `GET /GetPracticeProvider` | Parallel |
+| Init | `GET /GetServiceCategory` | Parallel |
+| Init | `GET /GetServiceMapping` | Parallel |
+| Init | `GET /GetPracticeforPaymentConfigration` | Parallel |
+| Step 3 | `GET /GetPracticeLocation` | On demand |
+| Step 4 | `POST /GetFirstAvailableSlotforMultiProvider` | On load |
+| Step 4 | `POST /GetDayRoaster` | On clinician select |
+| Step 5 | `POST /SearchListOfSlot` | On date select |
+| Step 5 | `POST /AddAppointment` (draft) | On "Continue" |
+| Step 6 | `POST /SearchExistingAutoMapPatient` | On "Continue" |
+| Step 6 | `POST /AddePatient` (if new) | Conditional |
+| Step 7 | `POST /CreatePayment` | On load |
+| Step 8 | `POST /FinalizeAppointment` | On load |
+
+> ⚠️ Note the intentional typo in the API: `AddePatient` (not `AddPatient`). This is the live endpoint name and must be preserved.
+
+---
+
+## Supabase Skill Sync (`.ai-skills.json`)
+
+The project is configured to push scan results to Supabase:
+
+```json
+{
+  "email": "haseeb.ahmed@valentiatech.com",
+  "scanUrl": "https://znshdhjquohrzvbnloki.supabase.co/functions/v1/scan-results"
+}
+```
+
+After running a project scan, a `POST` to `scanUrl` delivers updated skill content for storage.

package/skills/global/aisupportapp-test-installation/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: aisupportapp/test-installation
+description: No description
+version: 1.0.0
+scope: project
+last_reviewed: 2026-03-27
+---
+
+# Skill Name
+
+## Overview
+
+Describe what this skill covers and when it should be applied.
+
+## 1. First Rule
+
+- Rule details here
+- Use clear, actionable language
+
+```typescript
+// ✅ Good
+const example = 'good pattern'
+
+// ❌ Bad
+const example = 'bad pattern'
+```
+
+## Checklist
+
+- [ ] First check
+- [ ] Second check
+- [ ] Third check

package/skills/global/api-design/SKILL.md

@@ -3,7 +3,7 @@ name: api-design
 description: No description
 version: 1.0.0
 scope: global
-last_reviewed: 2026-03-19
+last_reviewed: 2026-03-27
 ---
 
 ---

package/skills/global/appointment-oas-app/SKILL.md

@@ -0,0 +1,169 @@
+---
+name: appointment-oas-app
+description: No description
+version: 1.0.1
+scope: global
+last_reviewed: 2026-03-27
+---
+
+---
+name: appointment-booking-app
+description: >
+  Build a complete appointment booking web application in React JS (Vite + Tailwind + Redux Toolkit + React Query).
+  This skill handles TWO phases: (1) pixel-perfect UI replication from any design input — Figma exports, HTML/CSS mockups,
+  or screenshot images — auto-detecting whether the UI is a wizard/stepper, single-page form, tabbed layout, or other pattern;
+  and (2) full API integration with business rules across a 6-step booking flow including authentication, service/category
+  selection, clinic/location filtering, provider selection with first-available slots, calendar/slot picker, patient
+  registration with NZ address lookup (eSAM), and Stripe payment.
+
+  USE THIS SKILL whenever the user asks to: build an appointment booking app or flow, replicate a booking UI from a design,
+  wire up booking APIs, implement a multi-step scheduling wizard, create a date/time picker booking interface, or anything
+  involving appointment scheduling with API integration. Also trigger when the user shares a Figma link, HTML mockup,
+  or screenshot and says "build this" or "replicate this" and the context is a booking or scheduling flow.
+  Trigger even if they just say "booking app", "appointment page", "scheduling UI", or share a design with calendar/time elements.
+---
+
+# Appointment Booking App Skill
+
+This skill builds a production-grade appointment booking web application in two phases:
+- **Phase 1 — UI Replication**: Pixel-perfect reproduction of a provided design
+- **Phase 2 — API Integration**: 6-step API wiring with business rules
+
+## Tech Stack (Non-negotiable)
+
+| Layer             | Choice                        |
+|-------------------|-------------------------------|
+| Build tool        | Vite + React                  |
+| Styling           | Tailwind CSS                  |
+| State management  | Redux Toolkit (global state)  |
+| Server state      | React Query / TanStack Query  |
+| Routing           | React Router v6               |
+| HTTP client       | Axios (with interceptors)     |
+| Payment           | Stripe.js + @stripe/react-stripe-js |
+
+## Environment Variables (Vite standard)
+
+```env
+VITE_S_PRACTICE_ID=<encrypted practice ID>
+VITE_API_BASE_URL=https://bookinggateway.vitonta.com
+VITE_STRIPE_PUBLISHABLE_KEY=<stripe publishable key>
+```
+
+---
+
+## Phase 1 — UI Replication
+
+Read `references/ui-replication.md` for the full design-to-code workflow including:
+- Design input detection (Figma/HTML/screenshot)
+- UI pattern auto-detection (wizard, split-panel, calendar-first, etc.)
+- Design token extraction and Tailwind config mapping
+- Component patterns (stepper, calendar grid, provider cards, booking summary)
+
+---
+
+## Phase 2 — API Integration (6-Step Booking Flow)
+
+Read `references/api-contracts.md` for complete endpoint specs, payloads, and response shapes.
+Read `references/business-rules.md` for filtering logic, validation rules, and state transitions.
+
+### Flow Overview
+
+```
+Step 0: POST /PublicAccessToken → JWT token (Bearer auth for all calls)
+   ↓
+Step 1: GET /GetServiceCategory?practiceID={id} → User picks a category
+   ↓
+Step 2: GET /GetServiceMapping → Filter services by category keywords across `serviceName` and `indiciReasonForContactTitle`
+   ↓
+Step 3: GET /GetPracticeLocation → Filter locations by serviceID
+   ↓
+Step 4: GET /GetPracticeProvider + POST /GetFirstAvailableSlotforMultiProvider
+         → Filter providers by serviceID + locationID, show first available slots
+   ↓
+Step 5: POST /GetDayRoaster + POST /SearchListOfSlot
+         → Calendar on left, time slots on right
+   ↓
+Step 6: Patient Registration + Address Lookup + Booking + Payment
+         → Multiple sub-APIs (see api-contracts.md Step 6)
+```
+
+### Redux Slice Structure
+
+```javascript
+// store/bookingSlice.js
+const bookingSlice = createSlice({
+  name: 'booking',
+  initialState: {
+    currentStep: 0,
+    token: null,
+    selectedCategory: null,      // Step 1
+    selectedService: null,        // Step 2
+    selectedLocation: null,       // Step 3
+    selectedProvider: null,       // Step 4
+    firstAvailableSlots: [],      // Step 4
+    dayRoster: [],                // Step 5
+    selectedDate: null,           // Step 5
+    selectedSlots: [],            // Step 5 (array — may need 2+ for longer durations)
+    appointmentID: null,          // Step 6 (from AddAppointment)
+    invoiceID: null,              // Step 6
+    patient: null,                // Step 6
+    paymentIntent: null,          // Step 6
+  },
+  reducers: { /* one setter per field + resetBooking */ },
+});
+```
+
+### React Query Hook Pattern
+
+```javascript
+// Every API step gets a dedicated hook
+export const useServiceCategories = (practiceID) => useQuery({
+  queryKey: ['serviceCategories', practiceID],
+  queryFn: () => api.getServiceCategories(practiceID),
+  enabled: !!practiceID,
+  staleTime: 10 * 60 * 1000,
+});
+
+// Mutations for POST endpoints
+export const useAddAppointment = () => useMutation({
+  mutationFn: (payload) => api.addAppointment(payload),
+  onSuccess: (data) => { dispatch(setAppointmentID(data.appointmentID)); },
+});
+```
+
+### Slot Booking Duration Logic (CRITICAL)
+
+When booking, the number of slots to reserve depends on the service's `timeDuration` vs the slot `interval`:
+```
+slotsNeeded = Math.ceil(service.timeDuration / slot.interval)
+```
+Example: If `timeDuration` is 40 mins and slots are 20 min intervals → book 2 consecutive slots.
+The `SlotID` array in `AddAppointment` must contain that many consecutive slot IDs.
+
+### Error Handling
+
+- Every API call must have loading, success, and error states in UI.
+- Network failures → "Connection issue. Please try again."
+- 4xx → map to business rule messages per step.
+- 5xx → "Something went wrong on our end. Please try again later."
+- Slot conflict (409) → refresh available slots and notify user.
+
+### Checklist Before Delivering
+
+- [ ] All design tokens in `tailwind.config.js`
+- [ ] UI pattern correctly identified and implemented
+- [ ] All API steps wired with React Query hooks
+- [ ] Redux slice holds cross-step booking state
+- [ ] Service filtering uses meaningful category keywords against `serviceName` and `indiciReasonForContactTitle`
+- [ ] Location filtering by serviceID
+- [ ] Provider dual-filter: serviceID + locationID
+- [ ] Slot duration logic: consecutive slot booking
+- [ ] eSAM address autocomplete + detail fetch
+- [ ] Stripe payment integration with clientSecret
+- [ ] Loading spinners on every async operation
+- [ ] Error states handled for every API call
+- [ ] Client-side validation before each API call
+- [ ] Step 6 Mantine form initializes from a cloned draft object, not frozen Redux state
+- [ ] Step 6 does not use unconditional `form.setValues(...)` sync effects that can cause update-depth loops
+- [ ] Back navigation preserves state (React Query cache)
+- [ ] AddAppointment fires on Step 6 page mount (before patient registration)

package/skills/global/code-standards/SKILL.md

@@ -3,7 +3,7 @@ name: code-standards
 description: No description
 version: 1.0.0
 scope: global
-last_reviewed: 2026-03-19
+last_reviewed: 2026-03-27
 ---
 
 ---

package/skills/global/project-scanner/SKILL.md

@@ -11,7 +11,7 @@ description: Reverse-engineer any codebase into AI-ready skill files. Use this s
   auto-trigger.
 version: 1.0.0
 scope: global
-last_reviewed: 2026-03-19
+last_reviewed: 2026-03-27
 ---
 
 # Project Scanner

package/skills/global/viteapp-core-workflows/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: viteapp/core-workflows
+description: No description
+version: 1.0.0
+scope: project
+last_reviewed: 2026-03-27
+---
+
+# Skill Name
+
+## Overview
+
+Describe what this skill covers and when it should be applied.
+
+## 1. First Rule
+
+- Rule details here
+- Use clear, actionable language
+
+```typescript
+// ✅ Good
+const example = 'good pattern'
+
+// ❌ Bad
+const example = 'bad pattern'
+```
+
+## Checklist
+
+- [ ] First check
+- [ ] Second check
+- [ ] Third check