@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/onboarding.md

@@ -1,258 +0,0 @@
-# Recipe: Onboarding
-
-First-run setup wizard with step-by-step progression and completion celebration.
-
-## Route Pattern
-
-`/onboarding` (with optional `/onboarding/[step]`)
-
-## Shell
-
-`onboarding-shell` (minimal header with logo + progress bar, no navigation)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| Logo                Step 2 of 5     [Skip]      |
-+------------------------------------------------+
-| [===------] Progress bar (40%)                  |
-+------------------------------------------------+
-|                                                 |
-|    +--------------------------------------+     |
-|    | Step Title                           |     |
-|    | Step description                     |     |
-|    |                                      |     |
-|    | [Step-specific content]              |     |
-|    | - Form fields, selections,           |     |
-|    |   checkboxes, team invite, etc.      |     |
-|    |                                      |     |
-|    +--------------------------------------+     |
-|                                                 |
-|    [Back]                          [Continue]   |
-+------------------------------------------------+
-
-Completion (final step):
-+------------------------------------------------+
-|                                                 |
-|           [ConfettiBurst]                       |
-|           [SuccessCheck]                        |
-|                                                 |
-|        Welcome aboard, [Name]!                  |
-|        Your workspace is ready.                 |
-|                                                 |
-|           [Go to Dashboard]                     |
-|                                                 |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Onboarding Header
-
-```tsx
-<header className="flex items-center justify-between px-6 py-4 border-b border-border">
-  <Logo className="h-6" />
-  <Typography variant="small" className="text-text-secondary">
-    Step {currentStep} of {totalSteps}
-  </Typography>
-  <Button variant="ghost" size="sm" onClick={handleSkip}>Skip</Button>
-</header>
-```
-
-### 2. Progress Bar
-
-```tsx
-<Progress value={(currentStep / totalSteps) * 100} className="h-1 rounded-none" />
-```
-
-### 3. Step Content (using FormWizard or manual)
-
-```tsx
-<div className="flex-1 flex items-center justify-center p-6">
-  <div className="w-full max-w-lg">
-    <Heading level={2} size="section"  className="mb-2">{step.title}</Heading>
-    <Typography variant="lead" className="text-text-secondary mb-8">
-      {step.description}
-    </Typography>
-
-    {/* Step-specific content */}
-    {step.type === "form" && (
-      <div className="space-y-4">
-        <FormField>{/* Fields for this step */}</FormField>
-      </div>
-    )}
-    {step.type === "selection" && (
-      <div className="grid grid-cols-2 gap-4">
-        {step.options.map(opt => (
-          <Card
-            key={opt.id}
-            className={cn("glass-panel p-4 cursor-pointer", selected === opt.id && "ring-2 ring-accent")}
-            onClick={() => setSelected(opt.id)}
-          >
-            {opt.label}
-          </Card>
-        ))}
-      </div>
-    )}
-  </div>
-</div>
-```
-
-### 4. Navigation Controls
-
-```tsx
-<footer className="flex items-center justify-between px-6 py-4 border-t border-border">
-  <Button variant="ghost" onClick={handleBack} disabled={currentStep === 1}>
-    Back
-  </Button>
-  <Button onClick={handleNext} disabled={!stepValid}>
-    {currentStep === totalSteps ? "Complete Setup" : "Continue"}
-  </Button>
-</footer>
-```
-
-### 5. Completion Celebration
-
-```tsx
-<div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
-  <ConfettiBurst trigger={showCelebration} />
-  <SuccessCheck className="mb-6" />
-  <Heading level={2} size="section" >Welcome aboard, {name}!</Heading>
-  <Typography variant="lead" className="text-text-secondary mt-2 mb-8">
-    Your workspace is ready to go.
-  </Typography>
-  <Button size="lg" onClick={() => router.push("/dashboard")}>
-    Go to Dashboard
-  </Button>
-</div>
-```
-
----
-
-## Standard Steps (3-5 recommended)
-
-| Step | Content | Validation |
-|------|---------|------------|
-| 1. Profile | Name, avatar upload | Name required |
-| 2. Workspace | Workspace name, URL slug | Name required, slug unique |
-| 3. Preferences | Role selection, use case | At least 1 selected |
-| 4. Team | Invite team members (optional) | Skip-able |
-| 5. Complete | Celebration + CTA | Auto-valid |
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 400ms per step | SPRING: gentle | REDUCED: opacity-only
-
-STEP TRANSITION (forward):
-T+0ms     [current]   Current step slides out left   {slideOutLeft, gentle}
-T+100ms   [next]      Next step slides in from right  {slideInRight, gentle}
-T+200ms   [fields]    Step fields stagger in           {blockStagger, 60ms}
-
-STEP TRANSITION (back):
-T+0ms     [current]   Current step slides out right
-T+100ms   [prev]      Previous step slides in from left
-
-COMPLETION:
-T+0ms     [confetti]  ConfettiBurst fires              (particle animation)
-T+100ms   [check]     SuccessCheck animates             {scaleIn, bouncy}
-T+300ms   [text]      Welcome text fades in             {fadeInUp, gentle}
-T+450ms   [cta]       Dashboard button fades in         {fadeIn, snappy}
-
-REDUCED MOTION: Steps swap instantly (opacity only), confetti disabled
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Progress` | `@vadimcomanescu/nadicode-design-system/progress` | Step progress bar |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Navigation, completion |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Selection cards, step container |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Step titles, descriptions |
-| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark in header |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Form fields |
-| `ConfettiBurst` | `@vadimcomanescu/nadicode-design-system/confetti-burst` | Completion celebration |
-| `SuccessCheck` | `@vadimcomanescu/nadicode-design-system/success-check` | Completion checkmark |
-| `FormWizard` | `@vadimcomanescu/nadicode-design-system/form-wizard` | Multi-step form wrapper (optional) |
-
-### Allowed (optional)
-
-`AvatarUpload`, `Select`, `Checkbox`, `RadioGroup`, `TagInput`, `Label`, `Form`, `FormField`, `Stepper`, `Step`, `Badge`, `Separator`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, chart components, `NavigationMenu`, `HeroBlock`, agentic components
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `step-active` | Viewing a step | Step content visible, progress updated |
-| `step-valid` | Step requirements met | Continue button enabled |
-| `step-error` | Validation failure | Field-level errors shown |
-| `step-saving` | Server-side step save | Continue button shows Spinner |
-| `complete` | Final step completed | Celebration screen |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Step Content | Navigation |
-|------------|-------------|------------|
-| Mobile | Full width, px-4, max-w-lg | Stacked back/next, full width |
-| `sm:` | Centered, max-w-lg | Back left, Continue right |
-| `lg:` | Same as sm (onboarding stays narrow) | Same |
-
----
-
-## Styling Rules
-
-- Step container: centered, `max-w-lg`
-- Selection cards: `glass-panel` with `ring-2 ring-accent` when selected
-- Progress bar: `h-1 rounded-none` for full-width slim bar
-- No sidebar, no heavy navigation
-- Background: `bg-background` (clean, minimal)
-
----
-
-## Accessibility
-
-- Progress bar has `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
-- Step transitions announce new step title via `aria-live="polite"`
-- Back/Continue buttons have descriptive labels
-- Skip button explains what's skipped
-- Focus moves to step title on transition
-
----
-
-## Reference Implementations
-
-- `src/app/onboarding/page.tsx`
-- `src/components/blocks/OnboardingBlock.tsx`
-- `src/components/blocks/WizardBlock.tsx`
-- `src/components/ui/FormWizard.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```

