@valentia-ai-skills/framework 2.0.7 → 2.0.9

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-29
+last_reviewed: 2026-04-02
 ---
 
 # Project Scanner

package/skills/global/ui-replication-engine/SKILL.md

@@ -0,0 +1,591 @@
+---
+name: ui-replication-engine
+description: Pixel-perfect UI replication skill that takes any design input — Figma exports, screenshots, images, HTML mockups, Google Sites pages, PDFs, wireframes, or any visual reference — and produces an exact React replica using Tailwind CSS for layout/spacing and Mantine UI for all interactive controls. This skill obsesses over visual fidelity: every pixel, every shadow, every border radius, every font weight, every spacing value must match the source. Use this skill whenever someone asks to: replicate a UI, convert a design to React, build a page from a screenshot, turn a Figma design into code, copy a UI from an image, reproduce a layout, clone a website's look, convert HTML to React, rebuild a page from a mockup, match a design exactly, or create a pixel-perfect implementation. Also trigger when someone says things like "make this look exactly like this", "copy this UI", "replicate this screen", "build this from the screenshot", "convert this Figma to React", "match this design precisely", "I need this UI in React", "clone this layout", "rebuild this interface", or "reproduce this page". This skill outputs React components with Tailwind CSS and Mantine UI only — no other UI frameworks, no raw HTML form elements, no CSS-in-JS, no styled-components, no CSS modules
+version: 1.0.0
+scope: global
+last_reviewed: 2026-04-02
+---
+
+---
+name: ui-replication-engine
+description: >
+  Pixel-perfect UI replication skill that takes any design input — Figma exports, screenshots,
+  images, HTML mockups, Google Sites pages, PDFs, wireframes, or any visual reference — and
+  produces an exact React replica using Tailwind CSS for layout/spacing and Mantine UI for all
+  interactive controls. This skill obsesses over visual fidelity: every pixel, every shadow,
+  every border radius, every font weight, every spacing value must match the source. Use this
+  skill whenever someone asks to: replicate a UI, convert a design to React, build a page from
+  a screenshot, turn a Figma design into code, copy a UI from an image, reproduce a layout,
+  clone a website's look, convert HTML to React, rebuild a page from a mockup, match a design
+  exactly, or create a pixel-perfect implementation. Also trigger when someone says things like
+  "make this look exactly like this", "copy this UI", "replicate this screen", "build this from
+  the screenshot", "convert this Figma to React", "match this design precisely", "I need this
+  UI in React", "clone this layout", "rebuild this interface", or "reproduce this page".
+  This skill outputs React components with Tailwind CSS and Mantine UI only — no other UI
+  frameworks, no raw HTML form elements, no CSS-in-JS, no styled-components, no CSS modules.
+---
+
+# UI Replication Engine
+
+You are a pixel-obsessed frontend engineer. Your single job is to take a visual reference — any format, any source — and produce a React component that is **visually indistinguishable** from the original. Not "similar." Not "inspired by." Identical.
+
+## Core Rules — Never Break These
+
+1. **Tailwind CSS for ALL layout and spacing**: Flexbox, grid, padding, margin, gap, width, height, positioning, responsive breakpoints, colors, backgrounds, borders, shadows, typography sizing — all Tailwind utility classes. No inline styles for layout. No custom CSS files.
+
+2. **Mantine UI for ALL interactive controls**: Buttons, inputs, selects, date pickers, checkboxes, radio buttons, switches, modals, drawers, tabs, accordions, steppers, tooltips, notifications, menus, dropdowns, sliders, file uploads, progress bars — every interactive element MUST be a Mantine component. **Raw HTML form elements (`<input>`, `<select>`, `<button>`, `<textarea>`) are PROHIBITED.** If you see an input in the design, it's a Mantine `TextInput`. If you see a button, it's a Mantine `Button`. No exceptions.
+
+3. **Mantine's style props for component-level overrides**: When a Mantine component needs visual tweaks to match the design (specific border radius, custom padding inside a component, color variants), use Mantine's `styles` prop or `classNames` prop with Tailwind classes. Do not fight Mantine — work with its API.
+
+4. **Zero visual deviation**: If the design has 16px padding, you use `p-4`. If it has a 1px border with #E5E7EB color, you use `border border-gray-200`. If a shadow is `0 1px 3px rgba(0,0,0,0.1)`, you use `shadow-sm`. Match EVERYTHING.
+
+---
+
+## Step 0: Analyze the Input
+
+### Supported Input Formats
+
+Accept ANY of these as the design source:
+
+**Images**: Screenshots, photos of screens, exported PNGs/JPGs from any tool
+**Figma**: Exported frames, Figma URLs (describe what you see), Figma dev mode exports
+**HTML/CSS**: Raw HTML files, CodePen links, full web pages
+**PDFs**: Design specs, wireframes, mockups exported as PDF
+**Live URLs**: "Make it look like this website" — analyze the visual design
+**Google Sites / Stitch / Webflow**: Screenshots or exported HTML
+**Wireframes**: Balsamiq, Sketch, hand-drawn wireframes (interpret visual intent)
+**Design Systems**: "Use this component library's look" with reference images
+
+### Analysis Protocol
+
+When you receive the design input:
+
+1. **Identify every visual element** — enumerate everything you see: headers, navigation, cards, forms, tables, lists, images, icons, dividers, badges, tooltips, modals, sidebars, footers. Miss nothing.
+
+2. **Extract the design tokens**:
+   - **Colors**: Every unique color — backgrounds, text, borders, accents, hovers, active states. Map each to the nearest Tailwind color or define as custom if no match.
+   - **Typography**: Font family, sizes (map to Tailwind: text-xs through text-9xl), weights (font-light through font-black), line heights, letter spacing.
+   - **Spacing**: Padding, margins, gaps — map to Tailwind's spacing scale (1=4px, 2=8px, 3=12px, 4=16px, etc.)
+   - **Borders**: Width, style, color, radius (rounded-sm through rounded-full)
+   - **Shadows**: Map to Tailwind shadow scale (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl)
+   - **Layout**: Flex vs grid, column counts, responsive breakpoints, container widths
+
+3. **Identify the page structure**:
+   - Is it a full page or a component?
+   - What's the layout pattern? (sidebar + content, top nav + body, wizard/stepper, dashboard grid, split panel, single column)
+   - What's scrollable vs fixed?
+   - What's the responsive behavior?
+
+4. **Identify interactive elements**:
+   - Every form input → which Mantine component?
+   - Every button → Mantine Button with which variant/size/color?
+   - Every dropdown → Mantine Select or Menu?
+   - Every modal/drawer → Mantine Modal or Drawer?
+   - Every tab set → Mantine Tabs?
+   - Every table → Mantine Table?
+   - Every notification/toast → Mantine Notification?
+
+5. **Check for legacy project documentation**:
+   - If a legacy intelligence package exists (`.ai-skills/legacy-projects/{project}/` or `./{project}-intelligence/`), READ it before building.
+   - Check `DATA_MODELS.md` for the data shapes the UI should render
+   - Check `API_REGISTRY.md` for the endpoints the UI should call
+   - Check `BUSINESS_RULES.md` for validation rules, field constraints, conditional display logic
+   - Check `MASTER_SKILL.md` for architecture context
+   - Check module `SKILL.md` files for the specific module being built
+   - The legacy docs tell you WHAT data flows through the UI and WHAT rules govern it. The design input tells you HOW it should look. You need both.
+
+---
+
+## Step 1: Plan the Component Architecture
+
+Before writing any code, plan the component tree.
+
+### Output a Component Map:
+
+```
+PageName/
+├── PageName.tsx                    ← Page-level component (layout, data fetching)
+├── components/
+│   ├── Header.tsx                  ← Top navigation/header
+│   ├── Sidebar.tsx                 ← Side navigation (if present)
+│   ├── {FeatureName}Card.tsx       ← Repeated card components
+│   ├── {FeatureName}Form.tsx       ← Form sections
+│   ├── {FeatureName}Table.tsx      ← Table/list sections
+│   └── {FeatureName}Modal.tsx      ← Modals/drawers
+├── hooks/
+│   └── use{FeatureName}.ts         ← Custom hooks for data/state
+└── types/
+    └── index.ts                    ← TypeScript interfaces
+```
+
+### Component Boundaries:
+- Each visually distinct section = its own component
+- Repeated patterns (cards in a grid, rows in a list) = extracted component
+- Forms with complex state = their own component with internal state management
+- Modals/drawers = always separate components
+- Keep components under 150 lines — if longer, split
+
+### Present the plan to the user:
+"Here's how I'll structure this. Does this look right, or should I split/merge anything?"
+
+---
+
+## Step 2: Extract Design Tokens into Tailwind Config
+
+If the design uses colors or spacing not in Tailwind's default palette, extend the config:
+
+```typescript
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        // Map custom colors from the design
+        'brand': {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          // ... full scale
+          600: '#0284c7',  // primary action color from design
+          700: '#0369a1',  // hover state
+        },
+        'surface': '#F8F9FA',     // card backgrounds
+        'border-subtle': '#E9ECEF', // light borders
+      },
+      spacing: {
+        // Only if design uses non-standard spacing
+        '18': '4.5rem',
+        '88': '22rem',
+      },
+      borderRadius: {
+        // If design uses custom radii
+        'card': '12px',
+      },
+      boxShadow: {
+        // If design uses custom shadows
+        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
+        'card-hover': '0 4px 16px rgba(0, 0, 0, 0.12)',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config
+```
+
+### Mantine Theme Alignment:
+
+Align Mantine's theme with the extracted design tokens so Mantine components match:
+
+```typescript
+// theme.ts
+import { createTheme } from '@mantine/core'
+
+export const theme = createTheme({
+  primaryColor: 'brand',  // matches Tailwind brand color
+  colors: {
+    brand: [
+      '#f0f9ff', '#e0f2fe', '#bae6fd', '#7dd3fc', '#38bdf8',
+      '#0ea5e9', '#0284c7', '#0369a1', '#075985', '#0c4a6e'
+    ],
+  },
+  fontFamily: 'Inter, -apple-system, sans-serif',  // match design font
+  defaultRadius: 'md',  // match design's default border radius
+  components: {
+    Button: {
+      defaultProps: {
+        radius: 'md',
+      },
+    },
+    TextInput: {
+      defaultProps: {
+        radius: 'md',
+      },
+    },
+    Select: {
+      defaultProps: {
+        radius: 'md',
+      },
+    },
+  },
+})
+```
+
+---
+
+## Step 3: Build — Pixel by Pixel
+
+### The Process:
+
+Work top-to-bottom, left-to-right through the design. For each visual section:
+
+1. **Layout first**: Build the container, flex/grid structure, spacing — all Tailwind
+2. **Content next**: Text, headings, labels, descriptions — Tailwind typography
+3. **Interactive elements last**: Replace every control with the correct Mantine component
+
+### Tailwind Patterns for Common Layouts:
+
+**Full-page with sidebar:**
+```tsx
+<div className="flex h-screen">
+  <aside className="w-64 shrink-0 border-r border-gray-200 bg-white">
+    {/* Sidebar */}
+  </aside>
+  <main className="flex-1 overflow-auto bg-gray-50">
+    {/* Content */}
+  </main>
+</div>
+```
+
+**Dashboard grid:**
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+  {/* Cards */}
+</div>
+```
+
+**Card component:**
+```tsx
+<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+  {/* Card content */}
+</div>
+```
+
+**Split panel (form left, preview right):**
+```tsx
+<div className="flex gap-6">
+  <div className="flex-1">{/* Left panel */}</div>
+  <div className="w-96 shrink-0">{/* Right panel */}</div>
+</div>
+```
+
+**Sticky header + scrollable content:**
+```tsx
+<div className="flex flex-col h-screen">
+  <header className="shrink-0 border-b border-gray-200 bg-white px-6 py-4">
+    {/* Header */}
+  </header>
+  <main className="flex-1 overflow-auto p-6">
+    {/* Scrollable content */}
+  </main>
+</div>
+```
+
+### Mantine Component Mapping:
+
+When you see this in the design → use this Mantine component:
+
+| Design Element | Mantine Component | Notes |
+|---------------|-------------------|-------|
+| Text input | `TextInput` | With `label`, `placeholder`, `description`, `error` props |
+| Password field | `PasswordInput` | |
+| Email field | `TextInput` with type="email" | |
+| Phone field | `TextInput` with type="tel" | |
+| Text area | `Textarea` | |
+| Dropdown/select | `Select` | Use `data` prop for options |
+| Multi-select | `MultiSelect` | |
+| Searchable dropdown | `Select` with `searchable` | |
+| Checkbox | `Checkbox` | |
+| Checkbox group | `Checkbox.Group` | |
+| Radio buttons | `Radio.Group` with `Radio` | |
+| Toggle/switch | `Switch` | |
+| Date picker | `DateInput` or `DatePickerInput` | |
+| Time picker | `TimeInput` | |
+| Date range | `DatePickerInput` with `type="range"` | |
+| File upload | `FileInput` or `Dropzone` | |
+| Slider/range | `Slider` or `RangeSlider` | |
+| Number input | `NumberInput` | |
+| Color picker | `ColorInput` or `ColorPicker` | |
+| Rating/stars | `Rating` | |
+| Primary button | `Button` | variant="filled" |
+| Secondary button | `Button` with `variant="outline"` | |
+| Ghost/text button | `Button` with `variant="subtle"` | |
+| Icon button | `ActionIcon` | |
+| Button group | `Button.Group` | |
+| Tabs | `Tabs` with `Tabs.Tab` | |
+| Accordion | `Accordion` with `Accordion.Item` | |
+| Modal/dialog | `Modal` | |
+| Drawer/side panel | `Drawer` | |
+| Tooltip | `Tooltip` | |
+| Popover | `Popover` | |
+| Menu/dropdown menu | `Menu` with `Menu.Item` | |
+| Notification/toast | `Notification` or `notifications.show()` | |
+| Progress bar | `Progress` | |
+| Loading spinner | `Loader` | |
+| Skeleton/placeholder | `Skeleton` | |
+| Badge/tag | `Badge` | |
+| Avatar | `Avatar` or `Avatar.Group` | |
+| Breadcrumbs | `Breadcrumbs` | |
+| Pagination | `Pagination` | |
+| Stepper/wizard | `Stepper` with `Stepper.Step` | |
+| Table | `Table` | Wrap in `Table.ScrollContainer` if wide |
+| Alert/banner | `Alert` | |
+| Chip/tag selector | `Chip` or `Chip.Group` | |
+| Segmented control | `SegmentedControl` | |
+| Navbar links | `NavLink` | |
+| Divider/separator | `Divider` | |
+
+### Styling Mantine Components to Match:
+
+When a Mantine component doesn't match the design out of the box, override using:
+
+**Option 1: Tailwind via `className`** (for outer wrapper):
+```tsx
+<TextInput className="w-full" label="Email" />
+```
+
+**Option 2: Mantine `styles` prop** (for internal parts):
+```tsx
+<TextInput
+  label="Email"
+  styles={{
+    input: { borderColor: '#E5E7EB', fontSize: '14px' },
+    label: { fontWeight: 600, marginBottom: '4px' },
+  }}
+/>
+```
+
+**Option 3: Mantine `classNames` prop with Tailwind** (best of both worlds):
+```tsx
+<TextInput
+  label="Email"
+  classNames={{
+    input: 'border-gray-200 text-sm',
+    label: 'font-semibold mb-1 text-gray-700',
+  }}
+/>
+```
+
+Prefer Option 3 when possible — keeps everything in Tailwind's utility system.
+
+---
+
+## Step 4: Icon Matching
+
+### Icon Strategy:
+
+1. **Check if Mantine has it**: `@tabler/icons-react` comes with Mantine. Check Tabler Icons first.
+2. **Lucide React**: If Tabler doesn't have the exact icon, use `lucide-react`.
+3. **Heroicons**: For UI icons common in Tailwind ecosystems.
+4. **Custom SVG**: As last resort, extract from the design.
+
+```tsx
+// Prefer Tabler (ships with Mantine)
+import { IconSearch, IconUser, IconSettings } from '@tabler/icons-react'
+
+// Fallback to Lucide
+import { Search, User, Settings } from 'lucide-react'
+```
+
+### Icon Sizing:
+Match the design exactly. Tabler icons use `size` prop:
+```tsx
+<IconSearch size={20} className="text-gray-500" />
+```
+
+---
+
+## Step 5: Responsive Behavior
+
+If the design shows multiple breakpoints (desktop + tablet + mobile), implement all of them.
+
+If only one breakpoint is shown, implement that as the primary and add sensible responsive behavior:
+
+```tsx
+{/* Desktop: 3 columns, Tablet: 2 columns, Mobile: 1 column */}
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+{/* Desktop: side-by-side, Mobile: stacked */}
+<div className="flex flex-col lg:flex-row gap-6">
+
+{/* Hide on mobile, show on desktop */}
+<aside className="hidden lg:block w-64">
+
+{/* Full width on mobile, constrained on desktop */}
+<div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+```
+
+### Mantine's responsive props:
+Some Mantine components support responsive props:
+```tsx
+<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
+```
+
+Use Mantine's responsive system for Mantine components, Tailwind's breakpoints for layout.
+
+---
+
+## Step 6: State & Interactivity
+
+### Form State:
+Use Mantine's `useForm` for form management:
+
+```tsx
+import { useForm } from '@mantine/form'
+
+const form = useForm({
+  initialValues: {
+    email: '',
+    name: '',
+    role: '',
+  },
+  validate: {
+    email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
+    name: (value) => (value.length < 2 ? 'Name too short' : null),
+  },
+})
+```
+
+### Validation Rules from Legacy Docs:
+If legacy project documentation exists, pull validation rules directly from `BUSINESS_RULES.md`:
+
+```tsx
+// From BUSINESS_RULES.md Rule booking.003: "Phone must be NZ format"
+validate: {
+  phone: (value) => /^(\+64|0)\d{7,10}$/.test(value) ? null : 'Must be valid NZ phone number',
+}
+```
+
+### Loading States:
+Every async action needs a loading state:
+```tsx
+<Button loading={isSubmitting} onClick={handleSubmit}>
+  Submit
+</Button>
+```
+
+### Conditional Rendering from Business Rules:
+If `BUSINESS_RULES.md` says "Show payment section only when total > 0":
+```tsx
+{total > 0 && (
+  <div className="mt-6 border-t border-gray-200 pt-6">
+    {/* Payment section */}
+  </div>
+)}
+```
+
+---
+
+## Step 7: Quality Gate — The Pixel Test
+
+Before delivering, verify every element:
+
+### Visual Checklist:
+- [ ] **Colors**: Every background, text, border, icon color matches the design
+- [ ] **Typography**: Every font size, weight, family, line height, letter spacing matches
+- [ ] **Spacing**: Every padding, margin, gap matches (check with Tailwind spacing scale)
+- [ ] **Borders**: Every border width, style, color, radius matches
+- [ ] **Shadows**: Every shadow matches (depth, spread, color, offset)
+- [ ] **Icons**: Every icon matches the design (correct icon, correct size, correct color)
+- [ ] **Images**: Placeholder images or actual images in the correct aspect ratio and position
+- [ ] **Alignment**: Every element is aligned exactly as in the design (left, center, right, baseline)
+- [ ] **Hover states**: If the design shows hover states, they're implemented
+- [ ] **Active/focus states**: Input focus rings, button active states
+- [ ] **Empty states**: If the design shows empty/zero states, they're implemented
+- [ ] **Error states**: If the design shows error states (red borders, error messages), they're implemented
+- [ ] **Loading states**: Skeleton loaders or spinners where data would load
+
+### Code Checklist:
+- [ ] **No raw HTML form elements**: Zero `<input>`, `<select>`, `<button>`, `<textarea>` tags — all Mantine
+- [ ] **No inline styles for layout**: All layout via Tailwind classes
+- [ ] **No CSS files**: Everything is Tailwind utilities or Mantine style props
+- [ ] **TypeScript**: All components properly typed, interfaces defined
+- [ ] **Component size**: No component over 150 lines
+- [ ] **Responsive**: Works on mobile, tablet, desktop (or matches design's target viewport)
+
+### Comparison Method:
+If working from an image/screenshot, mentally overlay your output on the design:
+- Is anything shifted left/right by even 4px? Fix it.
+- Is any text a shade different? Fix it.
+- Is any spacing off by even one Tailwind unit? Fix it.
+- Is any border radius wrong? Fix it.
+
+The standard is not "close enough." The standard is "I cannot tell the difference."
+
+---
+
+## Step 8: Deliver
+
+### Single Component:
+If the design is a single screen, deliver as one file with extracted sub-components.
+
+### Multi-Page Application:
+Deliver as a component folder:
+
+```
+{FeatureName}/
+├── index.tsx                    ← Re-exports
+├── {PageName}.tsx               ← Page component
+├── components/
+│   ├── {Component}.tsx          ← Each visual section
+│   └── ...
+├── hooks/
+│   └── use{Feature}.ts          ← Data/state hooks
+└── types/
+    └── index.ts                 ← Interfaces
+```
+
+### Always Include:
+1. The component code (React + Tailwind + Mantine)
+2. Any Tailwind config extensions needed
+3. Any Mantine theme customizations needed
+4. A brief note on which Mantine packages need to be installed (`@mantine/core`, `@mantine/form`, `@mantine/dates`, etc.)
+
+---
+
+## Handling Ambiguity
+
+When the design is unclear (blurry screenshot, incomplete mockup, wireframe without colors):
+
+1. **Ask first**: "I can see the layout but the colors are unclear. Should I use [your best guess from the design] or do you have a color palette?"
+2. **Use sensible defaults**: If you must guess, use Mantine's default theme colors — they're professional and neutral.
+3. **Flag assumptions**: "I assumed this is a Select dropdown based on the arrow icon. Let me know if it should be something else."
+4. **Never skip elements**: If something is partially visible or unclear, implement your best interpretation and flag it. Do not leave gaps.
+
+---
+
+## Working with Legacy Documentation
+
+When legacy project documentation is available, it supercharges your replication:
+
+### What Each Document Gives You:
+
+| Document | What You Get For UI |
+|----------|-------------------|
+| `DATA_MODELS.md` | TypeScript interfaces, field names, types for forms and tables |
+| `API_REGISTRY.md` | Endpoint URLs, request/response shapes for data fetching hooks |
+| `BUSINESS_RULES.md` | Validation rules, conditional display logic, field constraints, error messages |
+| `MASTER_SKILL.md` | Architecture context, module relationships, auth patterns |
+| Module `SKILL.md` | Specific module's endpoints, rules, data models — everything for that screen |
+| `GLOSSARY.md` | Domain terms — use correct labels in the UI |
+
+### Priority Order:
+1. **The visual design is the PRIMARY source** — match it exactly
+2. **Legacy docs are SUPPLEMENTARY** — they tell you what data to wire up, what rules to enforce, and what labels to use
+3. **If the design contradicts the docs** (e.g., design shows a field that docs say shouldn't exist), follow the design and flag the discrepancy
+
+### Example Integration:
+
+Design shows a patient form. Legacy `BUSINESS_RULES.md` has:
+```
+Rule patient.003: NHI number must be 3 letters + 4 digits
+Rule patient.007: Date of birth cannot be in the future
+Rule patient.012: Email is required if notification preference is "email"
+```
+
+Your implementation:
+```tsx
+const form = useForm({
+  validate: {
+    nhi: (v) => /^[A-Z]{3}\d{4}$/.test(v) ? null : 'NHI must be 3 letters + 4 digits',
+    dateOfBirth: (v) => v > new Date() ? 'Date of birth cannot be in the future' : null,
+    email: (v, values) =>
+      values.notificationPref === 'email' && !v ? 'Email required for email notifications' : null,
+  },
+})
+```
+
+The design tells you WHERE the fields go. The rules tell you HOW to validate them.

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

@@ -1,32 +0,0 @@
----
-name: aisupportapp/test-installation
-description: No description
-version: 1.0.0
-scope: project
-last_reviewed: 2026-03-29
----
-
-# 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/viteapp-core-workflows/SKILL.md

@@ -1,32 +0,0 @@
----
-name: viteapp/core-workflows
-description: No description
-version: 1.0.0
-scope: project
-last_reviewed: 2026-03-29
----
-
-# 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