apex-ui-kit 2.13.0 → 2.14.0

package/ReadMe.md

@@ -67,14 +67,14 @@ export default function App() {
 
 ## AI agent skill
 
-Teach your AI agent (Claude Code, Antigravity, Cursor, Windsurf, Copilot, Codex, Gemini CLI) to build premium, responsive and secure sites and mobile web apps with ApexUI:
+Give your AI agent (Claude Code, Antigravity, Cursor, Windsurf, Copilot, Codex, Gemini CLI) a designer's eye. It builds premium websites and mobile apps with a real art direction, flat colour, human copy and every section from nav to footer, responsive from 320px up. It works with any stack; ApexUI components are optional.
 
 ```bash
 npx apex-ui-kit skill            # pick your agents
-npx apex-ui-kit skill --ai all   # or install for every agent at once
+npx apex-ui-kit skill --ai all   # or set up every agent at once
 ```
 
-It installs a skill with every component and its CLI name, page and app-screen recipes, a design system (palettes, fonts, motion), responsive and mobile rules, a security checklist and a ship checklist. For ChatGPT or Claude.ai, download the all-in-one file from [apex-ui.in/skills](https://apex-ui.in/skills).
+Inside: taste rules, eight complete art directions, ready section code, copywriting rules, mobile app screens, responsive and security checklists. See sites built with it at [apex-ui.in/demos](https://apex-ui.in/demos).
 
 ## Example: AI prompt with a model picker
 
@@ -271,8 +271,9 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.13
+## What's new in 2.14
 
+- New in 2.14: the agent skill was rewritten. It no longer leans on ApexUI components: it chooses its own art direction (eight luxury directions, no gradients), writes human copy, builds every section from code blueprints and covers premium mobile app screens.
 - New in 2.13: `npx apex-ui-kit skill` installs the ApexUI AI agent skill for Claude Code, Antigravity, Cursor, Windsurf, Copilot, Codex and Gemini CLI.
 - New in 2.12: components size from their own container instead of the screen (Testimonials, Animated Tabs, Gooey Nav, Nav Menu, Flip Clock, Image Accordion, Beam Bar), a smoother Floating Navbar menu, no flicker in Theme Switcher and Parallax Carousel. Smart Grid Card and Card Swap 3D were removed.
 - New in 2.10: Fluid Cursor (a real-time WebGL fluid sim that trails the cursor) and Sketch Reveal (a photo turns into a glowing sketch and burns away into the next one as you scroll).

package/dist/cli/index.js

@@ -181,7 +181,7 @@ async function importedPackages(dir) {
 // where each agent looks for it. Skill-aware agents get the whole folder; the
 // rest get one rules file that points to the reference files in .apexui/skill.
 const skillRoot = path.join(__dirname, "..", "skill", "apexui");
-const SKILL_DESC = "Build premium, responsive, secure websites and mobile-first web apps in React with ApexUI components.";
+const SKILL_DESC = "Design and build premium, luxury-grade websites and mobile apps with a real art direction, human copy, every section from nav to footer, responsive and secure.";
 const AGENTS = {
     claude: { label: "Claude Code", dir: ".claude/skills/apexui" },
     antigravity: { label: "Google Antigravity", dir: ".agents/skills/apexui" },

package/dist/skill/apexui/SKILL.md

@@ -1,91 +1,67 @@
 ---
 name: apexui
-description: Build premium, responsive, secure websites and mobile-first web apps in React with ApexUI animated components (Tailwind CSS, Framer Motion, GSAP, three.js). Use when the user asks for a landing page, marketing site, portfolio, SaaS or AI product site, dashboard, app screens, a redesign, or "make it look premium", or mentions ApexUI or apex-ui-kit.
+description: Design and build premium, luxury-grade websites and mobile apps that look made by a top studio, not by AI. Covers art direction (palette, fonts, layout), human copywriting, full pages from nav to footer, mobile app screens, responsive behaviour and security. Use for any landing page, website, portfolio, store, restaurant, SaaS or AI product site, dashboard, mobile app or redesign, or when the user says premium, luxury, high-end, beautiful, or mentions ApexUI.
 ---
 
-# ApexUI: premium sites and apps with AI
-
-You design and build like a senior product designer and front-end engineer. Every result must be:
-
-1. **Premium**: one clear visual idea, a deliberate palette, real type hierarchy, generous space, motion with purpose.
-2. **Responsive**: works from 320px phones to 2560px screens, touch and mouse, light and dark.
-3. **Secure**: no secrets in the browser, no unsafe HTML, safe links, safe forms. Follow `references/security.md` every time.
-4. **Fast and accessible**: good Core Web Vitals, keyboard friendly, readable contrast, reduced motion respected.
-
-ApexUI gives you 116 free animated React components that you add one by one with `npx apex-ui-kit add <name>`. The source lands in the project, so you can read and adapt it.
-
-## Reference files (read only what the task needs)
-
-| File | Read it when |
+# Premium sites and apps
+
+You are the art director and the engineer. The result must look like a studio charged a lot for it: calm, confident, specific to this brand, and flawless on a phone.
+
+Follow the steps in order. Do not skip the plan. Small and fast models: follow the tables and blueprints literally; they already contain the taste.
+
+## The 12 hard rules
+1. **No gradients.** No gradient backgrounds, text, buttons, borders or glows. Flat colour, photography and type do the work. Text over a photo gets a flat dark overlay (`bg-black/40`), never a gradient.
+2. **One direction.** Pick one art direction from `references/directions.md` or build your own with the rules in `references/taste.md`. Never mix two.
+3. **Type leads.** One display face and one text face at most. Big, tight headlines. Body 16 to 18px.
+4. **Restraint in colour.** Neutrals carry 90% of the page. One accent, used on fewer than 5 things per screen. No neon on black.
+5. **Space is the luxury.** Sections at least 96px tall padding on desktop, 64px on phones. Never crowd.
+6. **Human copy only.** Follow `references/copy.md`. No em dashes, no `--`, no `__`, no emoji, no AI phrases ("elevate", "seamless", "unlock", "in today's world").
+7. **Specific content.** Real-sounding names, prices, places, numbers. Never lorem ipsum, "John Doe", "Feature 1" or placeholder logos.
+8. **Real images.** Use real photography that fits the brand (Unsplash by id is fine). Same tone and colour temperature across the page. No cartoon illustrations unless the brand asks.
+9. **Complete pages.** Every site has: nav, hero, at least 4 content sections, a closing call to action and a full footer. See `references/page-plans.md`.
+10. **Phone first, every width.** Works from 320px to 1920px with no horizontal scroll. See `references/responsive-mobile.md`.
+11. **Premium motion.** Every site gets the core motion set (headline lines, reveals, image curtains, parallax, hover details) and one signature moment from `references/motion.md`. Smooth and calm, never bouncy. Only `transform`, `opacity` and `clip-path`. Respect reduced motion.
+12. **Secure by default.** No secrets in front-end code, no unsafe HTML, safe links. See `references/security.md`.
+
+## Step 1. Write the brief (3 lines)
+- **What and who**: the product and the person it is for.
+- **Feeling**: three adjectives (for example "quiet, tailored, warm").
+- **Goal**: the one action a visitor should take.
+If the user gave little detail, decide sensibly and state your choices in one sentence. Ask at most two questions, and only if the answer changes the design.
+
+## Step 2. Choose the art direction
+Open `references/directions.md`. Pick the direction whose "Best for" matches the brief. Copy its palette, fonts, radius, image style and layout motif exactly. If none fits, create one using the recipe at the end of that file and the rules in `references/taste.md`.
+
+## Step 3. Plan the page or app
+- Website: take the section order for this type from `references/page-plans.md`. Write one line per section: purpose plus the blueprint you will use from `references/sections.md`.
+- Choose the signature motion moment from `references/motion.md` that fits the brand (intro curtain, sticky lookbook, pinned gallery, story by the hour...).
+- Mobile app: list the screens and the tab bar from `references/mobile-app.md`.
+- Write the real copy now, following `references/copy.md`. Design around real words, not placeholders.
+
+## Step 4. Build
+- Default stack: React + Vite + Tailwind CSS v4 (or plain HTML + Tailwind if the user wants one file). Any stack works; the rules stay the same.
+- Put the direction's colours and fonts in CSS variables first (template in `references/directions.md`). Use only those tokens.
+- Assemble sections from `references/sections.md`, then adjust spacing and copy to the brand. Keep the code clean: one component per section.
+- Add motion from `references/motion.md`: the core set on every section, plus the one signature moment you chose in the plan. A static page is not finished.
+- ApexUI components are optional extras for motion and interaction (`npx apex-ui-kit add <name>`, list in `references/components.md`). Use one or two when they serve the brand; pass the direction's colours to them; never let a component's default look override the direction. You can build everything without them.
+
+## Step 5. Secure and polish
+Go through `references/security.md`, then `references/checklist.md`. Fix every failed item.
+
+## Step 6. Review like an art director
+Look at the page at 375px and 1440px. Ask: does anything look like a template? Is anything louder than it needs to be? Remove one element that is not pulling its weight. Then report what you built, the direction you chose and anything you could not verify.
+
+## Reference files
+| File | Use it for |
 | --- | --- |
-| `references/components.md` | Choosing components. Every component, its CLI name and what it is for. |
-| `references/recipes.md` | Planning sections or screens (landing pages, dashboards, auth, mobile app screens). |
-| `references/design-system.md` | Picking palette, fonts, spacing, radius, shadows and motion tokens. |
-| `references/responsive-mobile.md` | Layout, breakpoints, touch, safe areas, PWA. |
-| `references/security.md` | Always, before you ship anything. |
-| `references/checklist.md` | Last step, before you say the work is done. |
-
-## Workflow
-
-### 1. Understand the brief (ask at most 3 short questions, only if the answer changes the build)
-- What is it (product, audience, goal of the page or app)?
-- Platform: website, mobile-first web app, or installable PWA?
-- Brand: existing colours, logo, tone (playful, bold, calm, technical, luxury)?
-
-If the user gives no brand, choose one direction from `references/design-system.md` and say which one you chose.
-
-### 2. Plan before code
-Write a short plan: the sections (or screens) in order, the ApexUI component for each, the palette and font pair. Use `references/recipes.md`. Prefer 1 hero effect plus 2 to 4 supporting effects per page. Too many effects look cheap.
-
-### 3. Set up the project
-For a new project use Vite + React + Tailwind CSS v4:
-
-```bash
-npm create vite@latest my-app -- --template react
-cd my-app
-npm install
-npm install tailwindcss @tailwindcss/vite
-```
-
-Add the Tailwind plugin to `vite.config.js` and `@import "tailwindcss";` at the top of `src/index.css`. Existing Next.js or Vite projects work too; components are plain React.
-
-### 4. Add ApexUI components
-```bash
-npx apex-ui-kit add <cli-name>
-```
-- The CLI copies the component into `ApexUI-Kit/<ComponentFolder>/` in the folder you choose and installs only the packages it imports.
-- Import it with a relative path, for example `import HyperCard from "./ApexUI-Kit/HyperCard/HyperCard.jsx";`.
-- Read the component file before using it: props have defaults and comments at the top explain the behaviour.
-- Components that use browser APIs (canvas, WebGL, window) must render on the client. In Next.js put `"use client"` at the top of the file that uses them.
-
-### 5. Build
-- Mobile first. Write the base styles for 360px, then widen with breakpoints or container queries.
-- Use semantic HTML: `header`, `nav`, `main`, `section` with headings, `footer`, real `button` and `a` elements.
-- Put design tokens in CSS variables (see `references/design-system.md`) so light and dark themes stay consistent.
-- Keep components self-contained and copy-paste friendly: props for content, no hidden global state.
-- Animate only `transform` and `opacity`. Never animate `width`, `height`, `top` or `left` for movement.
-- Images: correct `width`/`height`, `loading="lazy"` below the fold, modern formats, real `alt` text.
-
-### 6. Secure it
-Go through `references/security.md`. The non-negotiables:
-- No API keys, tokens or secrets in front-end code or in `VITE_`/`NEXT_PUBLIC_` variables. Those are public.
-- Never pass user content to `dangerouslySetInnerHTML` without sanitising it.
-- External links: `target="_blank"` always with `rel="noopener noreferrer"`. Block `javascript:` URLs.
-- Validate forms on the client for UX and on the server for safety.
-- Set security headers when you control hosting (example in `references/security.md`).
-
-### 7. Verify
-Run `references/checklist.md`. Check the layout at 320, 375, 768, 1024, 1280 and 1440px, in light and dark, with keyboard only, and with reduced motion on. Fix what fails, then report what you built and anything you could not verify.
-
-## Quality bar (what "premium" means here)
-- One accent colour used with restraint; neutrals do most of the work.
-- Headlines large and tight (`tracking-tight`, line-height 1 to 1.1); body text 16 to 18px with line-height 1.6.
-- Consistent radius scale and spacing scale; nothing placed by eye.
-- Real content: specific headlines, believable numbers, no lorem ipsum, no em dashes in UI copy.
-- Motion: 150 to 300ms for UI feedback, 400 to 900ms for entrances, springs for drag and hover.
-- Every interactive element has hover, focus-visible, active and disabled states.
-
-## Never
-- Never invent ApexUI components or props. Check `references/components.md` and the component source.
-- Never paste secrets into code, logs, commits or chat output.
-- Never ship a page you have not checked at phone width.
+| `references/taste.md` | What premium means, and the generic AI looks to avoid. |
+| `references/directions.md` | Eight complete art directions: palette, fonts, imagery, layout motif. |
+| `references/copy.md` | Writing like a person: rules, banned words, before and after examples. |
+| `references/page-plans.md` | Section order for each kind of site (store, portfolio, restaurant, SaaS...). |
+| `references/sections.md` | Code blueprints for every section, nav to footer. |
+| `references/motion.md` | The motion that makes it feel premium: core set and signature moments, with code. |
+| `references/mobile-app.md` | Premium mobile app screens, navigation, sizes and motion. |
+| `references/responsive-mobile.md` | Breakpoints, touch, safe areas, PWA, performance. |
+| `references/components.md` | Optional ApexUI animated components and when they fit. |
+| `references/security.md` | Front-end security rules. |
+| `references/checklist.md` | Final checks before you say it is done. |

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

@@ -1,37 +1,42 @@
 # Pre-delivery checklist
 
-Go through every line. Fix what fails. In your final message, list anything you could not check.
+Go through every line. Fix what fails. In your final message, say which direction you used and list anything you could not check.
 
-## Design
-- [ ] One palette and one font pair, used through tokens (no stray hex values).
-- [ ] Clear hierarchy: one H1, section titles, readable body (16px or more, line-height about 1.6).
-- [ ] One hero effect, 2 to 4 supporting effects at most per page.
-- [ ] Real copy, no lorem ipsum, no em dashes in UI text, no broken or placeholder images.
-- [ ] Hover, focus-visible, active and disabled states on every control.
+## Taste
+- [ ] One art direction, used through tokens. No stray colours, no second accent.
+- [ ] Zero gradients anywhere (search the code for `gradient`, `from-`, `via-`, `to-`, `bg-clip-text`).
+- [ ] At most two font families and three weights. Display face on headings only.
+- [ ] No identical card grids repeated down the page; sections alternate layout.
+- [ ] Images share one mood and colour temperature; every image has a purpose and `alt` text.
+- [ ] One signature move, and nothing louder than it.
+
+## Copy
+- [ ] No `—`, `–` used as a pause, `--`, `__`, emoji or exclamation marks in headlines.
+- [ ] None of the banned phrases from `copy.md`.
+- [ ] Real names, prices, places and honest numbers; no lorem ipsum or "John Doe".
+- [ ] Every button says its action.
+
+## Completeness
+- [ ] Nav, hero, at least four content sections, closing call to action, full footer.
+- [ ] Footer has contact or address, useful links, legal line.
+- [ ] Forms have labels, validation and a success state.
 
 ## Responsive
-- [ ] Checked at 320, 375, 768, 1024, 1280 and 1440px; no horizontal page scroll.
-- [ ] Nav collapses cleanly; menu opens and closes smoothly on a phone.
-- [ ] Tap targets at least 44px; nothing important depends on hover.
-- [ ] Safe-area padding on fixed top and bottom bars.
-- [ ] Light and dark themes both correct (text contrast, borders, images).
-
-## Performance
-- [ ] Only `transform`/`opacity` animate; no layout thrash while scrolling.
-- [ ] Heavy sections and below-the-fold images load lazily; WebGL pauses off screen.
-- [ ] Fonts: only the weights used, `display=swap`.
-- [ ] Lighthouse on mobile: Performance 90+, CLS under 0.1.
-
-## Accessibility
-- [ ] Keyboard only: every action reachable, focus always visible, no traps.
-- [ ] Icon-only buttons have `aria-label`; menus use `aria-expanded`; images have `alt`.
-- [ ] `prefers-reduced-motion` turns off large movement.
-- [ ] Colour contrast at least 4.5:1 for text.
+- [ ] Checked at 320, 375, 768, 1024, 1280 and 1440px; no horizontal scroll at any width.
+- [ ] Nav collapses to a working menu on phones; tap targets at least 44px.
+- [ ] Headline sizes step down on phones (no word broken mid-way, no overflow).
+- [ ] Safe-area padding on fixed bars (mobile apps).
+
+## Performance and accessibility
+- [ ] Core motion on every section (headline lines, reveals, image curtains or parallax) and exactly one signature moment.
+- [ ] Only `transform`, `opacity` and `clip-path` animate; reveals play once; reduced motion respected.
+- [ ] Images lazy-loaded below the fold with fixed aspect ratios (no layout shift).
+- [ ] Keyboard: every action reachable, focus visible. Contrast 4.5:1 for text.
+- [ ] Fonts loaded with `display=swap`, only the weights used.
 
 ## Security
 - [ ] Everything in `security.md` section 9 passes.
 
 ## Hand-off
-- [ ] `npm run build` succeeds with no errors.
-- [ ] README: how to run, how to change content, which ApexUI components are used.
-- [ ] `.env.example` lists every variable with no real values.
+- [ ] `npm run build` succeeds.
+- [ ] README: how to run, where to change copy, colours and images.

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

@@ -1,7 +1,6 @@
-# Components
+# ApexUI components (optional)
 
-116 ApexUI components. Add one with `npx apex-ui-kit add <cli-name>`; it lands in `ApexUI-Kit/<Folder>/`. Live demos and props: https://apex-ui.in/components/<page>.
-Read the component source before using it: the props, their defaults and notes are at the top of the file.
+You do not need these to build a premium site: the directions and blueprints are enough. Use one or two when an interaction or motion piece truly serves the brand. 116 components; add one with `npx apex-ui-kit add <cli-name>` (it lands in `ApexUI-Kit/<Folder>/`). Read the component source before using it and pass your direction's colours to it.
 
 ## Backgrounds
 
@@ -166,9 +165,8 @@ Read the component source before using it: the props, their defaults and notes a
 
 ## Picking well
 
-- One hero effect per page (a background, a 3D piece or a big text effect). Support it with 2 to 4 quieter pieces.
-- Backgrounds that use WebGL (Aurora, Galaxy 3D, Warp Tunnel, Liquid Gradient, Dither Waves, Horizon Glow, Sunrise) are the heaviest: use one per page, never stack two.
+- Luxury and editorial directions: prefer quiet pieces (Image Accordion, Image Compare, FAQ Accordion, Scroll Stack, Flip Clock, Magnetic Button, Toast Stack, Animated Tabs, Stepper, Swipe Cards, Coverflow 3D). They keep the page calm.
+- Glow and colour backgrounds (Aurora, Galaxy 3D, Warp Tunnel, Liquid Gradient, Horizon Glow, Sunrise, Lens Flare, Orbs) contain gradients. Do not use them in the luxury directions; at most one, only for a playful or tech brand that asked for it.
 - Text effects work best on short strings: a headline, a word that rotates, a stat that counts.
-- For product UI (dashboards, settings, forms) prefer calm pieces: Animated Tabs, Sidebar Nav, Stepper, FAQ Accordion, Toast Stack, Command Palette.
-- For mobile app screens: Floating Navbar or Magnify Dock style bottom bars, Swipe Cards, Card Stack, Toast Stack, Animated Switches.
-- AI products: AI Prompt Box or AI Model Prompt for input, AI Thinking and AI Response for output, an AI Voice piece for voice mode.
+- Product UI (dashboards, settings, forms): Animated Tabs, Sidebar Nav, Stepper, FAQ Accordion, Toast Stack, Command Palette.
+- AI products: AI Prompt Box or AI Model Prompt for input, AI Thinking and AI Response for output.

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

@@ -0,0 +1,39 @@
+# Copy: write like a person
+
+Premium brands sound calm, specific and sure. Write the copy before the layout, and write it the way a sharp human editor would.
+
+## Rules
+1. **Short and concrete.** Headlines 3 to 8 words. Say what it is or what it does for someone. "Coats cut to last a decade" beats "Elevate your wardrobe".
+2. **Specific over impressive.** Use real details: materials, places, times, prices, numbers with context. "Open Tuesday to Sunday, 6 pm till late" not "An unforgettable dining experience".
+3. **Plain punctuation.** Commas and full stops. No em dashes (—), no en dashes as pauses, no double hyphens (`--`), no underscores (`__`), no ellipses for drama, no exclamation marks in headlines. Use a full stop or a comma instead.
+4. **No emoji, no sparkles, no symbols as decoration** (✨ 🚀 → •). Middle dots only in a footer line if needed.
+5. **Active voice, second person.** "You choose the fabric. We cut it to your size."
+6. **Vary sentence length.** Mix a short sentence with a longer one. Do not start three sentences the same way.
+7. **No rule of three by reflex.** Do not list three adjectives in every line ("fast, simple and secure").
+8. **Buttons say the action:** "Book a table", "Shop coats", "See the work", "Start free trial". Never "Learn more" twice on one page, never "Click here".
+9. **Honest numbers only.** If you do not know a real figure, do not invent a statistic. Use a fact the brand can stand behind or leave it out.
+10. **Names that sound real.** Products, dishes and projects get proper names ("The Harlow coat", "Grilled sea bream, fennel, lemon"). People in testimonials need a first name, a last initial and a real-sounding context ("Ana R., Lisbon"), or use a press quote with the publication name only if the user provided it.
+
+## Words and phrases to avoid
+elevate, unlock, unleash, seamless, seamlessly, effortless, revolutionize, game-changer, cutting-edge, next-level, world-class, best-in-class, state-of-the-art, robust, leverage, empower, harness, delve, embark, journey (for a purchase), realm, tapestry, testament, landscape (non-literal), in today's fast-paced world, look no further, whether you're... or..., not just X but Y, it's not about X it's about Y, take it to the next level, designed with you in mind, crafted with passion, experience the difference, your one-stop shop, dive in, discover the magic, we've got you covered, ever-evolving, holistic, synergy, curated (more than once), bespoke (unless it is truly made to order), premium (do not call yourself premium; show it).
+
+## Before and after
+| Generic | Human |
+| --- | --- |
+| Elevate your style with our curated collection of timeless pieces. | Wool coats, linen shirts and knitwear, cut in Porto. |
+| Unlock seamless productivity with AI-powered workflows. | Your inbox, sorted before you open it. |
+| Experience culinary excellence like never before! | Fish from the morning boat, cooked over charcoal. |
+| Capturing moments that last a lifetime — one frame at a time. | Landscape and architecture photography. Based in Oslo, working everywhere. |
+| Join thousands of satisfied customers today! | 2,400 people wear our coats. Most come back for a second. |
+| Our team of passionate experts is dedicated to... | We are six people in a small studio by the river. |
+
+## Page microcopy
+- Nav: 3 to 5 plain words ("Shop", "Journal", "Stores", "About").
+- Hero subline: one sentence, 12 to 22 words, about the thing itself.
+- Section intros: one short sentence. Let images and lists do the rest.
+- Forms: labels above fields, helpful placeholders ("you@example.com"), errors that say what to do ("Enter a date after today").
+- Empty and error states: say what happened and what to do next, without apologising three times.
+- Footer: address or city, contact, a few useful links, legal, a calm sign-off line.
+
+## Final pass (do this every time)
+Search your copy for: `—`, `–`, `--`, `__`, `!`, `✨`, "elevate", "seamless", "unlock", "journey", "experience the". Rewrite every hit. Read each headline out loud; if it sounds like an ad, make it plainer.

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

@@ -0,0 +1,109 @@
+# Art directions
+
+Pick one. Copy it exactly: palette, fonts, radius, image style, signature move. Every palette is flat (no gradients) and passes contrast for body text.
+
+| Token | Meaning |
+| --- | --- |
+| `bg` | Page background |
+| `surface` | Cards, panels, alternate sections |
+| `ink` | Headings and body text |
+| `muted` | Secondary text, captions |
+| `line` | 1px borders and rules |
+| `accent` | Primary button and one or two marks |
+| `on-accent` | Text on the accent |
+
+## 1. Atelier
+Best for: fashion, clothing, leather goods, perfume, luxury retail.
+- Palette: bg `#F3F0EA`, surface `#E9E4DA`, ink `#161513`, muted `#6F6A61`, line `#D8D1C4`, accent `#161513`, on-accent `#F3F0EA`.
+- Fonts: display **Bodoni Moda** 400 (italic allowed for one word only in the whole page), text **Hanken Grotesk** 400/500.
+- Radius 0. Buttons: square, black fill, uppercase small text with 0.12em tracking.
+- Images: soft daylight, neutral clothes on plain walls, 4:5 portrait crops.
+- Signature: a giant wordmark (15vw) across the footer; product grid with no borders, just image, name and price.
+
+## 2. Noir Gallery
+Best for: photographers, artists, film, architecture portfolios.
+- Palette: bg `#0F0F0E`, surface `#181816`, ink `#ECE8E1`, muted `#8E8A82`, line `#2B2A27`, accent `#ECE8E1`, on-accent `#0F0F0E`.
+- Fonts: display **Instrument Serif** 400, text **Familjen Grotesk** 400/500.
+- Radius 0 to 2px. Buttons: outlined ink, fill on hover.
+- Images: full-bleed, edge to edge, captions in small text under the image.
+- Signature: an index list of projects with large serif titles and year on the right; image appears on hover (desktop) or inline (phone).
+
+## 3. Stone and Linen
+Best for: architects, interior designers, hotels, real estate, furniture.
+- Palette: bg `#ECE9E2`, surface `#E2DED4`, ink `#23211D`, muted `#6C675E`, line `#CEC8BB`, accent `#4C5A3B`, on-accent `#F4F2EC`.
+- Fonts: display **Cormorant Garamond** 500, text **Manrope** 400/500.
+- Radius 2px. Buttons: moss fill, small caps text.
+- Images: interiors in natural light, materials close up, 3:2 crops.
+- Signature: large split sections, image 7 columns and text 5, alternating sides.
+
+## 4. Harbour
+Best for: restaurants, seafood, wine bars, wellness retreats, travel.
+- Palette: bg `#F1EFEA`, surface `#E6E3DC`, ink `#14212A`, muted `#5B6870`, line `#D2D2CC`, accent `#163E4E`, on-accent `#F1EFEA`.
+- Fonts: display **Fraunces** 400 (optical size on), text **Figtree** 400/500.
+- Radius 4px. Buttons: deep teal fill.
+- Images: warm food on dark tables, candle light, people at a distance.
+- Signature: a menu set like a printed card (two columns, dotted leaders between dish and price).
+
+## 5. Swiss Precision
+Best for: fintech, software, developer tools, B2B, consultancies.
+- Palette: bg `#F7F7F5`, surface `#FFFFFF`, ink `#0C0C0D`, muted `#5E5E64`, line `#E2E2DF`, accent `#2142D9`, on-accent `#FFFFFF`.
+- Fonts: **Schibsted Grotesk** for everything (500 display, 400 text).
+- Radius 6px. Buttons: blue fill, compact.
+- Images: real product screenshots in thin device frames, or none.
+- Signature: a strict 12 column grid made visible by hairline rules; numbers set large in tabular figures.
+
+## 6. Midnight Ink
+Best for: premium AI products, audio, automotive, night brands.
+- Palette: bg `#0D1014`, surface `#141920`, ink `#E7EBEF`, muted `#8B95A1`, line `#232A33`, accent `#C8B27A` (muted brass), on-accent `#0D1014`.
+- Fonts: display **Newsreader** 400, text **Instrument Sans** 400/500.
+- Radius 8px. Buttons: brass fill, small.
+- Images: product in low light, strong single light source.
+- Signature: one slow full-screen product image section; everything else minimal.
+
+## 7. Bold Editorial
+Best for: agencies, studios, magazines, events, music.
+- Palette: bg `#F2F0EB`, surface `#E7E4DD`, ink `#111111`, muted `#5F5C57`, line `#111111`, accent `#D3321F`, on-accent `#FFFFFF`.
+- Fonts: display **Archivo** 800 (condensed width if available), text **Archivo** 400.
+- Radius 0. Buttons: red fill, heavy text.
+- Images: black and white photography with one colour image as contrast.
+- Signature: oversized headlines that run edge to edge, thick 2px black rules between sections.
+
+## 8. Champagne
+Best for: jewellery, beauty, skincare, weddings, boutique hotels.
+- Palette: bg `#FAF7F2`, surface `#F2ECE3`, ink `#1E1A17`, muted `#7A7068`, line `#E6DDD1`, accent `#9C7E4F`, on-accent `#FFFFFF`.
+- Fonts: display **Italiana** 400 (or **Cormorant Garamond** 400), text **Jost** 300/400.
+- Radius: pills for buttons, 0 for images.
+- Images: close-ups of product and skin, soft shadows, lots of negative space.
+- Signature: centered, slow vertical rhythm with narrow text columns (max 34rem) and very large margins.
+
+## Making your own direction
+1. Choose a background off-white or soft black. Choose an ink 85 to 90% darker or lighter than it.
+2. Derive `surface` (3 to 5% darker or lighter than bg), `muted` (about 55% mix of ink and bg) and `line` (about 15% mix).
+3. Pick one accent from the brand's world (a leather brown, a sea teal, an olive, a lacquer red). Avoid default purple and electric blue.
+4. Pick one display face and one text face from the lists in `taste.md`.
+5. Decide radius (0, 4 or 8px) and keep it everywhere. Decide the one signature move.
+6. Check contrast: ink on bg and on-accent on accent must be 4.5:1 or more.
+
+## Tokens template (Tailwind CSS v4)
+```css
+@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;1,400&family=Hanken+Grotesk:wght@400;500&display=swap");
+@import "tailwindcss";
+
+:root {
+  --bg: #F3F0EA; --surface: #E9E4DA; --ink: #161513; --muted: #6F6A61;
+  --line: #D8D1C4; --accent: #161513; --on-accent: #F3F0EA;
+  --font-display: "Bodoni Moda", Georgia, serif;
+  --font-text: "Hanken Grotesk", system-ui, sans-serif;
+}
+
+@theme inline {
+  --color-bg: var(--bg); --color-surface: var(--surface); --color-ink: var(--ink);
+  --color-muted: var(--muted); --color-line: var(--line);
+  --color-accent: var(--accent); --color-on-accent: var(--on-accent);
+  --font-display: var(--font-display); --font-text: var(--font-text);
+}
+
+html { background: var(--bg); color: var(--ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
+h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
+```
+Now use `bg-bg`, `bg-surface`, `text-ink`, `text-muted`, `border-line`, `bg-accent text-on-accent`, `font-display`.

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

@@ -0,0 +1,65 @@
+# Premium mobile apps
+
+The same taste rules apply, scaled to a hand. A premium app feels calm, fast and certain: big clear titles, one main action per screen, generous touch targets, motion that explains what changed.
+
+Works for a mobile web app or PWA (React + Tailwind) and for native apps (React Native / Expo, Flutter, SwiftUI): the numbers below are the same.
+
+## The system
+- **Grid**: 4pt base. Screen margin 20px (16px on very small phones). Gaps 8, 12, 16, 24, 32.
+- **Type** (sizes in px): large title 34 (bold or display face), title 22 to 28, headline 17 semibold, body 16 to 17, secondary 14 to 15, caption 12 to 13. Line height 1.3 to 1.4. Never below 12.
+- **Colour**: the same direction tokens as the website. Light and dark mode both designed, not inverted. Surfaces separate by a small tone shift, not shadows.
+- **Radius**: pick one: 12px (cards), 16 to 20px (sheets), full (buttons and chips) and keep it.
+- **Icons**: one icon set, 24px, 1.5 to 2px stroke, filled version only for the active tab.
+- **Touch**: every target at least 44 by 44px (48 on Android). 8px between targets.
+
+## Navigation
+- **Tab bar**: 3 to 5 tabs, icon + short label, 56px plus the bottom safe area. Active tab in ink or accent, others muted. No floating gradient pills.
+- **Top bar**: large title that collapses to a small centered title on scroll; back button on the left; at most two actions on the right.
+- **Sheets**: for secondary tasks (filters, sharing, quick add). Grab handle, rounded top corners, dim the page behind with flat `bg-black/40`.
+- **Primary action**: a full-width button pinned above the tab bar or at the bottom of the sheet, 52 to 56px tall.
+
+## Screen blueprints
+1. **Onboarding**: 3 screens max. Big image or simple illustration, one headline, one sentence, progress dots, "Continue" button, "Skip" text button. Ask for permissions only when the feature needs them, never on screen one.
+2. **Sign in**: logo, one sentence, Sign in with Apple / Google buttons, email option below. Large inputs (52px), clear errors under the field.
+3. **Home**: large title with a greeting or date, one hero card (today's thing), then a list or horizontal row of items. No more than three blocks above the fold.
+4. **List**: rows 64 to 72px with leading image or icon, title, secondary line, trailing value or chevron. Hairline separators inset to the text. Swipe actions also available as buttons in the detail screen.
+5. **Detail**: big media at the top (edge to edge), title, key facts as a short list, sticky bottom bar with the main action.
+6. **Search**: field at the top that gets focus, recent searches, results grouped by type.
+7. **Profile and settings**: grouped lists with section headers, toggles on the right, destructive actions last and in red text.
+8. **Empty states**: a short line saying what will appear here and one button to start.
+
+## Motion
+- Screen pushes: slide 100% with a slight parallax of the previous screen, 300 to 350ms.
+- Sheets: spring up (stiffness about 400, damping about 34); dismiss by dragging down.
+- Press feedback: scale to 0.97 in 100ms, back on release. Light haptic on toggles and success (native).
+- Lists: new items fade in, removed items collapse. No bouncing cards.
+- Respect reduced motion: crossfades only.
+
+## Mobile web app specifics
+- `viewport-fit=cover` and safe-area padding on top and bottom bars (see `responsive-mobile.md`).
+- Use `100dvh` for full-height screens; disable overscroll glow where it breaks the app feel (`overscroll-behavior: none` on the app shell).
+- Inputs 16px or larger so iOS does not zoom. Correct `inputmode` and `autocomplete`.
+- Make it installable: manifest with icons and `display: standalone`, theme colour matching the top bar.
+
+## Tab bar blueprint (React + Tailwind)
+```jsx
+const tabs = [["Today", HomeIcon], ["Explore", CompassIcon], ["Library", BookIcon], ["Profile", UserIcon]];
+<nav className="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-bg/95 backdrop-blur-sm pb-[env(safe-area-inset-bottom)]">
+  <ul className="mx-auto grid max-w-md grid-cols-4">
+    {tabs.map(([label, Icon]) => {
+      const on = label === active;
+      return (
+        <li key={label}>
+          <button onClick={() => setActive(label)} aria-current={on ? "page" : undefined} className={`flex h-14 w-full flex-col items-center justify-center gap-1 text-[11px] ${on ? "text-ink" : "text-muted"}`}>
+            <Icon className="h-6 w-6" strokeWidth={on ? 2 : 1.5} />
+            {label}
+          </button>
+        </li>
+      );
+    })}
+  </ul>
+</nav>
+```
+
+## App copy
+Same rules as `copy.md`, shorter: titles of 1 to 3 words, buttons as verbs ("Start session", "Save", "Done"), confirmations that say what happened ("Saved to Library").

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/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/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.13.0",
+  "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",

package/dist/skill/apexui/references/design-system.md

@@ -1,104 +0,0 @@
-# Design system
-
-Pick one palette and one font pair, put them in CSS variables, and use only those tokens. Consistency is what makes a page look premium.
-
-## Palettes
-
-Each palette has a dark and a light mode. `accent` is for primary buttons, links and highlights only; `on-accent` is the text colour on top of it. Contrast of `ink` on `bg` and `on-accent` on `accent` passes WCAG AA.
-
-| Palette | Mood, best for | Mode | bg | surface | line | ink | muted | accent | on-accent |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| Volt | Bold, developer tools, SaaS | dark | #09090b | #131316 | #27272a | #fafafa | #a1a1aa | #a3e635 | #0a0a0a |
-| Volt | | light | #fafafa | #ffffff | #e4e4e7 | #09090b | #52525b | #4d7c0f | #ffffff |
-| Indigo Night | Trustworthy, AI products, fintech | dark | #0b0d17 | #12162a | #23284a | #eef0ff | #9aa3c7 | #818cf8 | #0b0d17 |
-| Indigo Night | | light | #f7f8ff | #ffffff | #e3e6f8 | #0f1229 | #545b80 | #4f46e5 | #ffffff |
-| Ember | Warm, creative studios, food, events | dark | #120c0a | #1c1411 | #33241e | #fff5ef | #c9a99a | #ff6a3d | #1a0d07 |
-| Ember | | light | #fffaf6 | #ffffff | #f1e2d8 | #1f1410 | #7a5a4b | #e8501f | #ffffff |
-| Glacier | Calm, health, productivity | dark | #071114 | #0d1b20 | #1d333a | #ecfbff | #93b4bd | #5eead4 | #04201b |
-| Glacier | | light | #f5fbfc | #ffffff | #dcedf0 | #0b2228 | #4b6b73 | #0f766e | #ffffff |
-| Rose Quartz | Soft luxury, beauty, lifestyle | dark | #140b10 | #1e1118 | #3a2230 | #fff1f6 | #c79bb0 | #f472b6 | #1d0612 |
-| Rose Quartz | | light | #fff7fa | #ffffff | #f6dde8 | #2a1020 | #80586a | #be185d | #ffffff |
-| Graphite Gold | Luxury, finance, architecture | dark | #0c0b09 | #15130f | #2c2820 | #f7f2e8 | #b3a88f | #d4af37 | #15110a |
-| Graphite Gold | | light | #faf8f3 | #ffffff | #ebe5d6 | #1a1712 | #6b6250 | #8a6d12 | #ffffff |
-| Ocean Signal | Clean, B2B, analytics | dark | #06101f | #0c1a30 | #1c2f4d | #eaf2ff | #8fa6c9 | #38bdf8 | #04121f |
-| Ocean Signal | | light | #f6f9fe | #ffffff | #dde7f5 | #0a1a33 | #4e6283 | #0369a1 | #ffffff |
-| Grape Soda | Playful, consumer apps, games | dark | #110a1c | #1a1029 | #33224d | #f6efff | #b3a0d1 | #c084fc | #170a26 |
-| Grape Soda | | light | #fbf8ff | #ffffff | #ebe1f8 | #1d0f33 | #6b5a85 | #7e22ce | #ffffff |
-| Forest | Natural, sustainability, outdoors | dark | #0a110c | #111c14 | #223627 | #eef8f0 | #9bb7a1 | #4ade80 | #06170b |
-| Forest | | light | #f7fbf7 | #ffffff | #dfece2 | #0f2214 | #50685a | #15803d | #ffffff |
-| Mono Paper | Editorial, portfolios, minimal | dark | #0e0e0e | #171717 | #2a2a2a | #f5f5f4 | #a8a29e | #f5f5f4 | #0e0e0e |
-| Mono Paper | | light | #f5f4f0 | #ffffff | #e2e0d9 | #111111 | #5f5c55 | #111111 | #f5f4f0 |
-
-### Using a palette with Tailwind CSS v4
-
-```css
-@import "tailwindcss";
-
-:root {
-  --bg: #09090b; --surface: #131316; --line: #27272a;
-  --ink: #fafafa; --muted: #a1a1aa; --accent: #a3e635; --on-accent: #0a0a0a;
-}
-:root[data-theme="light"] {
-  --bg: #fafafa; --surface: #ffffff; --line: #e4e4e7;
-  --ink: #09090b; --muted: #52525b; --accent: #4d7c0f; --on-accent: #ffffff;
-}
-
-@theme inline {
-  --color-bg: var(--bg);
-  --color-surface: var(--surface);
-  --color-line: var(--line);
-  --color-ink: var(--ink);
-  --color-muted: var(--muted);
-  --color-accent: var(--accent);
-  --color-on-accent: var(--on-accent);
-}
-
-body { background: var(--bg); color: var(--ink); }
-```
-
-Now `bg-surface`, `text-muted`, `border-line`, `bg-accent text-on-accent` work everywhere. Most ApexUI components take an `accentColor` prop: pass the same accent hex.
-
-## Font pairs (Google Fonts)
-
-| Pair | Display (headings) | Text (body) | Feel |
-| --- | --- | --- | --- |
-| Modern tech | Space Grotesk 600 | Inter 400/500 | Developer, SaaS |
-| Sharp editorial | Instrument Serif 400 | Inter 400 | Portfolios, studios |
-| Friendly product | Plus Jakarta Sans 700 | Plus Jakarta Sans 400 | Consumer apps |
-| Bold startup | Sora 700 | DM Sans 400 | AI startups, launches |
-| Luxury | Cormorant Garamond 600 | Manrope 400 | Fashion, hospitality |
-| Geometric clean | Outfit 600 | Outfit 400 | Dashboards, fintech |
-| Playful | Bricolage Grotesque 700 | Nunito Sans 400 | Games, kids, community |
-| Mono accent | Geist 600 | Geist 400 + Geist Mono for labels | Dev tools, docs |
-
-Load only the weights you use, with `display=swap`. Use the mono font for small uppercase labels (`text-xs tracking-[0.2em] uppercase`).
-
-## Type scale (fluid)
-
-| Role | Size | Line height | Tracking |
-| --- | --- | --- | --- |
-| Hero headline | `clamp(2.5rem, 6vw + 1rem, 5.5rem)` | 1.0 | -0.03em |
-| Section title | `clamp(1.9rem, 3.2vw + 0.8rem, 3.25rem)` | 1.05 | -0.02em |
-| Card title | 1.125 to 1.375rem | 1.25 | -0.01em |
-| Body | 1rem to 1.125rem | 1.6 | 0 |
-| Small, labels | 0.75 to 0.875rem | 1.4 | 0.02em (uppercase: 0.18em) |
-
-Keep body text to 60 to 72 characters per line (`max-w-prose` or `max-w-[65ch]`).
-
-## Space, radius, depth
-
-- Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px. Section padding: `py-[clamp(4rem,10vw,8rem)]`. Page gutter: `px-[clamp(1rem,4vw,3rem)]`.
-- Radius scale: 8px (inputs, chips), 12 to 16px (buttons, small cards), 20 to 28px (cards, panels), full (pills, avatars). Pick 3 and reuse them.
-- Shadows on dark: rely on borders (`border-line`) and a soft glow of the accent at 10 to 20% opacity. On light: `0 1px 2px rgb(0 0 0 / .05), 0 12px 32px -12px rgb(0 0 0 / .15)`.
-- Max content width: 72 to 80rem for marketing pages, 90rem for dashboards.
-
-## Motion
-
-| Use | Duration | Easing |
-| --- | --- | --- |
-| Hover, press, toggles | 150 to 220ms | `cubic-bezier(0.22, 1, 0.36, 1)` |
-| Menus, popovers, tabs | 200 to 300ms | same, or spring stiffness 400, damping 32 |
-| Section entrances | 500 to 900ms, stagger 60 to 90ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
-| Drag, swipe, magnetic | spring stiffness 150 to 300, damping 18 to 26 | |
-
-Respect `prefers-reduced-motion: reduce`: turn off parallax, auto-play and large movement; keep fades.

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

@@ -1,68 +0,0 @@
-# Recipes
-
-Proven section orders for common products, with the ApexUI components that fit each part. Component names match `components.md` (look up the CLI name there). Swap pieces to fit the brand; keep the structure.
-
-## Page skeleton (every marketing page)
-
-1. **Nav**: logo left, 3 to 6 links, one primary CTA right. Floating Navbar (switches to a burger by its own width) or Gooey Nav for a playful brand.
-2. **Hero**: one promise in 4 to 9 words, one supporting line, one primary and one secondary CTA, proof under it (logos, rating, user count). One hero effect only.
-3. **Proof**: logo strip (Scroll Marquee, Crossed Marquee) or numbers (Rolling Counter).
-4. **Features**: 3 to 6 benefits, each with a title that states the outcome. Spotlight Grid, Hyper Card, Iso Stack for "how it fits together".
-5. **How it works**: 3 steps. Stepper, Scroll Stack, or numbered cards.
-6. **Showcase**: product shots or work. Image Accordion, Coverflow 3D, Arc Gallery, Image Compare (before/after).
-7. **Testimonials**: Testimonials, Card Stack, Swipe Cards.
-8. **Pricing**: Pricing Cards (monthly/yearly toggle, one highlighted plan).
-9. **FAQ**: FAQ Accordion with 5 to 8 real questions.
-10. **Final CTA**: repeat the promise, one button. Star Border or Magnetic Button.
-11. **Footer**: links in 3 to 4 columns, legal, socials, theme toggle.
-
-## SaaS / developer tool
-- Palette: Volt or Ocean Signal. Fonts: Modern tech or Mono accent.
-- Hero: Blueprint Background or Dot Wave Background, headline with Blur Reveal Text, CLI install line in a mono chip.
-- Features: Spotlight Grid; code samples in cards; Command Palette demo for power users.
-- Extras: Animated Tabs to switch between "Code / Preview / Docs".
-
-## AI startup
-- Palette: Indigo Night or Grape Soda. Fonts: Bold startup.
-- Hero: Galaxy 3D, Aurora Background or Horizon Glow; headline with Scramble Text or Rotating Text.
-- Product: AI Prompt Box (input), AI Thinking + AI Response (output), AI Voice Orb for voice mode.
-- Trust: security and privacy section with plain-language bullets.
-
-## Portfolio / creative studio
-- Palette: Mono Paper or Ember. Fonts: Sharp editorial.
-- Hero: big name with Extruded Text, Mask View or Proximity Text; Fluid Cursor or Magnetic Cursor for character.
-- Work: Image Accordion, Infinite Canvas or Arc Gallery; each project opens a case study page.
-- Contact: Edge Glow Form, plus a direct email link.
-
-## E-commerce / product store
-- Palette: Ember, Rose Quartz or Graphite Gold. Fonts: Friendly product or Luxury.
-- Hero: product on Glass Lens or Liquid Glass; price and "Add to bag" visible without scrolling on phones.
-- Browse: Coverflow 3D or Carousel for collections, Swipe Cards for "find your style".
-- Feedback: Toast Stack for "Added to bag"; Folder or Receipt Printer for order summary flourishes.
-
-## App launch / mobile app marketing
-- Palette: Grape Soda, Glacier or Volt. Fonts: Friendly product.
-- Hero: phone mockup with real screens, Liquid Glass accents, store badges.
-- Features: Bounce Cards or Card Stack for screens; Flip Clock or Rolling Counter for launch countdown.
-
-## Event / conference
-- Palette: Ember or Grape Soda. Hero: Warp Tunnel or Retro Grid 3D with Flip Clock countdown. Schedule in Animated Tabs (by day), speakers in Profile cards.
-
-## Dashboard / admin
-- Layout: Sidebar Nav (collapses to an icon rail), top bar with search (Command Palette, Ctrl/Cmd K), Theme Switcher.
-- Content: KPI cards with Rolling Counter, tables with sticky headers, Animated Tabs for views, Toast Stack for results, Stepper for multi-step forms.
-- Keep motion quiet: no background effects behind data.
-
-## Auth screens (sign in, sign up, reset)
-- Split layout on desktop (form left, brand panel right with a background effect), single column on phones.
-- One form per screen, labels above inputs, show/hide password, clear inline errors, "Continue with" providers below.
-- Never store tokens in localStorage; see `security.md`.
-
-## Mobile app screens (mobile-first web app or PWA)
-- **Onboarding**: 3 slides max (Swipe Cards or a Carousel), skip button, progress dots, final CTA.
-- **Home / feed**: sticky top bar (title + 1 action), content cards (Cards, Card Stack), pull-to-refresh optional.
-- **Bottom tab bar**: 3 to 5 tabs, icons with labels, 56 to 64px tall plus safe-area inset, active state clear. Magnify Dock or Gooey Nav styled as a bottom bar.
-- **Detail**: large media, title, primary action in a sticky bottom bar.
-- **Profile / settings**: grouped lists, Animated Switches for toggles, Theme Switcher.
-- **Feedback**: Toast Stack at the top on phones (bottom bars cover the bottom), Dynamic Island style status for long tasks.
-- Touch: every target at least 44 by 44px, swipe actions also available as buttons.