package/.agents/skills/seed/recipes/pricing.md

@@ -1,271 +0,0 @@
-# Recipe: Pricing
-
-Plan comparison page with billing toggle, feature matrix, and conversion CTAs.
-
-## Route Pattern
-
-`/pricing`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              PRICING HERO                       |
-|    "Simple, transparent pricing"                |
-|    "No hidden fees. Cancel anytime."            |
-|                                                 |
-|    [Monthly]  [Annual - Save 20%]   (toggle)    |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|  +----------+  +------------+  +----------+     |
-|  | Free     |  | Pro        |  | Enterprise|    |
-|  | $0/mo    |  | $29/mo     |  | Custom   |    |
-|  |          |  | [Popular]  |  |          |    |
-|  | Feature 1|  | Feature 1  |  | Feature 1|    |
-|  | Feature 2|  | Feature 2  |  | Feature 2|    |
-|  | Feature 3|  | Feature 3  |  | Feature 3|    |
-|  |   ...    |  |   ...      |  |   ...    |    |
-|  |          |  |            |  |          |    |
-|  | [Start]  |  | [Start]   |  | [Contact]|    |
-|  +----------+  +------------+  +----------+     |
-|                                                 |
-+------------------------------------------------+
-|           FEATURE COMPARISON TABLE              |
-|  (expandable, full feature matrix)              |
-+------------------------------------------------+
-|                                                 |
-|              FAQ SECTION                        |
-|                                                 |
-+------------------------------------------------+
-|           FINAL CTA                             |
-+------------------------------------------------+
-| FooterBlock                                     |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Pricing Hero
-
-```tsx
-<section className="py-16 md:py-24 text-center">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <Heading level={1} size="display" >Simple, transparent pricing</Heading>
-    <Typography variant="lead" className="mt-4 text-text-secondary max-w-2xl mx-auto">
-      No hidden fees. Cancel anytime.
-    </Typography>
-    <div className="mt-8 inline-flex items-center gap-3">
-      <Typography variant="small" className={cn(!isAnnual && "font-bold")}>Monthly</Typography>
-      <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />
-      <Typography variant="small" className={cn(isAnnual && "font-bold")}>
-        Annual <Badge variant="success" className="ml-1">Save 20%</Badge>
-      </Typography>
-    </div>
-  </div>
-</section>
-```
-
-### 2. Plan Cards
-
-```tsx
-<section className="pb-16 md:pb-24">
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-      {plans.map(plan => (
-        <Card
-          key={plan.id}
-          className={cn("glass-panel p-8 relative", plan.popular && "ring-2 ring-accent")}
-        >
-          {plan.popular && (
-            <Badge className="absolute -top-3 left-1/2 -translate-x-1/2" variant="default">
-              Most Popular
-            </Badge>
-          )}
-          <Heading level={4} size="title" >{plan.name}</Heading>
-          <div className="mt-4 flex items-baseline gap-1">
-            <span className="text-4xl font-bold">${isAnnual ? plan.annualPrice : plan.monthlyPrice}</span>
-            <span className="text-text-secondary">/mo</span>
-          </div>
-          <Typography variant="small" className="text-text-secondary mt-2">
-            {plan.description}
-          </Typography>
-          <Separator className="my-6" />
-          <ul className="space-y-3">
-            {plan.features.map(f => (
-              <li key={f} className="flex items-center gap-2 text-sm">
-                <CheckIcon size={16} className="text-success shrink-0" />
-                {f}
-              </li>
-            ))}
-          </ul>
-          <Button
-            className="w-full mt-8"
-            variant={plan.popular ? "default" : "outline"}
-          >
-            {plan.cta}
-          </Button>
-        </Card>
-      ))}
-    </div>
-  </div>
-</section>
-```
-
-### 3. Feature Comparison (optional)
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <ComparisonBlock items={featureMatrix} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 4. FAQ
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <FAQBlock items={pricingFaqItems} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. Final CTA
-
-```tsx
-<ScrollFadeIn>
-  <CallToActionBlock
-    title="Start building today"
-    description="Free plan available. No credit card required."
-    action={<Button size="lg">Get Started Free</Button>}
-  />
-</ScrollFadeIn>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 800ms | SPRING: snappy (cards), dramatic (hero) | REDUCED: opacity-only
-
-T+0ms     [nav]       Header visible                 (instant)
-T+100ms   [headline]  Pricing headline               {fadeInUp, dramatic}
-T+250ms   [subtitle]  Subtitle + toggle              {fadeInUp, dramatic}
-T+400ms   [card-1]    First plan card                {fadeInUp, snappy}
-T+500ms   [card-2]    Second plan card (popular)     {fadeInUp, snappy}
-T+600ms   [card-3]    Third plan card                {fadeInUp, snappy}
-
-TOGGLE ANIMATION:
-[prices]    Price numbers animate                    {CountingNumber transition}
-[badge]     Annual badge scales in                   {scaleIn, bouncy}
-
-SCROLL-TRIGGERED:
-[comparison] ScrollFadeIn at 20%                    {fadeInUp, snappy}
-[faq]        ScrollFadeIn at 20%                    {fadeInUp, snappy}
-[cta]        ScrollFadeIn at 20%                    {scaleIn, gentle}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Plan cards |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Popular tag, annual savings |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Plan CTAs |
-| `Switch` | `@vadimcomanescu/nadicode-design-system/switch` | Billing toggle |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, descriptions |
-| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | Plan card divider |
-| `FAQBlock` | `@vadimcomanescu/nadicode-design-system/faq-block` | FAQ section |
-| `CallToActionBlock` | `@vadimcomanescu/nadicode-design-system/call-to-action-block` | Final CTA |
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Footer |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animation |
-| `CountingNumber` | `@vadimcomanescu/nadicode-design-system/text-effects/counting-number` | Price animation on toggle |
-
-### Allowed (optional)
-
-`PricingBlock`, `ComparisonBlock`, `Table`, `Tooltip`, `ToggleGroup`, `Tabs`, `Accordion`, `CheckoutForm`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `FormWizard`, agentic components, decorative effects (in plan cards)
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded (monthly selected) | Plan cards with monthly prices |
-| `annual-toggle` | User toggles annual | Prices animate to annual, savings badge appears |
-| `cta-loading` | Plan CTA clicked | Button shows Spinner |
-| `checkout-redirect` | CTA completed | Redirect to checkout or external billing |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Plan Cards | Comparison | FAQ |
-|------------|------------|------------|-----|
-| Mobile | 1 col, stacked | Horizontal scroll table | Full width |
-| `sm:` | 2 col (popular card spans or emphasized) | Same | Full width |
-| `lg:` | 3 col side-by-side | Full table | max-w-3xl centered |
-
----
-
-## Styling Rules
-
-- Plan cards: `glass-panel p-8`
-- Popular card: `ring-2 ring-accent` for emphasis
-- Price numbers: `text-4xl font-bold`
-- Feature checkmarks: `text-success`
-- No raw palette colors
-- Billing toggle: standard `Switch` component
-
----
-
-## Accessibility
-
-- Billing toggle has `aria-label="Switch to annual billing"`
-- Plan cards are not `<button>` (CTA button inside is the interactive element)
-- Feature lists use `<ul>` with semantic markup
-- Price changes announce via `aria-live="polite"` region
-- All CTAs have descriptive text
-
----
-
-## Reference Implementations
-
-- `src/app/pricing/page.tsx`
-- `src/components/blocks/PricingBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```