@vadimcomanescu/nadicode-design-system 4.0.1 → 4.0.2

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

@@ -1,311 +0,0 @@
-# Recipe: Checkout
-
-Payment flow with Stripe integration, order summary, and success state.
-
-## Route Patterns
-
-- `/checkout`
-- `/checkout/success`
-
-## Shell
-
-`marketing-shell` (minimal: logo + trust badge, no full nav to avoid abandonment)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| Logo            Secure checkout   [Back to cart]|
-+------------------------------------------------+
-|                                                 |
-|  +-------------------------+  +-------------+   |
-|  | Checkout Form           |  | Order       |   |
-|  |                         |  | Summary     |   |
-|  | Contact Information     |  |             |   |
-|  | [Email input]           |  | Item 1  $29 |   |
-|  |                         |  | Item 2  $49 |   |
-|  | Payment                 |  |             |   |
-|  | [Stripe Card Element]   |  | Subtotal $78|   |
-|  |                         |  | Tax      $8 |   |
-|  | Billing Address         |  | ----------- |   |
-|  | [Address fields]        |  | Total    $86|   |
-|  |                         |  |             |   |
-|  | [Pay $86.00]            |  | [Coupon]    |   |
-|  +-------------------------+  +-------------+   |
-|                                                 |
-|  [Stripe] [SSL] [Money-back guarantee badges]   |
-+------------------------------------------------+
-
-Success Page:
-+------------------------------------------------+
-| Logo                                  [Home]    |
-+------------------------------------------------+
-|                                                 |
-|           [ConfettiBurst]                       |
-|           [SuccessCheck]                        |
-|                                                 |
-|        Payment successful!                      |
-|        Order #12345 confirmed.                  |
-|                                                 |
-|    We've sent a confirmation to your email.     |
-|                                                 |
-|    [Go to Dashboard]    [View Receipt]          |
-|                                                 |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Minimal Header
-
-```tsx
-<header className="flex items-center justify-between px-6 py-4 border-b border-border">
-  <Logo className="h-6" />
-  <div className="flex items-center gap-2 text-text-secondary">
-    <LockIcon size={14} />
-    <Typography variant="small">Secure checkout</Typography>
-  </div>
-  <Button variant="ghost" size="sm" asChild>
-    <a href="/pricing">Back</a>
-  </Button>
-</header>
-```
-
-### 2. Checkout Form + Order Summary (2-column)
-
-```tsx
-<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
-  <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-8">
-    {/* Left: Form */}
-    <div className="space-y-6">
-      {/* Contact */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Contact information</Heading>
-        <div className="space-y-4">
-          <FormField>
-            <FormLabel>Email</FormLabel>
-            <FormControl><Input type="email" /></FormControl>
-          </FormField>
-        </div>
-      </Card>
-
-      {/* Payment */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Payment</Heading>
-        <CheckoutForm
-          amount={totalAmount}
-          onSuccess={handlePaymentSuccess}
-          onError={handlePaymentError}
-        />
-      </Card>
-
-      {/* Billing Address */}
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Billing address</Heading>
-        <div className="grid grid-cols-2 gap-4">
-          <FormField>
-            <FormLabel>First name</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          <FormField>
-            <FormLabel>Last name</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          <FormField className="col-span-2">
-            <FormLabel>Address</FormLabel>
-            <FormControl><Input /></FormControl>
-          </FormField>
-          {/* City, State, ZIP */}
-        </div>
-      </Card>
-    </div>
-
-    {/* Right: Order Summary */}
-    <div className="lg:sticky lg:top-8 self-start">
-      <Card className="glass-panel p-6">
-        <Heading level={4} size="title"  className="mb-4">Order summary</Heading>
-        <div className="space-y-3">
-          {items.map(item => (
-            <div key={item.id} className="flex items-center justify-between">
-              <Typography variant="small">{item.name}</Typography>
-              <Typography variant="small" className="font-medium">${item.price}</Typography>
-            </div>
-          ))}
-        </div>
-        <Separator className="my-4" />
-        <div className="space-y-2">
-          <div className="flex justify-between text-text-secondary text-sm">
-            <span>Subtotal</span><span>${subtotal}</span>
-          </div>
-          <div className="flex justify-between text-text-secondary text-sm">
-            <span>Tax</span><span>${tax}</span>
-          </div>
-        </div>
-        <Separator className="my-4" />
-        <div className="flex justify-between font-bold text-lg">
-          <span>Total</span><span>${total}</span>
-        </div>
-
-        {/* Coupon input */}
-        <div className="mt-4">
-          <InputGroup>
-            <Input placeholder="Coupon code" />
-            <Button variant="outline">Apply</Button>
-          </InputGroup>
-        </div>
-      </Card>
-    </div>
-  </div>
-
-  {/* Trust badges */}
-  <div className="flex items-center justify-center gap-6 mt-8 text-text-tertiary">
-    <div className="flex items-center gap-1 text-sm">
-      <ShieldIcon size={14} /> SSL Encrypted
-    </div>
-    <div className="flex items-center gap-1 text-sm">
-      <RefreshIcon size={14} /> 30-day guarantee
-    </div>
-  </div>
-</div>
-```
-
-### 3. Success Page
-
-```tsx
-<div className="min-h-dvh flex flex-col items-center justify-center p-6 text-center">
-  <ConfettiBurst trigger={showCelebration} />
-  <SuccessCheck className="mb-6" />
-  <Heading level={2} size="section" >Payment successful!</Heading>
-  <Typography variant="p" className="text-text-secondary mt-2 mb-2">
-    Order #{orderId} confirmed.
-  </Typography>
-  <Typography variant="small" className="text-text-tertiary mb-8">
-    We've sent a confirmation to {email}
-  </Typography>
-  <div className="flex gap-4">
-    <Button asChild><a href="/dashboard">Go to Dashboard</a></Button>
-    <Button variant="outline" asChild><a href={receiptUrl}>View Receipt</a></Button>
-  </div>
-</div>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-
-CHECKOUT PAGE:
-BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [header]    Minimal header visible        (instant)
-T+50ms    [contact]   Contact section               {fadeInUp, snappy}
-T+150ms   [payment]   Payment section               {fadeInUp, snappy}
-T+250ms   [address]   Billing address section       {fadeInUp, snappy}
-T+100ms   [summary]   Order summary (right column)  {fadeIn, snappy}
-
-SUCCESS PAGE:
-BUDGET: 500ms | SPRING: bouncy | REDUCED: check visible, no confetti
-
-T+0ms     [confetti]  ConfettiBurst fires            (particle animation)
-T+100ms   [check]     SuccessCheck animates           {scaleIn, bouncy}
-T+300ms   [title]     Success title fades in          {fadeInUp, gentle}
-T+400ms   [details]   Order details fade in           {fadeIn, snappy}
-T+500ms   [actions]   Buttons fade in                 {fadeIn, snappy}
-
-REDUCED MOTION: All items visible immediately, no confetti
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `CheckoutForm` | `@vadimcomanescu/nadicode-design-system/checkout-form` | Stripe Elements payment |
-| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers, order summary |
-| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Contact, address fields |
-| `InputGroup` | `@vadimcomanescu/nadicode-design-system/input-group` | Coupon input + apply button |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, apply, navigation |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, text |
-| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | Price dividers |
-| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark |
-| `Form` / `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Form management |
-| `ConfettiBurst` | `@vadimcomanescu/nadicode-design-system/confetti-burst` | Success celebration |
-| `SuccessCheck` | `@vadimcomanescu/nadicode-design-system/success-check` | Success checkmark |
-| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Payment errors |
-| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Processing state |
-
-### Allowed (optional)
-
-`CheckoutFormDemo`, `Label`, `Select` (country picker), `NativeSelect`, `Badge`, `Tooltip`
-
-### Forbidden
-
-`Sidebar`, `NavigationMenu`, `DataTable`, chart components, agentic components, decorative effects, marketing blocks
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Form ready for input |
-| `submitting` | Pay button clicked | Button shows Spinner, form disabled |
-| `processing` | Stripe processing | "Processing payment..." message |
-| `error` | Payment failed | `Alert` variant="destructive" with error + retry |
-| `success` | Payment succeeded | Redirect to success page with celebration |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Order Summary |
-|------------|--------|---------------|
-| Mobile | Single column, summary above form | Collapsible or stacked above form |
-| `lg:` | 2-column: form (flex-1) + summary (380px sticky) | Sticky sidebar |
-
----
-
-## Styling Rules
-
-- Form sections: `glass-panel p-6`
-- Order summary: `glass-panel p-6`, sticky on desktop
-- Trust badges: `text-text-tertiary`, small, centered
-- No heavy decoration (reduce friction)
-- Minimal navigation (prevent abandonment)
-- Labels always stacked above inputs
-
----
-
-## Accessibility
-
-- Payment form has proper labels (Stripe Elements handle internal a11y)
-- Error messages use `role="alert"`
-- Form fields have `autocomplete` attributes (email, name, address)
-- Tab order: contact -> payment -> address -> submit
-- Success page auto-announces via `aria-live`
-
----
-
-## Reference Implementations
-
-- `src/components/ui/CheckoutForm.tsx`
-- `src/components/ui/CheckoutFormDemo.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/company-about.md

@@ -1,276 +0,0 @@
-# Recipe: Company About
-
-About, manifesto, or team page showcasing company mission, values, team, and partnerships.
-
-## Route Pattern
-
-`/about`, `/manifesto`, or `/chi-siamo`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              MISSION HERO                       |
-|    Company mission statement                    |
-|    Subtitle: founding story or tagline          |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|         VALUES GRID (3-col)                     |
-|  +----------+ +----------+ +----------+         |
-|  | Value 1  | | Value 2  | | Value 3  |         |
-|  +----------+ +----------+ +----------+         |
-|  +----------+ +----------+ +----------+         |
-|  | Value 4  | | Value 5  | | Value 6  |         |
-|  +----------+ +----------+ +----------+         |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|         TEAM SECTION                            |
-|   +--------+ +--------+ +--------+ +--------+  |
-|   | Member | | Member | | Member | | Member |  |
-|   +--------+ +--------+ +--------+ +--------+  |
-|                                                 |
-+------------------------------------------------+
-|        COMPANY STATS                            |
-|   +------+  +------+  +------+  +------+       |
-|   | Year |  | Team |  | Clients| | Projects   |
-|   | 2020 |  |  25  |  |  100+  | |  500+  |   |
-|   +------+  +------+  +------+  +------+       |
-+------------------------------------------------+
-|         PARTNERS / LOGO CLOUD                   |
-|   Partner and technology logos                   |
-+------------------------------------------------+
-|         FINAL CTA SECTION                       |
-|    "Join our mission" + [CTA Button]            |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Header
-
-```tsx
-<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Contact Us</Button>} />
-```
-
-### 2. Mission Hero
-
-```tsx
-<section className="relative py-24 md:py-32 overflow-hidden">
-  <ShaderBackground shader="meshGradient" intent="hero" opacity={0.15} />
-  <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-    <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
-      <motion.div variants={heroStagger.child}>
-        <Badge variant="outline" className="mb-4">Our Story</Badge>
-      </motion.div>
-      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
-        {missionStatement}
-      </motion.h1>
-      <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-3xl mx-auto">
-        {foundingStory}
-      </motion.p>
-    </motion.div>
-  </div>
-</section>
-```
-
-### 3. Values Grid
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="text-center mb-12">
-        <Heading level={2} size="section" >Our Values</Heading>
-        <Typography variant="lead" className="mt-4 text-text-secondary">
-          The principles that guide everything we do
-        </Typography>
-      </div>
-      <FeatureGridBlock features={values} columns={3} />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 4. Team Section
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="text-center mb-12">
-        <Heading level={2} size="section" >Meet the Team</Heading>
-        <Typography variant="lead" className="mt-4 text-text-secondary">
-          The people behind the mission
-        </Typography>
-      </div>
-      <TeamBlock members={teamMembers} />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. Company Stats
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <StatsMarketingBlock stats={companyStats} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 6. Partners / Logo Cloud
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-12 md:py-16 bg-muted">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <Typography variant="small" className="text-center text-text-tertiary mb-6">
-        Our partners and technology stack
-      </Typography>
-      <LogoCloud logos={partnerLogos} />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 7. Final CTA
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <CallToActionBlock
-      title="Join our mission"
-      description="We're always looking for talented people who share our values."
-      action={<Button size="lg">Get in Touch</Button>}
-    />
-  </section>
-</ScrollFadeIn>
-```
-
-### 8. Footer
-
-```tsx
-<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 800ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
-
-T+0ms     [nav]        Header visible                  (instant)
-T+100ms   [badge]      Story badge                     {fadeIn, snappy}
-T+200ms   [headline]   Mission statement               {fadeInUp, dramatic}
-T+400ms   [subtitle]   Founding story                  {fadeInUp, dramatic}
-T+600ms   [shader]     Hero shader appears             {fadeIn, gentle}
-
-SCROLL-TRIGGERED (below fold):
-[values]       ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
-[team]         ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 80ms}
-[stats]        ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[partners]     ScrollFadeIn at 20% visible    {fadeIn, gentle}
-[cta]          ScrollFadeIn at 20% visible    {scaleIn, gentle}
-
-REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Site footer |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Hero tag |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `TeamBlock` | `@vadimcomanescu/nadicode-design-system/catalog/components` via `seedComponents` | Team member grid |
-
-### Allowed (optional)
-
-`FeatureBlock`, `FeatureGridBlock`, `StatsMarketingBlock`, `LogoCloud`, `CallToActionBlock`, `HeroBlock`, `HeroSectionBlock`, `Card`, `ShaderBackground`, `TestimonialsBlock`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `PricingBlock`, `SettingsLayout`, `ChatLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Full about page content |
-| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Hero | Values | Team | Stats | Content Width |
-|------------|------|--------|------|-------|---------------|
-| Mobile | Stacked, text-center | 1 col | 1 col | 2 col | px-4 |
-| `sm:` | Stacked, text-center | 2 col | 2 col | 2 col | px-6, max-w-7xl |
-| `lg:` | Centered | 3 col | 4 col | 4 col | px-8, max-w-7xl |
-
----
-
-## Styling Rules
-
-- Mission hero uses `ShaderBackground` with low opacity for subtle ambient
-- Value cards use `glass-panel` with icon + heading + description
-- Team cards use circular avatar, name, role, and social links
-- Section backgrounds alternate: `bg-background` and `bg-muted`
-- Partner logos are grayscale with hover color reveal
-- No raw palette colors; semantic tokens only
-
----
-
-## Accessibility
-
-- Hero heading is `<h1>`, section headings are `<h2>`
-- Skip-nav link to main content
-- Team member images have alt text with name and role
-- Social links have aria-labels
-- Mobile nav is keyboard accessible with focus trap
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/TeamBlock.tsx`
-- `src/components/blocks/FeatureGridBlock.tsx`
-- `src/components/blocks/StatsMarketingBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```