apex-ui-kit 2.12.2 → 2.14.0

package/ReadMe.md

@@ -65,6 +65,17 @@ export default function App() {
 }
 ```
 
+## AI agent skill
+
+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 set up every agent at once
+```
+
+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
 
 ```bash
@@ -260,8 +271,10 @@ 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.12
+## 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).
 - New in 2.9: Liquid Glass (iOS style WebGL glass), 10 live page templates on the site, Arc Gallery auto scroll, Scroll Stack on the page scroll, Sunrise trees and birds.

package/dist/cli/index.js

@@ -176,13 +176,99 @@ async function importedPackages(dir) {
     await walk(dir);
     return [...found];
 }
+// ---- AI agent skill -------------------------------------------------------
+// `npx apex-ui-kit skill [--ai claude,cursor,...|all]` installs the ApexUI skill
+// 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 = "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" },
+    cursor: { label: "Cursor", file: ".cursor/rules/apexui.mdc", head: `---\ndescription: ${SKILL_DESC}\nalwaysApply: false\n---\n\n` },
+    windsurf: { label: "Windsurf", file: ".windsurf/rules/apexui.md", head: `---\ntrigger: model_decision\ndescription: ${SKILL_DESC}\n---\n\n` },
+    copilot: { label: "GitHub Copilot", file: ".github/instructions/apexui.instructions.md", head: `---\napplyTo: "**"\n---\n\n` },
+    codex: { label: "Codex, ChatGPT agents and other AGENTS.md tools", file: "AGENTS.md", section: true },
+    gemini: { label: "Gemini CLI", file: "GEMINI.md", section: true },
+};
+async function installSkill(args) {
+    if (!(await fs.pathExists(path.join(skillRoot, "SKILL.md")))) {
+        console.log(chalk.red("❌ Internal error: skill files not found in the package."));
+        return;
+    }
+    const flag = args.find((a) => a.startsWith("--ai"));
+    let picked = [];
+    if (flag) {
+        const value = flag.includes("=") ? flag.split("=")[1] : args[args.indexOf(flag) + 1] ?? "";
+        picked = value === "all" ? Object.keys(AGENTS) : value.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    }
+    else {
+        const { agents } = await prompts({
+            type: "multiselect",
+            name: "agents",
+            message: "🤖 Install the ApexUI skill for which AI agents?",
+            choices: Object.entries(AGENTS).map(([value, a]) => ({ title: a.label, value, selected: value === "claude" })),
+            hint: "Space to select, Enter to confirm",
+        });
+        picked = agents ?? [];
+    }
+    const unknown = picked.filter((p) => !AGENTS[p]);
+    if (unknown.length) {
+        console.log(chalk.red(`❌ Unknown agent: ${unknown.join(", ")}. Use: ${Object.keys(AGENTS).join(", ")} or all.`));
+        return;
+    }
+    if (!picked.length) {
+        console.log(chalk.yellow("Nothing selected."));
+        return;
+    }
+    const cwd = process.cwd();
+    const raw = await fs.readFile(path.join(skillRoot, "SKILL.md"), "utf8");
+    const body = raw.replace(/^---[\s\S]*?---\s*/, "").replace(/`references\//g, "`.apexui/skill/references/");
+    let sharedCopied = false;
+    for (const key of picked) {
+        const a = AGENTS[key];
+        if (a.dir) {
+            const dest = path.join(cwd, a.dir);
+            await fs.ensureDir(dest);
+            await fs.copy(skillRoot, dest, { overwrite: true });
+            console.log(chalk.green(`✅ ${a.label}: ${a.dir}/`));
+            continue;
+        }
+        if (!sharedCopied) {
+            await fs.copy(path.join(skillRoot, "references"), path.join(cwd, ".apexui", "skill", "references"), { overwrite: true });
+            sharedCopied = true;
+        }
+        const file = path.join(cwd, a.file);
+        await fs.ensureDir(path.dirname(file));
+        if (a.section) {
+            const block = `<!-- apexui:start -->\n${body.trim()}\n<!-- apexui:end -->\n`;
+            const old = (await fs.pathExists(file)) ? await fs.readFile(file, "utf8") : "";
+            const next = old.includes("<!-- apexui:start -->")
+                ? old.replace(/<!-- apexui:start -->[\s\S]*?<!-- apexui:end -->\n?/, block)
+                : `${old}${old && !old.endsWith("\n") ? "\n" : ""}${old ? "\n" : ""}${block}`;
+            await fs.writeFile(file, next);
+        }
+        else {
+            await fs.writeFile(file, `${a.head ?? ""}${body}`);
+        }
+        console.log(chalk.green(`✅ ${a.label}: ${a.file}`));
+    }
+    if (sharedCopied)
+        console.log(chalk.gray("   Reference files: .apexui/skill/references/"));
+    console.log(chalk.cyan("\nNow ask your agent, for example: \"Build a premium, responsive landing page for my app with ApexUI.\""));
+}
 async function main() {
     const args = process.argv.slice(2);
     const command = args[0];
     const rawInput = args[1];
+    if (command === "skill") {
+        await installSkill(args.slice(1));
+        return;
+    }
     if (command !== "add" || !rawInput) {
         console.log(chalk.yellow("Usage:"));
         console.log("  npx apex-ui-kit add <component-name>");
+        console.log("  npx apex-ui-kit skill [--ai claude,antigravity,cursor,windsurf,copilot,codex,gemini | all]");
         return;
     }
     const input = rawInput.toLowerCase();

package/dist/skill/apexui/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: apexui
+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.
+---
+
+# 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/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

@@ -0,0 +1,42 @@
+# Pre-delivery checklist
+
+Go through every line. Fix what fails. In your final message, say which direction you used and list anything you could not check.
+
+## 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 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.
+- [ ] README: how to run, where to change copy, colours and images.

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

@@ -0,0 +1,172 @@
+# ApexUI components (optional)
+
+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
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| BluePrint Background | `blueprint-background` | An animated blueprint-style grid background with interactive hover effects. |
+| Kinetic Threads Background | `kinetic-threads-background` | A generative background of flowing, animated threads. |
+| Lens Flare Background | `lens-flare-background` | An animated lens flare that adds a cinematic touch to any hero. |
+| Luminous Particle Ocean | `luminous-particle-ocean` | A 3D ocean of glowing particles for immersive backgrounds. |
+| Orbs Background | `orbs-background` | Floating orbs that drift and react to the pointer. |
+| Rain Background | `rain-background` | Animated rainfall with collision detection. |
+| Ripple Background | `ripple-background` | Soft, generative ripples that spread across the canvas. |
+| Smoke Background | `smoke-background` | A WebGL smoke simulation with dynamic lighting. |
+| Dot Wave Background | `dot-wave-background` | A grid of dots with a rolling wave of color that reacts to the pointer. |
+| Liquid Gradient | `liquid-gradient` | A flowing four-color mesh gradient with film grain, drawn by one tiny OGL shader. |
+| Aurora Background | `aurora-background` | Drifting northern-light curtains drawn by a light WebGL shader. |
+| Retro Grid 3D | `retro-grid-3d` | A synthwave three.js landscape with scrolling hills and a striped sun. |
+| Galaxy 3D | `galaxy-3d` | A turning three.js spiral galaxy with pointer parallax. |
+| Warp Tunnel | `warp-tunnel` | A WebGL hyperspace tunnel that bends to the pointer; hold to boost. |
+| Sunrise Background | `sunrise-background` | A WebGL sun rising between two mountain ranges, with rays, mist and rim light. |
+| Horizon Glow | `horizon-glow` | A soft WebGL light rising from the bottom edge into a deep sky, for hero sections. |
+| Dither Waves | `dither-waves` | Flowing waves as two-tone dithered pixel art in WebGL, with pointer ripples. |
+
+## Text & Motion
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Accordion Marquee | `accordion-marquee` | An interactive accordion with a smooth marquee effect on hover. |
+| Beam Bar | `beam-bar` | An animated beam bar with a pulsing light for loading states and dashboards. |
+| Hover Text | `hover-text` | Interactive text hover effects that bring headings to life. |
+| Scroll Marquee | `scroll-marquee` | Text and card marquees whose speed follows the scroll. |
+| Rolling Counter | `rolling-counter` | An odometer-style number whose digit wheels roll to every new value. |
+| Scramble Text | `scramble-text` | Text that decrypts letter by letter on view, on hover or on a loop. |
+| Blur Reveal Text | `blur-reveal-text` | Words rise out of a blur one after another as they scroll into view. |
+| Flip Clock | `flip-clock` | Split-flap digits for countdowns, timers and clocks. |
+| Typewriter Text | `typewriter-text` | Types, pauses and deletes rotating phrases with a blinking caret. |
+| Extruded Text | `extruded-text` | Chunky 3D layered letters that tilt toward the pointer. |
+| Mask View | `mask-view` | Reveal content through a mask: a text window onto an image, a spotlight, or glass you wipe clear. |
+| Shiny Text | `shiny-text` | A band of light sweeps across the text on a loop, like light catching metal. |
+| Glitch Text | `glitch-text` | Text that tears into shifted color slices like a broken signal. |
+| Rotating Text | `rotating-text` | A headline whose last word swaps letter by letter inside a resizing pill. |
+| Circular Text | `circular-text` | Text wrapped around a spinning circle that reacts to hover. |
+| Proximity Text | `proximity-text` | Letters swell, lift and light up as the pointer gets close. |
+| True Focus | `true-focus` | One sharp word at a time, framed by brackets that glide between words. |
+| 3D Text Ring | `text-ring-3d` | Letters on a spinning ring in real 3D, drag to throw it around. |
+| Particle Text | `particle-text` | Text built from canvas particles that fly in, dodge the pointer and burst on click. |
+| Crossed Marquee | `crossed-marquee` | Two tilted tech-stack bands crossing like an X that react to page scroll. |
+
+## Cards
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Cards | `basic-card`, `meteor-card` | Basic and meteor-shower cards for showcasing content with motion. |
+| Card Stack | `card-stack` | A stack of cards that cycles automatically and pauses on hover. |
+| Glare Card | `glare-card` | A card with a reflective glare that follows the user's cursor. |
+| Hyper Card | `hyper-card` | A futuristic card with a starfield background and warp-speed hover. |
+| Parallax Card | `parallax-card` | A card with a layered 3D parallax effect. |
+| Profile | `flip-profile`, `parallax-profile`, `profile-card` | Profile cards in four styles, flip, parallax, a tilting card and an ID badge on a ribbon. |
+| Testimonials | `testimonials` | A testimonials section with smooth transitions between quotes. |
+| Spotlight Grid | `spotlight-grid` | A bento grid of cards sharing one pointer spotlight across borders and surfaces. |
+| Pricing Cards | `pricing-cards` | Plans with a monthly / yearly switch, sliding prices and a glowing featured plan. |
+| Swipe Cards | `swipe-cards` | A deck you swipe left or right with tilt, LIKE / NOPE stamps and undo. |
+| Holo Card | `holo-card` | A collectible card that tilts in 3D with a holographic foil and floating layers. |
+| Iso Stack | `iso-stack` | Isometric 3D layers that fan open to show each label. |
+| Pixel Transition | `pixel-transition` | A card that dissolves into pixels to reveal its other side. |
+| Folder | `folder` | A folder that opens and fans its papers out toward the pointer. |
+| Bounce Cards | `bounce-cards` | A fanned hand of photo cards that bounce in and make room on hover. |
+| Distortion Image | `distortion-image` | A WebGL image that ripples and splits into RGB fringes under the pointer. |
+| Scroll Stack | `scroll-stack` | Cards that pin and pile up as you scroll, shrinking and dimming into depth. |
+| Image Accordion | `image-accordion` | Image panels that open wide on hover and stack vertically on phones. |
+
+## Navigation
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Nav DropDown | `nav-dropdown` | A floating navbar with one dropdown panel that morphs between menus. |
+| Nav Menu | `nav-menu` | Navigation with an animated active indicator. |
+| Theme Toggle | `theme-toggle` | A light/dark switch with view-transition reveal animations. |
+| Magnify Dock | `magnify-dock` | A macOS-style glass dock whose icons swell toward the pointer. |
+| Sidebar Nav | `sidebar-nav` | An app sidebar that collapses to an icon rail, with a sliding active pill and groups. |
+| Animated Tabs | `animated-tabs` | Tabs with a sliding pill, underline or segmented indicator and sliding panels. |
+| Floating Navbar | `floating-navbar` | A glassy responsive navbar with a hover pill, hide-on-scroll and an animated mobile menu. |
+| Gooey Nav | `gooey-nav` | A liquid active pill that bursts droplets between links. |
+| Radial Menu | `radial-menu` | A round button that fans its actions out in a circle or an arc. |
+| Command Palette | `command-palette` | A ⌘K search palette with fuzzy matching and a sliding keyboard highlight. |
+| Theme Switcher | `theme-switcher` | Eight colour themes with a circle reveal from the swatch you click. |
+
+## Buttons
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Animated Buttons | `animated-button`, `hold-to-confirm` | Seven button feels, shine, fill, border beam, 3D press, loading, ripple and arrow. |
+| Animated Switches | `animated-switch` | Toggles with personality, classic, icon, day-to-night and neon. |
+| Star Border | `star-border` | A button with points of light sliding along its edges. |
+| Magnetic Button | `magnetic-button` | A button that leans toward the pointer with a layered label and a tracking glow. |
+
+## Interactive
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Avatar | `avatar` | Display user avatars on their own or as an animated, stacked group. |
+| Carousel | `carousel`, `parallax-carousel`, `drag-carousel` | Smooth, customizable carousels for showcasing images or content. |
+| Edge Glow Form | `edge-glow-form` | A form container that emits a soft gradient glow from its edges. |
+| Pointer Follower | `pointer-follower` | A pointer that follows the cursor and reveals content as it moves. |
+| ToolTip | `tooltip` | Animated tooltips with smooth, physics-based positioning. |
+| Receipt Printer | `receipt-printer` | A thermal printer that processes a payment and feeds a receipt out line by line. |
+| Dynamic Island | `dynamic-island` | A black capsule that morphs between music, calls, timers and notifications. |
+| 3D Carousel | `3d-carousel`, `webgl-carousel` | Cards on a ring that spins in 3D, a light CSS ring or a full 360° WebGL ring. |
+| Magnetic Cursor | `magnetic-cursor` | A dot-and-ring cursor that wraps buttons, labels images and pulls magnetic elements. |
+| FAQ Accordion | `faq-accordion` | Questions that open smoothly with a plus that turns into a cross. |
+| Toast Stack | `toast-stack` | Stacked notifications that fan out on hover and swipe away. |
+| Cursor Trail | `cursor-trail` | A tail that follows the mouse, comet, rainbow, dots, ribbon, sparkles or ghost rings. |
+| Image Compare | `image-compare` | A before / after slider you drag, click or move with the keyboard. |
+| Cube Gallery | `cube-gallery` | Images on a 3D cube you drag, click or arrow-key around. |
+| Flip Book | `flip-book` | A 3D book whose pages turn around the spine. |
+| Click Spark | `click-spark` | Every click throws a ring of sparks from the pointer. |
+| Elastic Slider | `elastic-slider` | A slider whose track stretches like rubber when pulled past the ends. |
+| Stepper | `stepper` | A multi-step flow with filling indicators and sliding step content. |
+| Coverflow 3D | `coverflow-3d` | The classic album-flip view with angled covers and reflections. |
+| Magnet Lines | `magnet-lines` | A grid of lines that all swing to point at the pointer. |
+| Liquid Blob 3D | `liquid-blob-3d` | A glossy three.js blob whose surface flows and ripples toward the pointer. |
+| Particle Morph | `particle-morph` | Thousands of three.js particles that swarm between 3D shapes. |
+| Marquee 3D | `marquee-3d` | A tilted 3D wall of cards with columns scrolling in opposite directions. |
+| Wireframe Knot 3D | `wireframe-knot-3d` | A glowing three.js wireframe shape that turns toward the pointer. |
+| Edge Blur | `edge-blur` | A progressive blur that melts content at the edge of a scrolling area. |
+| Circular Carousel | `circular-carousel` | A WebGL ring of curved image cards you can drag, flick and click. |
+| Arc Gallery | `arc-gallery` | An endless WebGL row of image cards bent along an arc, with drag and wheel. |
+| Glass Lens | `glass-lens` | A WebGL drop of liquid glass that refracts and magnifies an image under the pointer. |
+| Infinite Canvas | `infinite-canvas` | An endless wall of image cards you drag and fling in any direction. |
+| Orbit Icons | `orbit-icons` | Icons circling a center on tilted rings, easing to a stop on hover. |
+| Liquid Glass | `liquid-glass` | iOS style WebGL glass panels that bend, frost and melt together as you drag them. |
+| Fluid Cursor | `fluid-cursor` | A real-time WebGL fluid simulation that trails the cursor with swirling ink. |
+| Sketch Reveal | `sketch-reveal` | A photo turns into a glowing sketch, then burns away into the next one as you scroll. |
+
+## AI
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| AI Chat | `ai-chat` | A chat window with streaming replies, typing dots and suggestion chips. |
+| AI Prompt Box | `ai-prompt-box` | A prompt input with a glowing border, model picker, attachments and send / stop. |
+| AI Thinking | `ai-thinking` | A shimmering Thinking state with a timer and steps that tick off. |
+| AI Voice Orb | `ai-voice-orb` | A glass voice-assistant orb that reacts to idle, listening, thinking and speaking. |
+| AI Voice Wave | `ai-voice-wave` | Glowing sine waves that swell and burst with the assistant's voice. |
+| AI Voice Bars | `ai-voice-bars` | An equalizer pill of rounded bars for listening, thinking and speaking. |
+| AI Voice Ring | `ai-voice-ring` | A circular audio visualiser with radial bars around a glowing core. |
+| AI Voice Blob | `ai-voice-blob` | A gradient blob whose outline wobbles with the assistant's voice. |
+| AI Response | `ai-response` | A streaming answer with code, sources and copy / regenerate / feedback actions. |
+| AI Model Prompt | `ai-model-prompt` | A prompt composer with a model picker and per-model temperature, tokens and reasoning settings. |
+
+## Loaders
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Loading Screens | `loading-screen` | Six loaders, orbit, progress, blocks and three mini games (orb, runner, racing) to play while you wait. |
+
+## Maps
+
+| Component | CLI name | What it is |
+| --- | --- | --- |
+| Dot Globe | `dot-globe` | A draggable 3D globe of land dots with pulsing cities and flight arcs. |
+| World Map | `world-map` | A dotted world map with flight connections, live pings or clickable office pins. |
+
+## Picking well
+
+- 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.
+- 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").