apex-ui-kit 2.12.2 → 2.14.0

package/dist/skill/apexui/references/motion.md

@@ -0,0 +1,105 @@
+# Premium motion
+
+Motion is what turns a clean page into a premium one. Not more animation: the right few moments, done smoothly. Every premium site gets the **core set**, plus **one signature moment** chosen for the brand.
+
+Rules that never change:
+- Animate only `transform`, `opacity` and `clip-path`. Never `width`, `height`, `top`, `left` or `filter` on large elements.
+- Easing: `cubic-bezier(0.16, 1, 0.3, 1)` (calm and expensive). Durations 0.8 to 1.3s for reveals, 0.4 to 0.6s for hovers.
+- Play reveals **once**, when the element is about 10% into the viewport. Never re-animate on scroll back.
+- Respect reduced motion: show everything at rest, keep simple fades at most.
+- No bounce, no spin, no shake, no rainbow, no gradients.
+
+The snippets use Framer Motion (`npm i framer-motion`) in React. Plain HTML: the same ideas work with an IntersectionObserver that adds a class, plus CSS transitions.
+
+## Core set (use on every site)
+
+### 1. Reveal: fade and rise
+```jsx
+import { motion, useReducedMotion } from "framer-motion";
+const EASE = [0.16, 1, 0.3, 1];
+export function Reveal({ delay = 0, y = 28, className = "", children }) {
+  const reduce = useReducedMotion();
+  return (
+    <motion.div className={className} initial={reduce ? false : { opacity: 0, y }} whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "0px 0px -12% 0px" }} transition={{ duration: 0.9, ease: EASE, delay }}>
+      {children}
+    </motion.div>
+  );
+}
+```
+Use on paragraphs, buttons, list rows (stagger rows by 0.05 to 0.08s).
+
+### 2. Headline lines: words rise out of a mask
+```jsx
+export function Lines({ text, as: Tag = "h2", className = "", delay = 0, onMount = false }) {
+  const reduce = useReducedMotion();
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true, margin: "0px 0px -10% 0px" });
+  return (
+    <Tag ref={ref} className={className} aria-label={text}>
+      {text.split(" ").map((w, i) => (
+        <span key={i} aria-hidden="true" className="inline-block overflow-hidden pb-[0.08em] align-bottom">
+          <motion.span className="inline-block" initial={reduce ? false : { y: "110%" }}
+            animate={onMount || inView ? { y: "0%" } : undefined}
+            transition={{ duration: 1, ease: EASE, delay: delay + i * 0.06 }}>
+            {w}{" "}
+          </motion.span>
+        </span>
+      ))}
+    </Tag>
+  );
+}
+```
+Use on every H1 and H2. Hero headline: `onMount`. Long quotes: stagger 0.025.
+
+### 3. Image curtain: clip reveal plus settle
+```jsx
+<motion.div className="overflow-hidden aspect-[4/5]"
+  initial={{ clipPath: "inset(100% 0% 0% 0%)" }} whileInView={{ clipPath: "inset(0% 0% 0% 0%)" }}
+  viewport={{ once: true }} transition={{ duration: 1.3, ease: EASE }}>
+  <motion.img src={src} alt={alt} className="h-full w-full object-cover"
+    initial={{ scale: 1.18 }} whileInView={{ scale: 1 }} viewport={{ once: true }} transition={{ duration: 1.8, ease: EASE }} />
+</motion.div>
+```
+Use on feature images and tiles. Not on every small thumbnail.
+
+### 4. Parallax image: slower than the page
+```jsx
+const ref = useRef(null);
+const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });
+const y = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]);
+<div ref={ref} className="relative overflow-hidden h-[75svh]">
+  <motion.img src={src} alt="" style={{ y, scale: 1.25 }} className="absolute inset-0 h-full w-full object-cover" />
+</div>
+```
+Use on the hero image and full-bleed bands. Strength 6 to 12%.
+
+### 5. Hover details
+- Links: an underline that draws from the left (`scale-x-0` to `scale-x-100`, origin-left, 500ms).
+- Images in cards: `scale-[1.05]` over 1.2s.
+- Buttons: lift 2px or invert colours over 300 to 500ms. Card actions slide up into view on hover (desktop), always visible on touch.
+
+### 6. Numbers that count up
+Animate from 0 to the value once in view, 1.6s, tabular figures. Only real numbers.
+
+## Signature moments (pick ONE per site)
+
+| Signature | Best for | How |
+| --- | --- | --- |
+| **Intro curtain** | Fashion, studios, restaurants | Full-screen panel in the ink colour, brand name rises in, panel lifts away after ~1s. Once per visit (sessionStorage). Delay the hero entrance until it lifts. |
+| **Sticky lookbook** | Products, case studies | Image sticky on one side (`lg:sticky lg:top-24`), details scroll past on the other. On phones: image first, then details. |
+| **Story by the hour / chapters** | Restaurants, brands with a process | Image sticky; chapters scroll; an IntersectionObserver (`rootMargin: "-45% 0px -45% 0px"`) sets the active chapter and the image crossfades. |
+| **Pinned sideways gallery** | Photographers, travel, portfolios | Section `h-[300vh]`, inner `sticky top-0 h-svh`, row translates `x` from 0 to -60% with scroll progress. Phones: a swipe row with snap. |
+| **Floating preview** | Index lists, menus | On hover (fine pointers), a small image follows the pointer with a soft spring (stiffness ~150). |
+| **Custom cursor** | Creative portfolios | A 10px dot that grows to a labelled circle ("View") over work. Only on `(hover: hover) and (pointer: fine)`. Never hide the real cursor on forms. |
+| **Marquee band** | Stores, events, studios | One line of short facts moving slowly (30 to 40s per loop), separated by small shapes, never by dashes. |
+| **Breathing or live element** | Wellness, apps | A circle scaling 1 to 1.5 over 4s and back; or the real app running inside a phone frame. |
+
+## Pages: where motion goes
+- **Hero**: headline lines on load, subline and buttons reveal 0.4 to 0.6s later, image settles or drifts (parallax).
+- **Every section**: heading = Lines, body = Reveal, images = curtain or parallax, rows staggered.
+- **Footer**: the oversized wordmark rises in once.
+- **Mobile**: keep reveals and the signature (adapted), drop cursor effects and hover-only previews. Never pin long sections on phones.
+
+## Mobile apps
+Screen pushes slide 100% (300 to 350ms), sheets spring up, list items fade in, buttons scale to 0.97 on press. The phone frame in a landing page can rise on load, float gently (y ±10px over 6s) and tilt toward the pointer on desktop.

