@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

package/.agents/skills/seed/recipes/error-pages.md

@@ -1,199 +0,0 @@
-# Recipe: Error Pages
-
-404 Not Found and 500 Server Error fallback surfaces with recovery CTAs.
-
-## Route Patterns
-
-- `/404` (or Next.js `not-found.tsx`)
-- `/500` (or Next.js `error.tsx`)
-- Any route with `notFound()` or unhandled error
-
-## Shell
-
-`fallback-shell` (minimal: logo + "go home" link, no sidebar or full nav)
-
----
-
-## Layout Blueprint
-
-```
-+------------------------------------------------+
-| Logo                                  [Home]   |
-+------------------------------------------------+
-|                                                 |
-|                                                 |
-|            [Illustration / Icon]                |
-|                                                 |
-|              404                                |
-|              Page not found                     |
-|                                                 |
-|    The page you're looking for doesn't          |
-|    exist or has been moved.                     |
-|                                                 |
-|    [Go Home]    [Contact Support]               |
-|                                                 |
-|                                                 |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Minimal Header
-
-```tsx
-<header className="flex items-center justify-between px-6 py-4">
-  <Logo className="h-6" />
-  <Button variant="ghost" asChild>
-    <a href="/">Home</a>
-  </Button>
-</header>
-```
-
-### 2. Error Content (centered)
-
-```tsx
-<main className="flex-1 flex items-center justify-center px-4">
-  <div className="text-center max-w-md">
-    {/* Large status code or icon */}
-    <div className="mb-6">
-      <Heading level={1} size="display"  className="text-8xl font-bold text-text-tertiary">
-        {statusCode}
-      </Heading>
-    </div>
-
-    {/* Error message */}
-    <Heading level={2} size="section"  className="mb-3">
-      {statusCode === 404 ? "Page not found" : "Something went wrong"}
-    </Heading>
-    <Typography variant="p" className="text-text-secondary mb-8">
-      {statusCode === 404
-        ? "The page you're looking for doesn't exist or has been moved."
-        : "We're working on fixing this. Please try again in a moment."}
-    </Typography>
-
-    {/* Recovery actions */}
-    <div className="flex flex-col sm:flex-row gap-3 justify-center">
-      <Button asChild>
-        <a href="/">Go Home</a>
-      </Button>
-      {statusCode === 500 && (
-        <Button variant="outline" onClick={() => window.location.reload()}>
-          Try Again
-        </Button>
-      )}
-      <Button variant="outline" asChild>
-        <a href="/contact">Contact Support</a>
-      </Button>
-    </div>
-  </div>
-</main>
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 250ms | SPRING: gentle | REDUCED: opacity-only
-
-T+0ms     [header]    Logo + home link visible       (instant)
-T+50ms    [code]      Status code fades in            {fadeIn, gentle}
-T+100ms   [title]     Error title fades in            {fadeInUp, gentle}
-T+150ms   [desc]      Description fades in            {fadeInUp, gentle}
-T+250ms   [actions]   CTA buttons fade in             {fadeIn, snappy}
-
-REDUCED MOTION: All items visible immediately
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Recovery CTAs |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Status code, title, description |
-| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark |
-
-### Allowed (optional)
-
-`Card` (to wrap error content), `NotFoundBlock`, any single decorative icon from `@vadimcomanescu/nadicode-design-system/icons`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, charts, forms, `NavigationMenu`, heavy decorative effects, marketing blocks
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `not-found` | 404 response or `notFound()` | "Page not found" with go-home CTA |
-| `server-error` | 500 response or unhandled error | "Something went wrong" with retry + support CTAs |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Layout | Buttons |
-|------------|--------|---------|
-| Mobile | Centered, full width, px-4 | Stacked vertically |
-| `sm:` | Centered, max-w-md | Inline row |
-
----
-
-## Styling Rules
-
-- Status code: `text-8xl font-bold text-text-tertiary`
-- Background: `bg-background min-h-dvh`
-- No glass effects (keep it clean and fast)
-- No sidebar or heavy chrome
-- Semantic tokens only
-
----
-
-## Accessibility
-
-- Page has `role="main"` on content area
-- Status code is decorative (title conveys the error)
-- CTA buttons have descriptive text
-- Focus auto-moves to primary CTA
-
----
-
-## Next.js Implementation
-
-```tsx
-// app/not-found.tsx (404)
-export default function NotFound() {
-  return <ErrorPage statusCode={404} />
-}
-
-// app/error.tsx (500)
-"use client"
-export default function Error({ reset }: { reset: () => void }) {
-  return <ErrorPage statusCode={500} onRetry={reset} />
-}
-```
-
----
-
-## Reference Implementations
-
-- `src/app/not-found.tsx`
-- `src/components/blocks/NotFoundBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-```

package/.agents/skills/seed/recipes/marketing-landing.md