package/dist/skill/apexui/references/page-plans.md

@@ -0,0 +1,63 @@
+# Page plans
+
+Section order for each kind of site. Every page starts with a nav and ends with a closing call to action and a full footer. Blueprint names refer to `sections.md`. Pick the direction first (`directions.md`).
+
+## Fashion or clothing store (direction: Atelier or Champagne)
+1. Nav: logo center, Shop / Collections / Journal left, Search / Account / Bag right (N2)
+2. Hero: full-bleed campaign photo with one line of type and "Shop the collection" (H2)
+3. New arrivals: 4 to 8 products, image 4:5, name, price (S4 product grid)
+4. Story split: atelier photo + 3 short lines about how it is made (S2 split)
+5. Category tiles: 2 or 3 large image links ("Coats", "Knitwear", "Shirts") (S5)
+6. Quote: one customer line, large serif (S7)
+7. Service row: delivery, returns, repairs in plain words, hairline separated (S6 list)
+8. Newsletter: one field, one line of value ("Two emails a month, new pieces first") (S10)
+9. Footer with oversized wordmark (F2)
+Product page: gallery left (sticky on desktop), details right: name, price, size selector, add to bag, fabric and care in an accordion, delivery note.
+
+## Portfolio: photographer, artist, designer (direction: Noir Gallery)
+1. Nav: name left, Work / About / Contact right (N1)
+2. Hero: type-only statement over a calm background, one line about the practice (H3)
+3. Selected work: index list or large alternating images (S8 index list)
+4. Full-bleed image band (S3)
+5. About: portrait or studio photo + short bio, clients as a plain list (S2)
+6. Services or approach: 3 to 4 items with hairlines, no icons (S6)
+7. Contact: big email link and availability line (S9 CTA)
+8. Footer: minimal (F1)
+
+## Restaurant, cafe, bar (direction: Harbour)
+1. Nav with "Book a table" button (N1)
+2. Hero: dish or room photo, name, one line, booking button (H1 split or H2)
+3. Opening hours and address, very visible (S6 list)
+4. Menu: printed card style, 2 columns, dish, short description, price (S11 menu)
+5. Story: the kitchen, the producers (S2)
+6. Gallery: 3 to 5 photos in an uneven grid (S5)
+7. Private dining or events (S2 reversed)
+8. Booking CTA with phone number (S9)
+9. Footer with map link and hours (F1)
+
+## Architecture, interiors, hotel (direction: Stone and Linen)
+Nav (N1), hero full-bleed (H2), intro statement (S1), projects alternating splits (S2 x3), approach list (S6), press or awards as plain text list (S6), contact (S9), footer (F2).
+
+## SaaS, software, fintech (direction: Swiss Precision or Midnight Ink)
+1. Nav with "Sign in" link and "Start free" button (N1)
+2. Hero: headline, subline, two buttons, product screenshot in a thin frame (H1)
+3. Logos of real customers only if provided; otherwise skip (S12)
+4. Problem and outcome statement (S1)
+5. Three to five features as a hairline list with a screenshot per feature (S2 alternating)
+6. How it works in 3 steps (S6 numbered)
+7. Quote (S7)
+8. Pricing: 2 or 3 plans, flat, one highlighted with a border (S13)
+9. FAQ (S14)
+10. CTA (S9) and footer (F1)
+
+## AI product (direction: Midnight Ink or Swiss Precision)
+Same as SaaS, plus a live demo block (input and a real example output) right after the hero, and a plain "What happens to your data" section before pricing.
+
+## Personal brand, coach, consultant (direction: Champagne or Stone and Linen)
+Nav, hero with portrait (H1), what I help with (S6), method (S2), results with real names only if given (S7), offer and price (S13), FAQ (S14), booking CTA (S9), footer.
+
+## Event or conference (direction: Bold Editorial)
+Nav, hero with date and city huge (H3), speakers grid (S4 adapted), schedule by day in tabs (S6), venue (S2), tickets (S13), FAQ (S14), CTA (S9), footer (F2).
+
+## Mobile app landing (direction to match the app)
+Nav, hero with a phone showing the real home screen (H1), three screens with one line each (S2 alternating), privacy statement (S1), quote (S7), download buttons (S9), footer (F1). App screens themselves: see `mobile-app.md`.