@@ -1,293 +0,0 @@
-# Recipe: Marketing Landing
-
-Public home/landing page with hero, features, social proof, and conversion CTAs.
-
-## Route Pattern
-
-`/` or `/landing`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              HERO SECTION                       |
-|    Headline (centered or split)                 |
-|    Subtitle                                     |
-|    [Primary CTA]  [Secondary CTA]              |
-|    Hero visual / ShaderBackground               |
-|                                                 |
-+------------------------------------------------+
-| Logo Cloud: partner/client logos (InfiniteSlider)|
-+------------------------------------------------+
-|                                                 |
-|         FEATURES GRID (3-col)                   |
-|  +----------+ +----------+ +----------+         |
-|  | Feature 1| | Feature 2| | Feature 3|         |
-|  +----------+ +----------+ +----------+         |
-|  +----------+ +----------+ +----------+         |
-|  | Feature 4| | Feature 5| | Feature 6|         |
-|  +----------+ +----------+ +----------+         |
-|                                                 |
-+------------------------------------------------+
-|        SOCIAL PROOF / STATS                     |
-|   +------+  +------+  +------+  +------+       |
-|   | Stat |  | Stat |  | Stat |  | Stat |       |
-|   +------+  +------+  +------+  +------+       |
-+------------------------------------------------+
-|                                                 |
-|         TESTIMONIALS (carousel or grid)         |
-|                                                 |
-+------------------------------------------------+
-|              PRICING TEASER                     |
-|     See plans / Compare options                 |
-+------------------------------------------------+
-|                                                 |
-|         FAQ (Accordion)                         |
-|                                                 |
-+------------------------------------------------+
-|         FINAL CTA SECTION                       |
-|    Headline + [CTA Button]                      |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Header
-
-```tsx
-<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Get Started</Button>} />
-```
-
-### 2. Hero Section
-
-```tsx
-<section className="relative py-24 md:py-32 overflow-hidden">
-  <ShaderBackground shader="meshGradient" intent="hero" opacity={0.25} />
-  <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">New: Feature X</Badge>
-      </motion.div>
-      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
-        {headline}
-      </motion.h1>
-      <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
-        {subtitle}
-      </motion.p>
-      <motion.div variants={heroStagger.child} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
-        <Button size="lg">Get Started</Button>
-        <Button size="lg" variant="outline">Learn More</Button>
-      </motion.div>
-    </motion.div>
-  </div>
-</section>
-```
-
-### 3. Logo Cloud
-
-```tsx
-<section className="py-12 border-y border-border-subtle">
-  <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">
-      Trusted by industry leaders
-    </Typography>
-    <LogoCloud logos={partnerLogos} />  {/* or InfiniteSlider */}
-  </div>
-</section>
-```
-
-### 4. Features 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" >Everything you need</Heading>
-        <Typography variant="lead" className="mt-4 text-text-secondary">
-          Section description
-        </Typography>
-      </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-        {features.map(f => <FeatureBlock key={f.id} {...f} />)}
-      </div>
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. Social Proof / Stats
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24 bg-muted">
-    <StatsMarketingBlock stats={stats} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 6. Testimonials
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <TestimonialsBlock testimonials={testimonials} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 7. FAQ
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <FAQBlock items={faqItems} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 8. Final CTA
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <CallToActionBlock
-      title="Ready to get started?"
-      description="Join thousands of teams already using our platform."
-      action={<Button size="lg">Start Free Trial</Button>}
-    />
-  </section>
-</ScrollFadeIn>
-```
-
-### 9. Footer
-
-```tsx
-<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 1000ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
-
-T+0ms     [nav]        Header visible                  (instant)
-T+100ms   [badge]      Announcement badge              {fadeIn, snappy}
-T+200ms   [headline]   Hero headline                   {fadeInUp, dramatic}
-T+350ms   [subtitle]   Hero subtitle                   {fadeInUp, dramatic}
-T+500ms   [ctas]       CTA buttons                     {fadeInUp, dramatic}
-T+700ms   [shader]     Hero visual/shader appears      {fadeIn, gentle}
-T+900ms   [logos]      Logo cloud fades in             {fadeIn, snappy}
-
-SCROLL-TRIGGERED (below fold):
-[features]     ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
-[stats]        ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[testimonials] ScrollFadeIn at 20% visible    {fadeIn, gentle}
-[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[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/header-block` | Site navigation |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
-| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
-| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Announcement tag |
-| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
-| `FeatureBlock` / `FeatureGridBlock` | `@vadimcomanescu/nadicode-design-system/feature*` | Feature showcase |
-| `FAQBlock` | `@vadimcomanescu/nadicode-design-system/faq-block` | FAQ accordion |
-| `CallToActionBlock` | `@vadimcomanescu/nadicode-design-system/call-to-action-block` | Final CTA |
-| `TestimonialsBlock` | `@vadimcomanescu/nadicode-design-system/testimonials-block` | Social proof |
-| `LogoCloud` | `@vadimcomanescu/nadicode-design-system/logo-cloud` | Partner logos |
-| `StatsMarketingBlock` | `@vadimcomanescu/nadicode-design-system/stats-marketing-block` | Key metrics |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `ShaderBackground` | `@vadimcomanescu/nadicode-design-system/shader-background` | Hero background |
-
-### Allowed (optional)
-
-`HeroBlock`, `HeroSectionBlock`, `SocialProofBlock`, `ComparisonBlock`, `BannerBlock`, `AnnouncementBanner`, `InfiniteSlider`, `AnimatedGradientText`, `CountingNumber`, `PricingBlock`, `BentoGrid`, decorative effects
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, agentic components, `SettingsLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Full marketing content |
-| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Hero | Features | Stats | Content Width |
-|------------|------|----------|-------|---------------|
-| Mobile | Stacked, text-center | 1 col | 2 col | px-4 |
-| `sm:` | Stacked, text-center | 2 col | 2 col | px-6, max-w-7xl |
-| `lg:` | Centered or split | 3 col | 4 col | px-8, max-w-7xl |
-
----
-
-## Styling Rules
-
-- Hero: `glass-floating` for elevated hero cards, `ShaderBackground` for ambient
-- Section backgrounds alternate: `bg-background` and `bg-muted`
-- CTAs use `Button` with `size="lg"` for prominence
-- Logo cloud uses muted/grayscale logos 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 (`SkipNav` component)
-- All images have alt text
-- CTA buttons have descriptive text (not just "Click here")
-- Mobile nav is keyboard accessible with focus trap
-
----
-
-## Reference Implementations
-
-- `src/app/landing/page.tsx`
-- `src/components/blocks/HeroBlock.tsx`
-- `src/components/blocks/FeatureGridBlock.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/marketing-shell.md

@@ -1,156 +0,0 @@
-# Recipe: Marketing Shell
-
-Shared marketing layout providing scroll-aware header, main content area, and footer.
-
-## Route Pattern
-
-`(marketing)` route group layout
-
-## Shell
-
-`marketing-shell` (this IS the shell definition)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-|   glass-floating · blur-on-scroll · sticky     |
-+------------------------------------------------+
-|                                                 |
-|              {children}                         |
-|        (page content rendered here)             |
-|                                                 |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Layout Shell
-
-```tsx
-import { HeaderBlock } from '@vadimcomanescu/nadicode-design-system/header-block'
-import { FooterBlock } from '@vadimcomanescu/nadicode-design-system/footer-block'
-
-const navLinks = [
-  { name: 'Services', href: '/services' },
-  { name: 'About', href: '/about' },
-  { name: 'Pricing', href: '/pricing' },
-  { name: 'Contact', href: '/contact' },
-]
-
-export default function MarketingLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen flex-col bg-background">
-      <HeaderBlock
-        menuItems={navLinks}
-        loginLabel="Contact Sales"
-        signUpLabel="Get Started"
-        loginHref="/contact"
-        signUpHref="/signup"
-      />
-      <main className="flex-1">{children}</main>
-      <FooterBlock />
-    </div>
-  )
-}
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 200ms (header only) | SPRING: snappy | REDUCED: opacity-only
-
-T+0ms     [header]     Header visible immediately        (instant)
-T+0ms     [children]   Page content visible              (instant, page controls own animation)
-
-SCROLL-TRIGGERED:
-[header-blur]    On scroll > 20px, glass blur transitions in    {CSS transition, 200ms}
-
-REDUCED MOTION: Header visible immediately, no blur transition
-```
-
----
-
-## Required Components
-
-| Component | Import Path | Purpose |
-|-----------|-------------|---------|
-| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Site navigation with glass blur |
-| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
-
-### Allowed (optional)
-
-`AnnouncementBanner`, `BannerBlock`, `SkipNav`
-
-### Forbidden
-
-`Sidebar`, `SidebarProvider`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `SettingsLayout`, `ChatLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Header transparent, content visible |
-| `scrolled` | Scroll > 20px | Header gains glass blur backdrop |
-| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Header | Content | Footer |
-|------------|--------|---------|--------|
-| Mobile | Hamburger menu | Full width, px-4 | Stacked columns |
-| `sm:` | Hamburger menu | px-6, max-w-7xl | 2-col grid |
-| `lg:` | Full nav links + CTA | px-8, max-w-7xl | 4-col grid |
-
----
-
-## Styling Rules
-
-- Header uses `glass-floating` with scroll-triggered blur
-- Header is `sticky top-0 z-50`
-- Main content area uses `flex-1` to push footer to bottom
-- No raw palette colors; semantic tokens only
-- Footer uses `bg-surface` with `border-t border-border`
-
----
-
-## Accessibility
-
-- Skip-nav link to main content (`SkipNav` component)
-- Mobile nav is keyboard accessible with focus trap
-- Header landmark: `<header role="banner">`
-- Main landmark: `<main role="main">`
-- Footer landmark: `<footer role="contentinfo">`
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/HeaderBlock.tsx`
-- `src/components/blocks/FooterBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```