package/dist/skill/apexui/references/responsive-mobile.md

@@ -0,0 +1,50 @@
+# Responsive and mobile
+
+## Principles
+- Mobile first: base styles for about 360px, then add space and columns as the screen widens.
+- Size components by their container, not the screen, when they can sit in different places (cards in a sidebar, a widget in a grid). Use container queries (`@container` and `@sm:`/`@md:` in Tailwind v4) or a ResizeObserver.
+- Fluid everything: `clamp()` for type, padding and gaps, so there are fewer breakpoints to manage.
+- No horizontal scroll on the page, ever. Wide content (tables, code) scrolls inside its own box.
+
+## Breakpoints to test
+320 (small Android), 375 and 390 (iPhone), 430 (large phones), 768 (tablet portrait), 1024 (tablet landscape, small laptop), 1280, 1440, 1920.
+Laptops at 125% or 150% Windows scaling report about 1100 to 1280px wide and 600 to 720px tall: check that the hero and nav still fit.
+
+## Layout patterns
+- Grids: `grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr))` instead of fixed column counts.
+- Navs: links collapse into a menu when the bar runs out of room; the menu panel animates with transform and opacity only.
+- Heroes: stack text over media on phones; keep the CTA visible in the first screen (`min-height: 100svh` minus the nav).
+- Use `100svh` / `100dvh` instead of `100vh` for full-height mobile sections (the browser bar changes height).
+- Long text: `max-width: 65ch`; avoid text over busy backgrounds without a scrim.
+
+## Touch and input
+- Targets at least 44 by 44px with 8px between them.
+- Hover effects need a touch alternative (tap to reveal, always-visible actions).
+- Use `pointer` media features: `@media (hover: hover) and (pointer: fine)` for hover-only flourishes like magnetic or cursor effects; switch them off on touch.
+- Inputs: correct `type` and `inputmode` (`email`, `tel`, `numeric`), `autocomplete` values, font size 16px or more (iOS zooms below that).
+
+## Safe areas (notches, home indicator)
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+```
+```css
+.bottom-bar { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
+.top-bar { padding-top: max(0.75rem, env(safe-area-inset-top)); }
+```
+
+## Installable web app (PWA)
+- `manifest.webmanifest` with `name`, `short_name`, `start_url`, `display: "standalone"`, `theme_color`, `background_color`, icons 192 and 512 (plus a maskable icon).
+- A service worker for offline caching (for Vite: `vite-plugin-pwa`). Cache static assets; never cache API responses that contain private data.
+- `theme-color` meta for light and dark: `<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#09090b">`.
+- Native app needed later? Wrap the same web app with Capacitor; keep the code web-standard so that stays easy.
+
+## Performance on phones
+- Animate `transform` and `opacity` only; avoid big `backdrop-filter` blurs on elements that move or resize.
+- WebGL and canvas: cap device pixel ratio at 1.5 to 2, pause when off screen (IntersectionObserver), stop when the tab is hidden.
+- Lazy-load heavy sections (`React.lazy`, dynamic import) and images below the fold.
+- Budget: LCP under 2.5s, CLS under 0.1, INP under 200ms on a mid-range phone.
+
+## Reduced motion and accessibility
+- `@media (prefers-reduced-motion: reduce)`: stop parallax, auto-play, large movement; keep simple fades.
+- Visible focus rings (`focus-visible:ring-2`), logical tab order, `aria-label` on icon-only buttons, `aria-expanded` on menus.
+- Text contrast at least 4.5:1 (3:1 for large text and UI borders).

package/dist/skill/apexui/references/sections.md

@@ -0,0 +1,266 @@
+# Section blueprints
+
+React + Tailwind CSS v4 with the tokens from `directions.md` (`bg-bg`, `text-ink`, `text-muted`, `border-line`, `bg-accent`, `font-display`). Replace copy and images, keep the structure, spacing and responsive classes. Plain HTML works the same way (`className` becomes `class`).
+
+Shared wrappers used below:
+```jsx
+const Container = ({ className = "", children }) => <div className={`mx-auto w-full max-w-[1360px] px-5 sm:px-8 lg:px-12 ${className}`}>{children}</div>;
+const Section = ({ className = "", children, id }) => <section id={id} className={`py-20 sm:py-28 lg:py-36 ${className}`}>{children}</section>;
+const Img = ({ src, alt, ratio = "aspect-[4/5]", className = "" }) => (
+  <div className={`overflow-hidden bg-surface ${ratio} ${className}`}>
+    <img src={src} alt={alt} loading="lazy" decoding="async" className="h-full w-full object-cover transition-transform duration-700 ease-out hover:scale-[1.03]" />
+  </div>
+);
+```
+Unsplash image by id: `https://images.unsplash.com/<photo-id>?w=1600&q=80&auto=format&fit=crop`.
+
+---
+
+## N1. Nav: logo left, links right, menu on phones
+```jsx
+function Nav() {
+  const [open, setOpen] = useState(false);
+  const links = [["Work", "#work"], ["About", "#about"], ["Contact", "#contact"]];
+  return (
+    <header className="sticky top-0 z-50 border-b border-line bg-bg/95 backdrop-blur-sm">
+      <Container className="flex h-16 items-center justify-between sm:h-20">
+        <a href="/" className="font-display text-xl tracking-tight">Halden</a>
+        <nav className="hidden items-center gap-8 text-[15px] md:flex">
+          {links.map(([l, h]) => <a key={l} href={h} className="text-muted transition-colors hover:text-ink">{l}</a>)}
+          <a href="#contact" className="bg-accent px-5 py-2.5 text-sm text-on-accent">Get in touch</a>
+        </nav>
+        <button className="grid h-11 w-11 place-items-center md:hidden" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen(!open)}>
+          <span className="relative block h-3 w-6">
+            <span className={`absolute left-0 h-px w-full bg-ink transition-transform ${open ? "top-1.5 rotate-45" : "top-0"}`} />
+            <span className={`absolute left-0 h-px w-full bg-ink transition-transform ${open ? "top-1.5 -rotate-45" : "top-3"}`} />
+          </span>
+        </button>
+      </Container>
+      {open && (
+        <nav className="border-t border-line bg-bg md:hidden">
+          <Container className="flex flex-col py-4">
+            {links.map(([l, h]) => <a key={l} href={h} onClick={() => setOpen(false)} className="border-b border-line py-4 font-display text-2xl">{l}</a>)}
+          </Container>
+        </nav>
+      )}
+    </header>
+  );
+}
+```
+**N2 (store)**: three columns on desktop: links left, logo centered (`justify-self-center`), icons right (Search, Account, Bag with count). On phones: menu button left, logo center, bag right.
+
+## H1. Hero split: text left, image right
+```jsx
+<Section className="pt-10 sm:pt-16">
+  <Container className="grid items-end gap-10 lg:grid-cols-12">
+    <div className="lg:col-span-6">
+      <h1 className="font-display text-[44px] leading-[1.02] sm:text-[64px] lg:text-[88px]">Fish from the morning boat</h1>
+      <p className="mt-6 max-w-md text-lg text-muted">Cooked over charcoal in a small room by the harbour. Thirty seats, one menu that changes daily.</p>
+      <div className="mt-10 flex flex-wrap items-center gap-6">
+        <a href="#book" className="bg-accent px-7 py-4 text-sm text-on-accent">Book a table</a>
+        <a href="#menu" className="text-sm underline decoration-line underline-offset-8 hover:decoration-ink">See the menu</a>
+      </div>
+    </div>
+    <Img className="lg:col-span-6" ratio="aspect-[4/5] sm:aspect-[5/4] lg:aspect-[4/5]" src="..." alt="Grilled fish on a dark plate" />
+  </Container>
+</Section>
+```
+
+## H2. Hero full-bleed photo
+```jsx
+<section className="relative h-[88svh] min-h-[560px] overflow-hidden">
+  <img src="..." alt="" className="absolute inset-0 h-full w-full object-cover" />
+  <div className="absolute inset-0 bg-black/35" />
+  <Container className="relative flex h-full flex-col justify-end pb-14 text-white sm:pb-20">
+    <h1 className="max-w-3xl font-display text-[44px] leading-[1.02] sm:text-[72px] lg:text-[104px]">The winter edit</h1>
+    <div className="mt-8 flex items-center gap-6">
+      <a href="#shop" className="bg-white px-7 py-4 text-sm text-black">Shop the collection</a>
+    </div>
+  </Container>
+</section>
+```
+
+## H3. Type-only statement
+```jsx
+<Section className="pt-16 sm:pt-24">
+  <Container>
+    <h1 className="font-display text-[48px] leading-[0.98] tracking-[-0.03em] sm:text-[84px] lg:text-[128px]">Landscape and architecture photography.</h1>
+    <div className="mt-12 grid gap-6 border-t border-line pt-6 text-muted sm:grid-cols-3">
+      <p>Based in Oslo</p><p>Working worldwide</p><p className="sm:text-right">Available from March</p>
+    </div>
+  </Container>
+</Section>
+```
+
+## S1. Intro statement
+```jsx
+<Section><Container className="grid gap-8 lg:grid-cols-12">
+  <p className="text-sm text-muted lg:col-span-3">About the studio</p>
+  <p className="font-display text-[28px] leading-[1.25] sm:text-[40px] lg:col-span-9">We design small buildings with long lives: houses, studios and a few public rooms, mostly in timber and stone.</p>
+</Container></Section>
+```
+
+## S2. Split (image + text), alternate sides with `lg:order-2`
+```jsx
+<Section><Container className="grid items-center gap-10 lg:grid-cols-12 lg:gap-16">
+  <Img className="lg:col-span-7" ratio="aspect-[3/2]" src="..." alt="Tailor cutting wool" />
+  <div className="lg:col-span-5">
+    <h2 className="font-display text-[36px] leading-[1.05] sm:text-[52px]">Cut in Porto</h2>
+    <p className="mt-6 text-lg text-muted">Every coat is cut and sewn in a workshop of eleven people. We make small runs, so nothing sits in a warehouse.</p>
+    <a href="#story" className="mt-8 inline-block text-sm underline underline-offset-8">Read the story</a>
+  </div>
+</Container></Section>
+```
+
+## S3. Full-bleed image band
+```jsx
+<section className="relative h-[70svh] min-h-[420px]"><img src="..." alt="Fjord at dawn" className="h-full w-full object-cover" /></section>
+```
+
+## S4. Product grid (store)
+```jsx
+<Section><Container>
+  <div className="flex items-end justify-between gap-6">
+    <h2 className="font-display text-[36px] sm:text-[52px]">New in</h2>
+    <a href="#all" className="text-sm underline underline-offset-8">View all</a>
+  </div>
+  <ul className="mt-10 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 lg:grid-cols-4">
+    {products.map((p) => (
+      <li key={p.name}><a href={p.href} className="group block">
+        <Img src={p.img} alt={p.name} />
+        <div className="mt-4 flex items-baseline justify-between gap-3 text-[15px]">
+          <span>{p.name}</span><span className="tabular-nums text-muted">€{p.price}</span>
+        </div>
+        <p className="mt-1 text-sm text-muted">{p.note}</p>
+      </a></li>
+    ))}
+  </ul>
+</Container></Section>
+```
+
+## S5. Large image tiles (categories or gallery)
+```jsx
+<Section><Container className="grid gap-4 sm:gap-6 md:grid-cols-3">
+  {tiles.map((t, i) => (
+    <a key={t.label} href={t.href} className={`group relative block ${i === 0 ? "md:col-span-2" : ""}`}>
+      <Img src={t.img} alt={t.label} ratio={i === 0 ? "aspect-[4/3] md:aspect-auto md:h-full" : "aspect-[4/5]"} />
+      <span className="absolute bottom-5 left-5 bg-bg px-4 py-2 text-sm">{t.label}</span>
+    </a>
+  ))}
+</Container></Section>
+```
+
+## S6. Hairline list (services, facts, steps, hours)
+```jsx
+<Section><Container className="grid gap-10 lg:grid-cols-12">
+  <h2 className="font-display text-[36px] sm:text-[52px] lg:col-span-4">How we work</h2>
+  <ol className="lg:col-span-8">
+    {items.map((it, i) => (
+      <li key={it.title} className="grid gap-2 border-t border-line py-7 sm:grid-cols-[4rem_1fr_2fr] sm:gap-6">
+        <span className="tabular-nums text-muted">{String(i + 1).padStart(2, "0")}</span>
+        <h3 className="text-lg">{it.title}</h3>
+        <p className="text-muted">{it.body}</p>
+      </li>
+    ))}
+  </ol>
+</Container></Section>
+```
+Use numbers only when the order is real (steps). For facts and services, drop the number column.
+
+## S7. One large quote
+```jsx
+<Section className="bg-surface"><Container className="max-w-4xl">
+  <blockquote className="font-display text-[30px] leading-[1.25] sm:text-[44px]">"I have had this coat for six winters. The lining was repaired for free last year."</blockquote>
+  <p className="mt-8 text-muted">Ana R., Lisbon</p>
+</Container></Section>
+```
+
+## S8. Index list (portfolio)
+```jsx
+<Section id="work"><Container>
+  {projects.map((p) => (
+    <a key={p.title} href={p.href} className="group grid grid-cols-[1fr_auto] items-baseline gap-4 border-t border-line py-6 sm:py-8">
+      <span className="font-display text-[32px] leading-none transition-colors group-hover:text-muted sm:text-[56px]">{p.title}</span>
+      <span className="text-sm text-muted">{p.place}, {p.year}</span>
+      <Img className="col-span-2 mt-4 sm:hidden" ratio="aspect-[3/2]" src={p.img} alt={p.title} />
+    </a>
+  ))}
+</Container></Section>
+```
+
+## S9. Closing call to action
+```jsx
+<Section className="bg-ink text-bg"><Container className="grid gap-10 lg:grid-cols-12 lg:items-end">
+  <h2 className="font-display text-[44px] leading-[1.02] sm:text-[72px] lg:col-span-8">Tables open thirty days ahead.</h2>
+  <div className="lg:col-span-4 lg:text-right">
+    <a href="#book" className="inline-block bg-bg px-7 py-4 text-sm text-ink">Book a table</a>
+    <p className="mt-4 text-sm opacity-70">Or call +351 21 000 0000</p>
+  </div>
+</Container></Section>
+```
+
+## S10. Newsletter
+```jsx
+<form className="flex max-w-md border-b border-ink" onSubmit={(e) => e.preventDefault()}>
+  <label htmlFor="email" className="sr-only">Email</label>
+  <input id="email" type="email" required autoComplete="email" placeholder="you@example.com" className="min-w-0 flex-1 bg-transparent py-4 outline-none placeholder:text-muted" />
+  <button className="py-4 pl-4 text-sm">Subscribe</button>
+</form>
+```
+
+## S11. Menu card (restaurant)
+```jsx
+<ul className="grid gap-x-16 md:grid-cols-2">
+  {dishes.map((d) => (
+    <li key={d.name} className="border-t border-line py-5">
+      <div className="flex items-baseline gap-3">
+        <span className="text-lg">{d.name}</span>
+        <span className="flex-1 translate-y-[-4px] border-b border-dotted border-line" />
+        <span className="tabular-nums">{d.price}</span>
+      </div>
+      <p className="mt-1 text-sm text-muted">{d.note}</p>
+    </li>
+  ))}
+</ul>
+```
+
+## S12. Logos or press (only real ones)
+A single row of 4 to 6 names set in the text font at 15px, muted, separated by wide gaps. No fake logos.
+
+## S13. Pricing (2 or 3 plans)
+Plans side by side on desktop, stacked on phones. Each: name, price in large tabular figures, one line, 4 to 6 included items with hairlines, one button. Highlight one plan with a 1px ink border, not a gradient or a badge storm.
+
+## S14. FAQ
+```jsx
+<div className="divide-y divide-line border-y border-line">
+  {faqs.map((f) => (
+    <details key={f.q} className="group py-6">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-lg">
+        {f.q}<span className="text-2xl leading-none transition-transform group-open:rotate-45">+</span>
+      </summary>
+      <p className="mt-4 max-w-2xl text-muted">{f.a}</p>
+    </details>
+  ))}
+</div>
+```
+
+## F1. Footer: columns
+```jsx
+<footer className="border-t border-line pt-16 pb-10"><Container>
+  <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-12">
+    <div className="lg:col-span-5"><p className="font-display text-2xl">Halden</p><p className="mt-3 max-w-xs text-muted">Landscape and architecture photography from Oslo.</p></div>
+    {columns.map((c) => (
+      <div key={c.title} className="lg:col-span-2">
+        <p className="text-sm text-muted">{c.title}</p>
+        <ul className="mt-4 space-y-3">{c.links.map((l) => <li key={l}><a href="#" className="hover:underline underline-offset-4">{l}</a></li>)}</ul>
+      </div>
+    ))}
+  </div>
+  <div className="mt-16 flex flex-col justify-between gap-4 border-t border-line pt-6 text-sm text-muted sm:flex-row">
+    <p>© 2026 Halden Studio</p><p>Privacy · Terms</p>
+  </div>
+</Container></footer>
+```
+
+## F2. Footer with oversized wordmark
+F1 plus, at the very bottom: `<p className="mt-12 font-display text-[22vw] leading-[0.8] tracking-[-0.04em]" aria-hidden="true">Ivoire</p>` with `overflow-hidden` on the footer.

package/dist/skill/apexui/references/security.md

@@ -0,0 +1,81 @@
+# Security (front end)
+
+No app is "100% secure", but these rules close the holes that real front ends ship with. Treat every item as required unless it clearly does not apply, and say so when you skip one.
+
+## 1. Secrets
+- Anything in the browser bundle is public. That includes every `VITE_*`, `NEXT_PUBLIC_*` and `REACT_APP_*` variable.
+- Never put API keys with write or billing access, database URLs, JWT secrets, SMTP passwords or service-account files in front-end code. Call your own server (or a serverless function) and keep the secret there.
+- Publishable keys that are designed to be public (Stripe publishable key, Firebase web config, Maps keys) are fine, but restrict them by domain in the provider's dashboard.
+- Add `.env*` to `.gitignore` (keep a committed `.env.example` with empty values). Never print secrets in logs, errors or chat replies.
+
+## 2. Cross-site scripting (XSS)
+- React escapes text by default. Do not undo it: avoid `dangerouslySetInnerHTML`. If you must render HTML (CMS content, markdown), sanitise it first with DOMPurify.
+- Never build `href`/`src` from user input without checking the protocol. Allow only `https:`, `http:`, `mailto:`, `tel:` and relative paths; block `javascript:` and `data:`.
+- Never `eval`, `new Function` or `setTimeout("string")`.
+
+```js
+export function safeUrl(url) {
+  try {
+    const u = new URL(url, window.location.origin);
+    return ["http:", "https:", "mailto:", "tel:"].includes(u.protocol) ? u.href : "#";
+  } catch {
+    return "#";
+  }
+}
+```
+
+## 3. Links and embeds
+- `target="_blank"` always with `rel="noopener noreferrer"`.
+- Third-party iframes: `sandbox` with the fewest permissions, `loading="lazy"`, `referrerpolicy="strict-origin-when-cross-origin"`.
+- Load third-party scripts only from trusted CDNs, pinned to an exact version, with Subresource Integrity (`integrity` + `crossorigin`) when the CDN supports it.
+
+## 4. Auth on the client
+- Keep session tokens in `httpOnly`, `Secure`, `SameSite=Lax` (or `Strict`) cookies set by the server. Do not store JWTs or refresh tokens in `localStorage` or `sessionStorage` (any XSS can read them).
+- Hiding a button is not access control. The server must check permission on every request.
+- Log out clears the server session; on 401 responses redirect to sign in.
+
+## 5. Forms
+- Validate on the client for UX (required, format, length) and again on the server for safety. Share the schema (for example Zod) when you can.
+- Limit lengths (`maxLength`), use correct `type`/`autocomplete`, never echo raw errors from the server that reveal internals.
+- Bot protection on public forms (sign up, contact): a honeypot field plus server-side rate limiting, or a CAPTCHA provider.
+- File inputs: restrict `accept`, check size before upload, and let the server re-check type and size.
+
+## 6. Security headers (set by the host)
+Example for Vercel (`vercel.json`); adapt the CSP to the domains you actually use, then test that nothing breaks.
+
+```json
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Content-Security-Policy", "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self'; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'" },
+        { "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains; preload" },
+        { "key": "X-Content-Type-Options", "value": "nosniff" },
+        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
+        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
+        { "key": "X-Frame-Options", "value": "DENY" }
+      ]
+    }
+  ]
+}
+```
+Netlify uses `_headers`; Nginx uses `add_header`. WebGL components need `script-src 'self'` only; Google Fonts needs the two font domains above.
+
+## 7. Dependencies and build
+- Install packages only from npm with exact names (watch for typosquats). Prefer well-maintained packages.
+- Run `npm audit` and fix high and critical issues; turn on Dependabot or Renovate.
+- Commit the lockfile. Do not ship source maps with secrets in them; production builds should not expose `.env` or internal URLs.
+
+## 8. Privacy
+- Ask before using camera, microphone, location or notifications, and only when the user acts.
+- Cookie and analytics consent where the law requires it (EU, UK, India DPDP). Load analytics after consent.
+- Do not log personal data to the console or third-party error trackers; scrub emails and tokens.
+
+## 9. Before you ship
+- [ ] No secrets in the bundle (search the build output for `sk_`, `secret`, `password`, `mongodb+srv`, `BEGIN PRIVATE KEY`).
+- [ ] No `dangerouslySetInnerHTML` with unsanitised input; all user URLs pass `safeUrl`.
+- [ ] Every `target="_blank"` has `rel="noopener noreferrer"`.
+- [ ] Tokens live in httpOnly cookies, not web storage.
+- [ ] Security headers set and checked (for example with securityheaders.com).
+- [ ] `npm audit` clean of high and critical issues.

package/dist/skill/apexui/references/taste.md

@@ -0,0 +1,53 @@
+# Taste: what premium means
+
+Premium is not more effects. It is fewer, better decisions made on purpose. Think of a good hotel, a fashion house, a watch brand: quiet surfaces, beautiful type, great photos, nothing extra.
+
+## Do
+- **Let type carry the design.** Large display headlines (56 to 120px on desktop, 40 to 56px on phones), tight leading (1.0 to 1.1), slightly negative tracking. Body text calm and readable.
+- **Use a grid.** 12 columns on desktop, 4 on phones, generous gutters (24 to 32px). Align edges. Asymmetry is good when it is deliberate (text in columns 1 to 5, image in 7 to 12).
+- **Hairlines over boxes.** Separate content with 1px rules in the line colour instead of cards with shadows. When you need cards, keep them flat: a border or a background shift, no heavy shadow.
+- **Photography first.** Big, well-cropped images with one consistent mood. Crop with intent (`object-cover`, a set aspect ratio like 4:5 for products, 3:2 for scenes).
+- **Small details that feel expensive.** Real numbers ("Made in Porto, 312 pieces"), a subtle grain-free surface, consistent 1px borders, perfect alignment, considered empty space.
+- **One signature move.** Each site gets one memorable idea: an oversized wordmark in the footer, a full-bleed photo that scrolls slower, a large serif number list, a sticky product image. Only one.
+- **Buttons that look tailored.** Solid fill in ink or accent, generous padding (14px by 28px), either square (radius 0 to 4px) or a full pill. Secondary buttons are text links with an underline that grows on hover.
+- **Icons sparingly.** Thin line icons (1.5px stroke) only where they help scanning. Never an icon on every heading.
+
+## Do not (the generic AI look)
+- Gradients of any kind, glowing blobs, aurora backgrounds, gradient text.
+- Purple, blue and pink "tech" palettes by default; neon accents on near-black.
+- Glassmorphism everywhere, frosted cards on busy backgrounds.
+- Three identical rounded cards with an icon, a title and two lines, repeated down the page.
+- Everything centered. Use left alignment for most text; center only short statements.
+- Tiny all-caps labels above every heading, middle dots between every word, arrows after every link.
+- Big fake stats ("10x faster", "99.9% uptime") without context; fake logos; testimonials from "Sarah J., CEO".
+- Default fonts used without thought (Inter, Roboto, Arial, Space Grotesk, Poppins) as the display face.
+- Emoji, sparkles, rocket icons, "✨ New".
+- Drop shadows on everything, radius 16px on everything, hover lift on every card.
+- Stock photos of handshakes, people pointing at laptops, or 3D blobs.
+
+## Colour rules
+- Background is never pure white or pure black: use a warm or cool off-white (#F4F1EA, #FAFAF8) or a soft black (#0E0E0E, #111214).
+- Text colour has enough contrast (4.5:1) and is a deep neutral, not pure black on white.
+- Accent appears on: the primary button, active states, one or two small marks. That is all.
+- Dark sections inside a light site (and the opposite) are a strong, premium rhythm: one per page is enough.
+
+## Type rules
+- Display: a characterful serif (Cormorant Garamond, Fraunces, Instrument Serif, Bodoni Moda, DM Serif Display, Newsreader, EB Garamond) or a refined grotesk (Schibsted Grotesk, Hanken Grotesk, Familjen Grotesk, Archivo, Syne for bold brands).
+- Text: a quiet sans (Manrope, Figtree, Hanken Grotesk, Onest, Jost, Instrument Sans) or the same family as display.
+- Scale: 14 / 16 / 18 / 22 / 28 / 40 / 56 / 80 / 112px. Pick from it, nothing in between.
+- Weights: display 400 to 500 for serifs, 500 to 700 for grotesks. Body 400. Never more than three weights on a page.
+- Numbers: use tabular figures for prices and stats (`font-variant-numeric: tabular-nums`).
+
+## Layout rhythm
+- Section padding: `py-24 md:py-32 lg:py-40`.
+- Page gutter: `px-5 sm:px-8 lg:px-12`, max width 1280 to 1440px.
+- Vertical spacing between heading and body: 16 to 24px; between body and button: 32px.
+- Alternate section layouts (split, full-bleed, list, grid) so the page has rhythm; never repeat the same layout three times in a row.
+
+## Motion rules
+Premium sites move. A static page looks like a template. Follow `motion.md`:
+- On load: the headline rises word by word out of a mask, then the subline and buttons, then the hero image settles from a slow zoom.
+- On scroll: headings rise in, images uncover like a curtain or drift slower than the page, list rows arrive one after another, numbers count up.
+- One signature moment per site (intro curtain, sticky lookbook, pinned gallery, floating preview...).
+- Hover: underlines draw in, images scale 1.05 slowly, buttons invert or lift 2px. No bouncing, no spinning.
+- Reduced motion: everything visible at rest.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.12.2",
+  "version": "2.14.0",
   "license": "MIT",
   "description": "116 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
@@ -26,7 +26,10 @@
     "webgl",
     "ai ui",
     "apexui",
-    "apex ui kit"
+    "apex ui kit",
+    "ai agent skill",
+    "claude skill",
+    "cursor rules"
   ],
   "type": "module",
   "main": "dist/cli/index.js",
@@ -37,7 +40,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc && copyfiles -u 2 src/ApexUI-Kit/**/* dist/ApexUI-Kit"
+    "build": "tsc && copyfiles -u 2 src/ApexUI-Kit/**/* dist/ApexUI-Kit && copyfiles -u 1 src/skill/**/* dist"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.0.0",