yamcodes/arkenv

"owner": { 		"name": "Yam Borodetsky", 		"url": "https://yam.codes"

"name": "Yam Borodetsky", 		"url": "https://yam.codes" 	},

"url": "https://yam.codes"

[Nub](https://nubjs.com/) is the package manager and toolchain for this

curl -fsSL https://nubjs.com/install.sh | bash

curl -fsSL https://nubjs.com/install.sh | bash

(Or `npm install -g @nubjs/nub`. See the [Nub docs](https://nubjs.com/docs).

git clone https://github.com/yamcodes/arkenv.git

This starts a single `next dev` server at    [http://localhost:3000](http://localhost:3000).

[http://localhost:3000](http://localhost:3000).

> **RC docs cutover (Option A):** Production / `arkenv.js.org` tracks > **`v1`** (`vercel --prod`). Pushes to **`main`** refresh the legacy > archive at `https://arkenv-v0.vercel.app` and must **not** take

> **`v1`** (`vercel --prod`). Pushes to **`main`** refresh the legacy > archive at `https://arkenv-v0.vercel.app` and must **not** take > Production. `https://arkenv-dev.vercel.app` and

> archive at `https://arkenv-v0.vercel.app` and must **not** take

> Production. `https://arkenv-dev.vercel.app` and

> `https://arkenv-v1.vercel.app` stay as stable aliases. At GA (Option B,

3. Merge the "Version Packages" PR into `dev`. 4. A GitHub workflow will automatically build and publish the packages to npm. 5. Immediately after a successful publish, the workflow automatically fast-forwards the `main` branch to match `de

5. Immediately after a successful publish, the workflow automatically fast-forwards the `main` branch to match `dev`. This push to `main` refreshes the **v0 docs archive** (`https://arkenv-v0.vercel.app`), not Production. Production / `arke

| Branch / action                | Target                                                                              | | ------------------------------ | ----------------------------------------------------------------------------------- 

| ------------------------------ | ----------------------------------------------------------------------------------- | | Push to **`v1`**               | Production (`arkenv.js.org`) via `--prod`, and alias `https://arkenv-v1.vercel.app` 

| Push to **`v1`**               | Production (`arkenv.js.org`) via `--prod`, and alias `https://arkenv-v1.vercel.app` |

| Push to **`main`**             | Archive alias `https://arkenv-v0.vercel.app` (preview deploy, **not** `--prod`)     |

| Push to **`dev`** (if present) | Alias `https://arkenv-dev.vercel.app`                                               |

[Changesets](https://github.com/changesets/changesets) is used to manage versions and changelogs. Each PR that makes changes to the functionality of the package should include a changeset.

We use the [All Contributors](https://allcontributors.org/) specification to recognize all contributions.

For a full list of contribution types and more details on how to use the bot, please refer to the [bot usage documentation](https://allcontributors.org/bot/usage).

Amended (2026-08-24 by [#1586](https://github.com/yamcodes/arkenv/issues/1586); 2026-08-28 by [#1609](https://github.com/yamcodes/arkenv/issues/1609))

Three layers compose (hat loop for [#1564](https://github.com/yamcodes/arkenv/issues/1564) / [#1570](https://github.com/yamcodes/arkenv/pull/1570)):

- `import { arkenv } from "@arkenv/standard/valibot"`: Pre-configures coercion using `@valibot/to-json-schema` (`typeMode: "input"`, `target: "draft-07"`).    - `import { arkenv } from "@arkenv/standard/zod-mini"`: Pre-configures coercion u

- `import { arkenv } from "@arkenv/standard/zod-mini"`: Pre-configures coercion using `zod/mini`'s `toJSONSchema` helper (`io: "input"`, `target: "draft-07"`).    - *Note on Zod*: Classic Zod already exposes JSON Schema on the value (ADR 00

- *Note on Zod*: Classic Zod already exposes JSON Schema on the value (ADR 0002), so root `import { arkenv } from "@arkenv/standard"` works zero-config out of the box. A redundant `@arkenv/standard/zod` alias is **rejected** ([ADR 0029](./0

- **Zero Runtime Bloat:** Root `@arkenv/standard` remains 100% dependency-free. - **Pristine Package Footprint:** No legacy shim files in package roots; build outputs remain contained within `dist/`. - **Docs & CLI Alignment:** `arkenv init

- **Docs & CLI Alignment:** `arkenv init` will scaffold `@arkenv/standard/valibot` for Valibot ([#1607](https://github.com/yamcodes/arkenv/issues/1607)) and `@arkenv/standard` for Zod directly.

"author": { 		"name": "Yam Borodetsky", 		"url": "https://yam.codes"

"name": "Yam Borodetsky", 		"url": "https://yam.codes" 	}

"url": "https://yam.codes"

Executable file

[Credential-related source omitted]

[Credential-related source omitted]

write( 		npmrcPath, 		`//registry.npmjs.org/:_authToken=${token}\nregistry=https://registry.npmjs.org/\n`,

npmrcPath, 		`//registry.npmjs.org/:_authToken=${token}\nregistry=https://registry.npmjs.org/\n`, 		{ mode: 0o600 },

`//registry.npmjs.org/:_authToken=${token}\nregistry=https://registry.npmjs.org/\n`,

exec(command, fullArgs, { stdio: "inherit" });

const out = exec(command, fullArgs, {

[Credential-related source omitted]

[Credential-related source omitted]

#!/bin/bash

Architecture patterns for building scalable, maintainable React applications. Based on [bulletproof-react](https://github.com/alan2207/bulletproof-react).

Detailed reference documentation for the bulletproof-react skill. Based on [bulletproof-react](https://github.com/alan2207/bulletproof-react) by Alan Alickovic (MIT License).

Content derived from the [bulletproof-react](https://github.com/alan2207/bulletproof-react/tree/master/docs) documentation (MIT License).

- [Chakra UI](https://chakra-ui.com/) - great DX, fast prototyping, accessible out of the box

- [AntD](https://ant.design/) - extensive components, best for admin dashboards

- [MUI](https://mui.com/) - most popular, Material Design or headless

- [Mantine](https://mantine.dev/) - modern, customizable, many built-in hooks

- [Radix UI](https://www.radix-ui.com/)

- [Headless UI](https://headlessui.dev/)

- [React Aria](https://react-spectrum.adobe.com/react-aria/)

- [Ark UI](https://ark-ui.com/)

- [Reakit](https://reakit.io/)

- [ShadCN UI](https://ui.shadcn.com/)

- [Park UI](https://park-ui.com/)

- [Tailwind CSS](https://tailwindcss.com/) - utility-first, zero runtime

- [vanilla-extract](https://github.com/seek-oss/vanilla-extract) - type-safe, zero runtime

- [Panda CSS](https://panda-css.com/) - type-safe, zero runtime

- [CSS Modules](https://github.com/css-modules/css-modules) - scoped, zero runtime

- [styled-components](https://styled-components.com/) - runtime CSS-in-JS

- [emotion](https://emotion.sh/) - runtime CSS-in-JS

Use [Storybook](https://storybook.js.org/) for developing and testing components in isolation. It serves as a component catalogue for development and discoverability.

Use tools like [Sentry](https://sentry.io/) to track production errors. Don't build custom solutions - purpose-built tools provide:

For applications tracking many elements at once, consider atomic state libraries like [Jotai](https://jotai.pmnd.rs/) for granular updates.

- Use [use-context-selector](https://github.com/dai-shi/use-context-selector) for selector support

Before reaching for Context, consider [lifting state up](https://react.dev/learn/sharing-state-between-components#lifting-state-up-by-example) or [proper component composition](https://react.dev/learn/passing-data-deeply-with-context#before

Monitor [Core Web Vitals](https://web.dev/measure/) (LCP, INP, CLS) using Lighthouse and PageSpeed Insights.

Resource: [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)

- TanStack Query (if already using it) - via [react-query-auth](https://github.com/alan2207/react-query-auth)

For a full list of client-side security risks, see [OWASP Top 10 Client-Side Security Risks](https://owasp.org/www-project-top-10-client-side-security-risks/).

- [Zustand](https://github.com/pmndrs/zustand) - minimal, hooks-based

- [Jotai](https://github.com/pmndrs/jotai) - atomic, great for frequent granular updates

- [Redux Toolkit](https://redux-toolkit.js.org/) - structured, excellent DevTools

- [XState](https://xstate.js.org/) - state machines for complex workflows

Use [use-context-selector](https://github.com/dai-shi/use-context-selector) if Context causes performance issues (most state libraries have selectors built in).

- [TanStack Query](https://tanstack.com/query) - REST + GraphQL

- [SWR](https://swr.vercel.app/) - REST + GraphQL

- [Apollo Client](https://www.apollographql.com/) - GraphQL

- [URQL](https://formidable.com/open-source/urql/) - GraphQL

- [RTK Query](https://redux-toolkit.js.org/rtk-query) - REST

Integrate with validation libraries like [Zod](https://github.com/colinhacks/zod) or [Yup](https://github.com/jquense/yup).

Forms can be [controlled or uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) - choose based on need.

- Merging the "Version Packages" PR on `dev` triggers the publication of bumped packages to npm - Upon successful publish, the release workflow programmatically fast-forwards the `main` branch to `dev` (`git merge dev --ff-only`) and pushes

- Merging the "Version Packages" PR on `dev` triggers the publication of bumped packages to npm - Upon successful publish, the release workflow programmatically fast-forwards the `main` branch to `dev` (`git merge dev --ff-only`) and pushes

- Upon successful publish, the release workflow programmatically fast-forwards the `main` branch to `dev` (`git merge dev --ff-only`) and pushes it - The push to `main` refreshes the **v0 docs archive** (`https://arkenv-v0.vercel.app`), not

- Upon successful publish, the release workflow programmatically fast-forwards the `main` branch to `dev` (`git merge dev --ff-only`) and pushes it - The push to `main` refreshes the **v0 docs archive** (`https://arkenv-v0.vercel.app`), not

- The push to `main` refreshes the **v0 docs archive** (`https://arkenv-v0.vercel.app`), not Production

- The push to `main` refreshes the **v0 docs archive** (`https://arkenv-v0.vercel.app`), not Production

- [config.json](file:///.changeset/config.json) - Changeset configuration - [CHANGELOG.md](file:///CHANGELOG.md) - Generated changelog - Changesets docs: [https://github.com/changesets/changesets](https://github.com/changesets/changesets)

- [config.json](file:///.changeset/config.json) - Changeset configuration - [CHANGELOG.md](file:///CHANGELOG.md) - Generated changelog - Changesets docs: [https://github.com/changesets/changesets](https://github.com/changesets/changesets)

- Changesets docs: [https://github.com/changesets/changesets](https://github.com/changesets/changesets)

- Changesets docs: [https://github.com/changesets/changesets](https://github.com/changesets/changesets)

This skill was originally created by [Ollie Shop](https://github.com/ollieshop) and sourced from [github.com/ollieshop/creating-changesets](https://github.com/ollieshop/creating-changesets).

This skill was originally created by [Ollie Shop](https://github.com/ollieshop) and sourced from [github.com/ollieshop/creating-changesets](https://github.com/ollieshop/creating-changesets).

Apache License                            Version 2.0, January 2004                         http://www.apache.org/licenses/

http://www.apache.org/licenses/

http://www.apache.org/licenses/LICENSE-2.0

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Eval Set Review - __SKILL_NAME_PLACEHOLDER__</title>   <link rel="preconnect" href="https://fonts.googleapis.com">

<title>Eval Set Review - __SKILL_NAME_PLACEHOLDER__</title>   <link rel="preconnect" href="https://fonts.googleapis.com">   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Lora:wght@400;500&display=swap" rel="stylesheet">

#!/usr/bin/env python3

url = f"http://localhost:{port}"

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Eval Review</title>   <link rel="preconnect" href="https://fonts.googleapis.com">

<title>Eval Review</title>   <link rel="preconnect" href="https://fonts.googleapis.com">   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Lora:wght@400;500&display=swap" rel="stylesheet">

<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js" integrity="sha384-EnyY0/GSHQGSxSgMwaIPzSESbqoOLSexfnSMN2AP+39Ckmn92stwABZynq1JyzdT" crossorigin="anonymous"></script>

if (!hasPrevious) {         try {           const resp = await fetch("/api/feedback");

try {           const resp = await fetch("/api/feedback");           const data = await resp.json();

const resp = await fetch("/api/feedback");

fetch("/api/feedback", {

}       const payload = JSON.stringify({ reviews, status: "complete" }, null, 2);       fetch("/api/feedback", {

const payload = JSON.stringify({ reviews, status: "complete" }, null, 2);       fetch("/api/feedback", {         method: "POST",

fetch("/api/feedback", {

const evalName = evalRuns[0]?.eval_name ? evalRuns[0].eval_name : `Eval ${evalId}`;

Executable file

#!/usr/bin/env python3

#!/usr/bin/env python3

<meta charset="utf-8"> """ + refresh_tag + """    <title>""" + title_prefix + """Skill Description Optimization</title>     <link rel="preconnect" href="https://fonts.googleapis.com">

""" + refresh_tag + """    <title>""" + title_prefix + """Skill Description Optimization</title>     <link rel="preconnect" href="https://fonts.googleapis.com">     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Lora:wght@400;500&display=swap" rel="stylesheet">

#!/usr/bin/env python3

[Credential-related source omitted]

#!/usr/bin/env python3

#!/usr/bin/env python3

#!/usr/bin/env python3

#!/usr/bin/env python3

Executable file

1. **Failing test** at whatever seam reaches the bug - unit, integration, e2e. 2. **Curl / HTTP script** against a running dev server.

2. **Curl / HTTP script** against a running dev server.

#!/usr/bin/env bash

step "Open the app at http://localhost:3000 and sign in."

This skill was originally created for the [Gemini CLI](https://github.com/google-gemini/gemini-cli)

project and sourced from [github.com/google-gemini/gemini-cli](https://github.com/google-gemini/gemini-cli) (`.gemini/skills/docs-writer`).

[github.com/google-gemini/gemini-cli](https://github.com/google-gemini/gemini-cli)

author: Yam Borodetsky   original_author: github   origin: https://github.com/github/awesome-copilot

original_author: github   origin: https://github.com/github/awesome-copilot   internal: true

origin: https://github.com/github/awesome-copilot

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

1. Save as `<descriptive-name>.excalidraw` 2. Inform user how to open:    - Visit https://excalidraw.com

2. Inform user how to open:    - Visit https://excalidraw.com    - Click "Open" or drag-and-drop the file

- Visit https://excalidraw.com

To view: 1. Visit https://excalidraw.com

1. Visit https://excalidraw.com

1. Visit https://libraries.excalidraw.com/    2. Search for "[AWS Architecture Icons/etc.]" and download the .excalidrawlib file

**Step 2: Download Library** - Visit: https://libraries.excalidraw.com/

- Visit: https://libraries.excalidraw.com/ - Search for your desired icon set (e.g., "AWS Architecture Icons") - Click download to get the `.excalidrawlib` file

- This workflow works with any valid `.excalidrawlib` file you provide. - Examples of library categories you may find on https://libraries.excalidraw.com/:

- Examples of library categories you may find on https://libraries.excalidraw.com/:

type: "excalidraw";   version: number;           // Always 2   source: string;            // "https://excalidraw.com"

version: number;           // Always 2   source: string;            // "https://excalidraw.com"   elements: ExcalidrawElement[];

source: string;            // "https://excalidraw.com"

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

Executable file

2. **Download and place library file**:    - Visit: https://libraries.excalidraw.com/

- Visit: https://libraries.excalidraw.com/    - Search for "AWS Architecture Icons" and download the `.excalidrawlib` file    - Rename it to match the directory name: `aws-architecture-icons.excalidrawlib`

1. Download desired Excalidraw libraries from https://libraries.excalidraw.com/

- Examples found on https://libraries.excalidraw.com/ may include cloud/service icon sets.

#!/usr/bin/env python3

#!/usr/bin/env python3

#!/usr/bin/env python3

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

"type": "excalidraw",   "version": 2,   "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",

"version": 2,   "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",   "elements": [

"source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

"type": "excalidraw",   "version": 2,   "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",

"version": 2,   "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",   "elements": [

"source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

"type": "excalidraw",   "version": 2,   "source": "https://excalidraw.com",

"version": 2,   "source": "https://excalidraw.com",   "elements": [

"source": "https://excalidraw.com",

This template and methodology are based on Michael Nygard's 2011 article [Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions).

This template and methodology are based on Michael Nygard's 2011 article [Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions).

| `hallmark audit <target>`                    | Read the target, score it against the anti-pattern list, return a ranked punch list. **Do not edit.**                                                                                          

| `hallmark study <screenshot \| URL>`         | The user pasted or attached an image of a design they admire, **or** pasted a URL to a live page. Extract the **DNA** - macrostructure, archetypes, type-pairing, colour anchor - and produce a

If the user's input starts with `http://` or `https://` → **URL mode**. Otherwise → **image mode**. Same verb, same diagnosis output, different signal sources. The two modes share the schema and the diagnosis shape; they differ on what each

/* Hallmark · macrostructure: Marquee Hero · H1 hero knobs: size=xxl, alignment=left-bias  * theme: Studio · accent: forest-green ~3% · studied: yes · DNA-source: url  * source-url: https://example.com/  ·  observed-fonts: Inter Tight + Int

* theme: Studio · accent: forest-green ~3% · studied: yes · DNA-source: url  * source-url: https://example.com/  ·  observed-fonts: Inter Tight + Inter  * observed-accent: oklch(58% 0.16 35)  ·  rhythm: unknown (URL mode)

* source-url: https://example.com/  ·  observed-fonts: Inter Tight + Inter

| 1   | **Hallmark imagery kit** ([`imagery-kit.md`](imagery-kit.md))           | Brief allows non-photographic imagery: SaaS landings, manifestos, agency / studio splash, type-led portfolio, editorial-led marketing. **Always preferred** wh

| 2   | **Hand-built SVG composition** (Tier B from custom-craft.md)            | Editorial-typographic brief where "imagery" can be a stamp / wordmark / colour-blocked composition. Use when the kit doesn't carry the register.              

| 3   | **Picsum** - `https://picsum.photos/seed/<seed>/<w>/<h>`                | Generic photo slot, keyword anchoring not critical. Use a deterministic seed (brand-name + slot-name) so the same render produces the same image.             

| 4   | **Unsplash Source** - `https://source.unsplash.com/<w>x<h>/?<keywords>` | Keyword-anchored photo slot - food, travel, portrait, real product. Pass 1–2 specific keywords, never zero.                                                   

| Library                                         | URL                 | Count                                                                    | Best for                                                                                   

| ----------------------------------------------- | ------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------

| **[Lucide](https://lucide.dev)**                | `lucide.dev`        | 1,600+                                                                   | Modern SaaS / dev-tool default. The 2026 baseline. Active maintenance.                     

| **[Phosphor Icons](https://phosphoricons.com)** | `phosphoricons.com` | 9,000+ across 6 weights (thin / light / regular / bold / fill / duotone) | Tonal variants without mixing sets. The right pick when you need different *weights* of the

| **[Heroicons](https://heroicons.com)**          | `heroicons.com`     | ~300                                                                     | Tailwind / shadcn projects. Tightly curated, opinionated.                                  

| **[Tabler Icons](https://tabler-icons.io)**     | `tabler-icons.io`   | 5,900+ on a 24×24 grid                                                   | Breadth - when neither Lucide nor Heroicons covers the symbol you need.                    

| **[Iconoir](https://iconoir.com)**              | `iconoir.com`       | ~1,500                                                                   | Hand-drawn character with a generous free tier.                                            

// Tabler - vanilla HTML via CDN <svg width="20" height="20"><use href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/arrow-right.svg" /></svg>

<svg width="20" height="20"><use href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/arrow-right.svg" /></svg>

| Source                                      | URL               | Count                                         | Best for                                                                                                                    

| ------------------------------------------- | ----------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------

| **[Simple Icons](https://simpleicons.org)** | `simpleicons.org` | 3,400+                                        | The industry standard. Monochrome SVG + official hex per brand. MIT licensed. The default for logo walls.                   

| **[SVGL](https://svgl.app)**                | `svgl.app`        | 600+                                          | Curated, hand-picked, no spam. Higher quality bar than Simple Icons.                                                        

| **[theSVG](https://thesvg.org)**            | `thesvg.org`      | 4,000+ with dark/light/mono/wordmark variants | npm + MCP server for AI. Superset over Simple Icons if your stack supports it.                                              

| **[Brandfetch](https://brandfetch.com)**    | `brandfetch.com`  | 22M+ brands                                   | Paid API. Logo + colours + fonts + guardrails. Useful when building a CMS / form that asks "what's your domain?" and back-fi

<!-- Simple Icons via CDN - easiest --> <img src="https://cdn.simpleicons.org/github" alt="GitHub" height="32">

<img src="https://cdn.simpleicons.org/github" alt="GitHub" height="32">

<img src="https://cdn.simpleicons.org/figma/aaaaaa" alt="Figma" height="32"> <!-- monochrome override -->

<!-- SVGL via API --> <img src="https://api.svgl.app/?slug=vercel" alt="Vercel">

<img src="https://api.svgl.app/?slug=vercel" alt="Vercel">

| Model                                                                                               | URL                | Cost           | Best for                                                                                          

| --------------------------------------------------------------------------------------------------- | ------------------ | -------------- | --------------------------------------------------------------------------------------------------

| **[Nanobanana 2 / Gemini 2.5 Flash Image](https://ai.google.dev/gemini-api/docs/image-generation)** | Google AI          | $0.039 / image | Character consistency across panels, fast iteration, brand-style adherence via reference images, i

| **[Recraft V4](https://www.recraft.ai/)**                                                           | recraft.ai         | ~$0.04 / image | **The only model with production-grade SVG output.** Logos, icons, illustrations that need to scal

| **[Midjourney v8](https://www.midjourney.com)**                                                     | midjourney.com     | ~$0.14 / image | Aesthetic beauty, atmospheric stills, artistic direction                                          

| **[Flux 2](https://blackforestlabs.ai/)**                                                           | blackforestlabs.ai | ~$0.03 / image | Photorealism - skin, fabric, product detail, hands                                                

| Source                                      | URL                          | Licence                             | Best for                                                                                                                   

| ------------------------------------------- | ---------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------

| **[Storyset](https://storyset.com)**        | storyset.com (Freepik)       | Free with attribution; paid removes | Animated SVG illustrations with toggleable element animation and on-site colour customisation. Onboarding flows, feature ex

| **[Humaaans](https://www.humaaans.com)**    | humaaans.com (Pablo Stanley) | CC0                                 | Mix-and-match characters with diverse poses / outfits / skin tones. Hero sections that need humans without stock-photo terr

| **[unDraw](https://undraw.co)**             | undraw.co                    | MIT                                 | Open SVG illustrations with on-export colour swap. Still respected if customised - saturated and instantly recognisable if 

| **[IRA Design](https://www.iradesign.io)**  | iradesign.io (Creative Tim)  | Free / paid                         | Moody, sophisticated, isometric scenes for B2B / enterprise.                                                               

| **[Open Peeps](https://www.openpeeps.com)** | openpeeps.com                | CC0                                 | Hand-drawn character library, naive style. Sits between photography and illustration.                                      

| Source                                       | URL              | Best for                                                                         | | -------------------------------------------- | ---------------- | ---------------------

| -------------------------------------------- | ---------------- | -------------------------------------------------------------------------------- | | **[Browserframe](https://browserframe.com)** | browserframe.com | Browser + mobile devi

| **[Browserframe](https://browserframe.com)** | browserframe.com | Browser + mobile device frames with annotation. Built for SaaS demo screenshots. |

| **[Ray.so](https://ray.so)**                 | ray.so           | Code snippets in macOS window frames. Perfect for developer-tool landing pages.  |

| **[Cleanmock](https://cleanmock.com)**       | cleanmock.com    | Mobile device frames; minimalist; good for app-store-listing-style heroes.       |

| **[Mockup.style](https://mockup.style)**     | mockup.style     | Versatile device + browser builder, Figma-friendly export.                       |

| **[Device Shots](https://deviceshots.com)**  | deviceshots.com  | Free device generator with multiple frame styles, fast turnaround.               |

| Source                                              | URL                | Licence                                             | Best for                                                  | | -----------------------------------------------

| --------------------------------------------------- | ------------------ | --------------------------------------------------- | --------------------------------------------------------- | | **[Mixkit](https://mixkit.co)**                

| **[Mixkit](https://mixkit.co)**                     | mixkit.co (Envato) | No registration, no attribution required, 1080p+ HD | The quality-to-effort sweet spot.                         |

| **[Coverr](https://coverr.co)**                     | coverr.co          | Free commercial use                                 | Optimised for hero-section backgrounds and ambient loops. |

| **[Pexels Videos](https://www.pexels.com/videos/)** | pexels.com/videos  | CC0                                                 | Largest free library; 4K available. Volume play.          |

| **[Videvo](https://www.videvo.net)**                | videvo.net         | Tiered (free + pro)                                 | Community footage + motion graphics.                      |

- **[ffmpeg](https://ffmpeg.org)** for control:

- AV1: `ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -c:a aac output.mp4`   - H.264: `ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 23 -c:a aac output.mp4` - **[HandBrake](https://handbrake.fr)** for GUI / batch: start with the "Vimeo Y

- **[HandBrake](https://handbrake.fr)** for GUI / batch: start with the "Vimeo YouTube HQ 1080p" preset, drop bitrate to 3–4 Mbps for web.

| Source                                      | URL           | Licence     | Best for                                                                                  | | ------------------------------------------- | ------------- | ------

| ------------------------------------------- | ------------- | ----------- | ----------------------------------------------------------------------------------------- | | **[Unsplash](https://unsplash.com)**        | unsplash.com  | CC0   

| **[Unsplash](https://unsplash.com)**        | unsplash.com  | CC0         | Largest free collection, moody / cinematic, weekly community uploads. The starting point. |

| **[Pexels](https://www.pexels.com)**        | pexels.com    | CC0         | 3.5M+ free photos, diverse photographers.                                                 |

| **[Nappy.co](https://www.nappy.co)**        | nappy.co      | Free + paid | Curated for diversity and representation. Premium visual direction.                       |

| **[Shotstash](https://www.shotstash.com)**  | shotstash.com | Free        | Lifestyle / minimal aesthetic. Smaller but carefully curated.                             |

| **[Open Peeps](https://www.openpeeps.com)** | openpeeps.com | CC0         | Illustrated character library when you want diversity without the photo-stock look.       |

| -------------------------------------------------------------------------------------------- | -------------------- | -------------------------- | -------------------------------------------------------------------------------------------

| **CSS gradients (native)**                                                                   | n/a - write them     | Zero bytes, GPU-composited | The default. Linear or radial; 2–3 colour stops max.                                       

| **[Mesh Gradient Generator](https://www.learnui.design/tools/mesh-gradient-generator.html)** | learnui.design tools | Figma / SVG export         | Apple-style mesh gradients; export carries organic noise.                                  

| **[fffuel.co](https://www.fffuel.co/)**                                                      | fffuel.co            | SVG                        | `gggrain` for grain noise; `ffflux` for fluid gradients; `uuunion` for wavy meshes. Composa

| **[CSS Gradient](https://cssgradient.io)**                                                   | cssgradient.io       | CSS strings                | Quick gradient picker; copy-paste ready.                                                   

content: "";   position: absolute; inset: 0;   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filte

position: absolute; inset: 0;   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/>

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

| Source                                     | URL             | Best for                                                                                                                | | ------------------------------------------ | ------

| ------------------------------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------- | | **[LottieFiles](https://lottiefiles.com)** | lottie

| **[LottieFiles](https://lottiefiles.com)** | lottiefiles.com | The Lottie ecosystem. Free + pro tiers; npm + CDN; Figma plugin; AI creator.                                            |

| **[Rive](https://rive.app)**               | rive.app        | Interactive real-time animations with state machines. Native runtime; better for app UI micro-interactions than Lottie. |

1. **Design in Figma.** Use a component system (constraints, variants). Keep paths as paths - don't rasterise. Name layers; the export honours them. 2. **Export as SVG.** Figma's export is decent. Set "Outline strokes" only if you need stro

2. **Export as SVG.** Figma's export is decent. Set "Outline strokes" only if you need stroke-as-fill animation; otherwise keep them strokes. 3. **Run through [SVGOMG](https://jakearchibald.github.io/svgomg/)** - removes Figma metadata, unn

3. **Run through [SVGOMG](https://jakearchibald.github.io/svgomg/)** - removes Figma metadata, unnecessary `<defs>`, redundant transforms. 30–60 % size reduction is typical.

5. **Animate declaratively** - CSS keyframes on `<path d="">` (Chrome, Edge, Safari support the `d` property), `@property`-driven attribute interpolation, or [Motion](https://motion.dev) for orchestrated sequences.

If the browser supports it, the element animates as it enters the viewport. If not, the element is just there - no JavaScript, no library, no IntersectionObserver. The CSS Scroll-Driven Animations community is the canonical reference: [scro

| Library                                                           | When                                                                                                                                        | Bundle                      

| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------

| **[Motion](https://motion.dev)** (`motion/react`, `motion`)       | Orchestrated multi-element entrances in React (variants, `AnimatePresence`, viewport hooks). The default for React heroes in 2026.          | 4 KB base + 2 KB React = 6 K

| **[GSAP](https://gsap.com)** (free since the Webflow partnership) | Ambitious timelines, scrub-on-scroll, SVG path-morphing across mismatched anchors. Hero sequences with 20+ elements, multi-step narratives. | ~50 KB core; 100 KB+ with pl

**Stack.** - React Three Fiber (R3F) for React projects - ergonomic, ~30 KB on top of Three.js - Vanilla [Three.js](https://threejs.org) otherwise (~100–300 KB depending on features)

- React Three Fiber (R3F) for React projects - ergonomic, ~30 KB on top of Three.js - Vanilla [Three.js](https://threejs.org) otherwise (~100–300 KB depending on features) - Models: glTF 2.0 with Draco compression (20–50 % size reduction)

- Vanilla [Three.js](https://threejs.org) otherwise (~100–300 KB depending on features)

| Model                                                                                               | Cost           | Best for                                                                                                               

| --------------------------------------------------------------------------------------------------- | -------------- | -----------------------------------------------------------------------------------------------------------------------

| **[Nanobanana 2 / Gemini 2.5 Flash Image](https://ai.google.dev/gemini-api/docs/image-generation)** | $0.039 / image | Character consistency across multiple panels, fast iteration, brand-style adherence via reference images, infographics 

| **[Recraft V4](https://www.recraft.ai/)**                                                           | ~$0.04 / image | **The only mainstream model with production-grade SVG output.** Logos, icons, illustrations that need to live in code a

| **[Midjourney v8](https://www.midjourney.com)**                                                     | ~$0.14 / image | Aesthetic beauty, artistic direction, atmospheric stills                                                               

| **[Flux 2](https://blackforestlabs.ai/)**                                                           | ~$0.03 / image | Photorealism, skin / fabric / product detail                                                                           

{   "$schema": "https://design-tokens.github.io/community-group/format/",

"$schema": "https://design-tokens.github.io/community-group/format/",

Display headline left, a browser-frame mockup right, the mockup window slightly tilted (1–3°) for life. Frames are from [Browserframe](https://browserframe.com) or hand-built (a 1-px hairline + three macOS dots).

https://www.usehallmark.com/imagery/<category>/<file>

position: absolute;   inset: 0;   background: url("https://www.usehallmark.com/imagery/watercolor/watercolor-warm-01.webp") center / cover no-repeat;

inset: 0;   background: url("https://www.usehallmark.com/imagery/watercolor/watercolor-warm-01.webp") center / cover no-repeat;   opacity: 0.6;

background: url("https://www.usehallmark.com/imagery/watercolor/watercolor-warm-01.webp") center / cover no-repeat;

`study` accepts **either** an image (a screenshot the user attached) **or** a URL to a live page. Same verb, same diagnosis output, different signal sources. Detection is automatic: if the user's input starts with `http://` or `https://` → 

- Require `https://` unless the user explicitly confirms a public `http://` site and there is no authenticated or sensitive context involved.

- Refuse raw IP literals and local/internal hostnames, including `localhost`, `*.localhost`, `.local`, `.internal`, `.test`, and `.lan`. - Refuse private, loopback, link-local, multicast, unspecified, and metadata address ranges, including 

- Refuse private, loopback, link-local, multicast, unspecified, and metadata address ranges, including `127.0.0.0/8`, `::1`, `10.0.0.0/8`, `172.16.0.0/12`, `192.168.0.0/16`, `169.254.0.0/16`, `fe80::/10`, `fc00::/7`, `0.0.0.0/8`, and `169.2

- If redirects are visible to the tool, every redirect hop must pass the same checks. If redirect safety is unknown, continue only when the tool definitely fetched a final public `https://` page that passes every non-redirect check; record 

1. `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=…">` - names the Google Fonts loaded. Authoritative.

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

- **Google Fonts** - free, served via CDN, works everywhere. The default source. - **Fontshare** (Indian Type Foundry) - free for commercial use, foundry-grade. The "you didn't know these were free" tier. Drop-in via `<link href="https://ap

- **Fontshare** (Indian Type Foundry) - free for commercial use, foundry-grade. The "you didn't know these were free" tier. Drop-in via `<link href="https://api.fontshare.com/v2/css?f=...">`.

metadata:   original_author: Vercel Labs   origin: https://github.com/vercel-labs/next-skills

original_author: Vercel Labs   origin: https://github.com/vercel-labs/next-skills   internal: true

origin: https://github.com/vercel-labs/next-skills

// Bad: Redundant polyfills <script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from" />

<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from" />

Reference: [https://nextjs.org/docs/app/guides/package-bundling](https://nextjs.org/docs/app/guides/package-bundling)

Reference: [https://nextjs.org/docs/app/building-your-application/upgrading/from-webpack-to-turbopack](https://nextjs.org/docs/app/building-your-application/upgrading/from-webpack-to-turbopack)

// Or fetch from external API   const posts = await fetch('https://api.example.com/posts').then(r => r.json());

const posts = await fetch('https://api.example.com/posts').then(r => r.json());

useEffect(() => {     fetch('/api/data')

fetch('/api/data')

Reference: [https://nextjs.org/docs/app/guides/mcp](https://nextjs.org/docs/app/guides/mcp)

curl -X POST http://localhost:<port>/_next/mcp \

Returns: `{ "projectPath": "/path/to/project", "devServerUrl": "http://localhost:3000" }`

curl -X POST http://localhost:<port>/_next/mcp \

Reference: [https://react.dev/reference/rsc/use-client](https://react.dev/reference/rsc/use-client)

Reference: [https://react.dev/reference/rsc/use-server](https://react.dev/reference/rsc/use-server)

Reference: [https://nextjs.org/docs/app/api-reference/directives/use-cache](https://nextjs.org/docs/app/api-reference/directives/use-cache)

Reference: [https://nextjs.org/docs/app/getting-started/error-handling](https://nextjs.org/docs/app/getting-started/error-handling)

Reference: [https://nextjs.org/docs/app/api-reference/functions/redirect#behavior](https://nextjs.org/docs/app/api-reference/functions/redirect#behavior)

Reference: [https://nextjs.org/docs/app/getting-started/project-structure](https://nextjs.org/docs/app/getting-started/project-structure)

Reference: [https://nextjs.org/docs/app/api-reference/file-conventions](https://nextjs.org/docs/app/api-reference/file-conventions)

// Bad: Manual link tag (blocks rendering, no optimization) <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

// Bad: Missing display and preconnect <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

// Bad: Using @import in CSS (blocks rendering) /* globals.css */ @import url('https://fonts.googleapis.com/css2?family=Inter');

@import url('https://fonts.googleapis.com/css2?family=Inter');

Reference: [https://nextjs.org/docs/app/api-reference/functions](https://nextjs.org/docs/app/api-reference/functions)

| Hook                        | Purpose                                                        | Reference                                                                                | | --------------------------- | --------------------

| --------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | `useRouter`                 | Programmatic navigat

| `useRouter`                 | Programmatic navigation (`push`, `replace`, `back`, `refresh`) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-router)                   |

| `usePathname`               | Get current pathname                                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-pathname)                 |

| `useSearchParams`           | Read URL search parameters                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-search-params)            |

| `useParams`                 | Access dynamic route parameters                                | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-params)                   |

| `useSelectedLayoutSegment`  | Active child segment (one level)                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment)  |

| `useSelectedLayoutSegments` | All active segments below layout                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments) |

| `useLinkStatus`             | Check link prefetch status                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-link-status)              |

| `useReportWebVitals`        | Report Core Web Vitals metrics                                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals)        |

| Function     | Purpose                                      | Reference                                                              | | ------------ | -------------------------------------------- | ---------------------------------------

| ------------ | -------------------------------------------- | ---------------------------------------------------------------------- | | `cookies`    | Read/write cookies                           | [Docs](https://nextjs.org/docs/app/api-

| `cookies`    | Read/write cookies                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/cookies)    |

| `headers`    | Read request headers                         | [Docs](https://nextjs.org/docs/app/api-reference/functions/headers)    |

| `draftMode`  | Enable preview of unpublished CMS content    | [Docs](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |

| `after`      | Run code after response finishes streaming   | [Docs](https://nextjs.org/docs/app/api-reference/functions/after)      |

| `connection` | Wait for connection before dynamic rendering | [Docs](https://nextjs.org/docs/app/api-reference/functions/connection) |

| `userAgent`  | Parse User-Agent header                      | [Docs](https://nextjs.org/docs/app/api-reference/functions/userAgent)  |

| Function                | Purpose                                 | Reference                                                                           | | ----------------------- | --------------------------------------- | --------------

| ----------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | | `generateStaticParams`  | Pre-render dynamic routes at build time | [Docs](https:/

| `generateStaticParams`  | Pre-render dynamic routes at build time | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params)  |

| `generateMetadata`      | Dynamic metadata                        | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)       |

| `generateViewport`      | Dynamic viewport config                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-viewport)       |

| `generateSitemaps`      | Multiple sitemaps for large sites       | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps)       |

| `generateImageMetadata` | Multiple OG images per route            | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata) |

| Function        | Purpose                        | Reference                                                                  | | --------------- | ------------------------------ | ---------------------------------------------------------

| --------------- | ------------------------------ | -------------------------------------------------------------------------- | | `NextRequest`   | Extended Request with helpers  | [Docs](https://nextjs.org/docs/app/api-reference/function

| `NextRequest`   | Extended Request with helpers  | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-request)   |

| `NextResponse`  | Extended Response with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-response)  |

| `ImageResponse` | Generate OG images             | [Docs](https://nextjs.org/docs/app/api-reference/functions/image-response) |

return (     <Script       src="https://example.com/script.js"

<Script       src="https://example.com/script.js"       strategy="afterInteractive"

src="https://example.com/script.js"

// Remote images - must specify width/height <Image src="https://example.com/image.jpg" alt="Hero" width={800} height={400} />

<Image src="https://example.com/image.jpg" alt="Hero" width={800} height={400} />

// Remote images - provide blurDataURL <Image   src="https://example.com/image.jpg"

<Image   src="https://example.com/image.jpg"   alt="Hero"

src="https://example.com/image.jpg"

// Or use color placeholder <Image   src="https://example.com/image.jpg"

<Image   src="https://example.com/image.jpg"   alt="Hero"

src="https://example.com/image.jpg"

// Bad: Remote image without config <Image src="https://untrusted.com/image.jpg" alt="Image" width={400} height={300} />

<Image src="https://untrusted.com/image.jpg" alt="Image" width={400} height={300} />

// Option 3: Custom loader (Cloudinary, Imgix, etc.) const cloudinaryLoader = ({ src, width, quality }) => {   return `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}`

const cloudinaryLoader = ({ src, width, quality }) => {   return `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}` }

return `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}`

Reference: [https://nextjs.org/docs/app/getting-started/project-structure#metadata-file-conventions](https://nextjs.org/docs/app/getting-started/project-structure#metadata-file-conventions)

return products.map((product) => ({     url: `https://example.com/product/${product.id}`,

url: `https://example.com/product/${product.id}`,

// Bad: Native script tag <script src="https://example.com/script.js"></script>

<script src="https://example.com/script.js"></script>

<Script src="https://example.com/script.js" />

// Bad: Inline GA script <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" />

<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" />

[Credential-related source omitted]

restart: unless-stopped     healthcheck:       test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/api/health"]

healthcheck:       test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/api/health"]       interval: 30s

test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/api/health"]

export default function cloudinaryLoader({ src, width, quality }) {   const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`];   return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`;

const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`];   return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`; }

return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`;

// Available at build time only (baked into bundle) NEXT_PUBLIC_API_URL=https://api.example.com

NEXT_PUBLIC_API_URL=https://api.example.com

[OpenNext](https://open-next.js.org/) adapts Next.js for AWS Lambda, Cloudflare Workers, etc.

# Trigger ISR revalidation curl http://localhost:3001/api/revalidate?path=/posts

curl http://localhost:3001/api/revalidate?path=/posts

# Verify both instances see the update curl http://localhost:3001/posts

curl http://localhost:3001/posts

curl http://localhost:3002/posts

author: Yam C Borodetsky   original_author: Anthony Fu   origin: https://github.com/antfu/skills

original_author: Anthony Fu   origin: https://github.com/antfu/skills   version: "2026.1.28"

origin: https://github.com/antfu/skills

version: "2026.1.28"   source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills   internal: true

source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills

This skill was originally created by [Anthony Fu](https://github.com/antfu) and sourced from [antfu/skills](https://github.com/antfu/skills).

<!--  Source references: - https://nuxt.com/docs/guide/going-further/hooks

Source references: - https://nuxt.com/docs/guide/going-further/hooks - https://nuxt.com/docs/api/advanced/hooks

- https://nuxt.com/docs/guide/going-further/hooks

- https://nuxt.com/docs/api/advanced/hooks

<!--  Source references: - https://nuxt.com/docs/getting-started/layers

Source references: - https://nuxt.com/docs/getting-started/layers - https://nuxt.com/docs/guide/going-further/layers

- https://nuxt.com/docs/getting-started/layers

- https://nuxt.com/docs/guide/going-further/layers

},   defaults: {     baseURL: 'https://api.example.com',

defaults: {     baseURL: 'https://api.example.com',     timeout: 5000,

baseURL: 'https://api.example.com',

<!-- Source references: - https://nuxt.com/docs/api/kit/modules

Source references: - https://nuxt.com/docs/api/kit/modules - https://nuxt.com/docs/api/kit/components

- https://nuxt.com/docs/api/kit/modules

- https://nuxt.com/docs/api/kit/components

- https://nuxt.com/docs/api/kit/autoimports

- https://nuxt.com/docs/api/kit/plugins

- https://nuxt.com/docs/api/kit/templates

- https://nuxt.com/docs/api/kit/nitro

- https://nuxt.com/docs/api/kit/pages

- https://nuxt.com/docs/api/kit/resolving

<script setup lang="ts"> // This fetches TWICE: once on server, once on client const data = await $fetch('/api/posts')

// This fetches TWICE: once on server, once on client const data = await $fetch('/api/posts') </script>

const data = await $fetch('/api/posts')

async (_nuxtApp, { signal }) => {     const [user, posts, stats] = await Promise.all([       $fetch('/api/user', { signal }),

const [user, posts, stats] = await Promise.all([       $fetch('/api/user', { signal }),       $fetch('/api/posts', { signal }),

$fetch('/api/user', { signal }),

$fetch('/api/posts', { signal }),

$fetch('/api/stats', { signal }),

<!--  Source references: - https://nuxt.com/docs/getting-started/data-fetching

Source references: - https://nuxt.com/docs/getting-started/data-fetching - https://nuxt.com/docs/api/composables/use-fetch

- https://nuxt.com/docs/getting-started/data-fetching - https://nuxt.com/docs/api/composables/use-fetch - https://nuxt.com/docs/api/composables/use-async-data

- https://nuxt.com/docs/api/composables/use-fetch

- https://nuxt.com/docs/api/composables/use-async-data - https://nuxt.com/docs/api/composables/use-lazy-fetch -->

- https://nuxt.com/docs/api/composables/use-lazy-fetch

<!--  Source references: - https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables

Source references: - https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables - https://nuxt.com/docs/guide/best-practices/hydration

- https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables

- https://nuxt.com/docs/guide/best-practices/hydration

- https://nuxt.com/docs/getting-started/state-management#best-practices

# Start development server (default: http://localhost:3000)

<!--  Source references: - https://nuxt.com/docs/api/commands/dev

Source references: - https://nuxt.com/docs/api/commands/dev - https://nuxt.com/docs/api/commands/build

- https://nuxt.com/docs/api/commands/dev

- https://nuxt.com/docs/api/commands/build

- https://nuxt.com/docs/api/commands/generate

- https://nuxt.com/docs/api/commands/init

[Credential-related source omitted]

[Credential-related source omitted]

NUXT_PUBLIC_API_BASE=https://api.example.com

<!--  Source references: - https://nuxt.com/docs/getting-started/configuration

Source references: - https://nuxt.com/docs/getting-started/configuration - https://nuxt.com/docs/guide/going-further/runtime-config

- https://nuxt.com/docs/getting-started/configuration

- https://nuxt.com/docs/guide/going-further/runtime-config

- https://nuxt.com/docs/api/nuxt-config

- `$fetch` - Basic fetch utility (use for client-side events) - `useFetch` - SSR-safe wrapper around $fetch (use for component data)

- `useFetch` - SSR-safe wrapper around $fetch (use for component data)

const { data } = await useAsyncData('cart', async () => {   const [coupons, offers] = await Promise.all([     $fetch('/api/coupons'),

const [coupons, offers] = await Promise.all([     $fetch('/api/coupons'),     $fetch('/api/offers'),

$fetch('/api/coupons'),

$fetch('/api/offers'),

<script setup lang="ts"> async function submitForm() {   const result = await $fetch('/api/submit', {

async function submitForm() {   const result = await $fetch('/api/submit', {     method: 'POST',

const result = await $fetch('/api/submit', {

<script setup lang="ts"> const headers = useRequestHeaders(['cookie']) const data = await $fetch('/api/user', { headers })

const headers = useRequestHeaders(['cookie']) const data = await $fetch('/api/user', { headers }) </script>

const data = await $fetch('/api/user', { headers })

<!--  Source references: - https://nuxt.com/docs/getting-started/data-fetching

Source references: - https://nuxt.com/docs/getting-started/data-fetching - https://nuxt.com/docs/api/composables/use-fetch

- https://nuxt.com/docs/getting-started/data-fetching - https://nuxt.com/docs/api/composables/use-fetch - https://nuxt.com/docs/api/composables/use-async-data

- https://nuxt.com/docs/api/composables/use-fetch

- https://nuxt.com/docs/api/composables/use-async-data

Nuxt is platform-agnostic thanks to [Nitro](https://nitro.build), its server engine. You can deploy to almost any platform with minimal configuration—Node.js servers, static hosting, serverless functions, or edge networks.

> **Full list of supported platforms:** https://nitro.build/deploy

<!--  Source references: - https://nuxt.com/docs/getting-started/deployment

Source references: - https://nuxt.com/docs/getting-started/deployment - https://nitro.build/deploy

- https://nuxt.com/docs/getting-started/deployment

- https://nitro.build/deploy

<!--  Source references: - https://nuxt.com/docs/directory-structure

Source references: - https://nuxt.com/docs/directory-structure - https://nuxt.com/docs/directory-structure/app

- https://nuxt.com/docs/directory-structure

- https://nuxt.com/docs/directory-structure/app

- https://nuxt.com/docs/directory-structure/server

<!--  Source references: - https://nuxt.com/docs/guide/modules

Source references: - https://nuxt.com/docs/guide/modules - https://nuxt.com/docs/guide/modules/module-anatomy

- https://nuxt.com/docs/guide/modules

- https://nuxt.com/docs/guide/modules/module-anatomy

- https://nuxt.com/docs/api/kit

<!--  Source references: - https://nuxt.com/docs/getting-started/routing

Source references: - https://nuxt.com/docs/getting-started/routing - https://nuxt.com/docs/directory-structure/app/pages

- https://nuxt.com/docs/getting-started/routing

- https://nuxt.com/docs/directory-structure/app/pages

- https://nuxt.com/docs/directory-structure/app/middleware

<!--  Source references: - https://nuxt.com/docs/directory-structure/app/components

Source references: - https://nuxt.com/docs/directory-structure/app/components - https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components

- https://nuxt.com/docs/directory-structure/app/components

- https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components

<!-- External link (opens in new tab) -->   <NuxtLink to="https://nuxt.com" external>Nuxt</NuxtLink>

<NuxtLink to="https://nuxt.com" external>Nuxt</NuxtLink>

<!--  Source references: - https://nuxt.com/docs/api/components/nuxt-link

Source references: - https://nuxt.com/docs/api/components/nuxt-link - https://nuxt.com/docs/api/components/nuxt-page

- https://nuxt.com/docs/api/components/nuxt-link

- https://nuxt.com/docs/api/components/nuxt-page

- https://nuxt.com/docs/api/components/nuxt-layout

- https://nuxt.com/docs/api/components/client-only

async function login(credentials: Credentials) {     user.value = await $fetch('/api/auth/login', {

user.value = await $fetch('/api/auth/login', {

async function logout() {     await $fetch('/api/auth/logout', { method: 'POST' })

await $fetch('/api/auth/logout', { method: 'POST' })

[Credential-related source omitted]

<!--  Source references: - https://nuxt.com/docs/guide/concepts/auto-imports

Source references: - https://nuxt.com/docs/guide/concepts/auto-imports - https://nuxt.com/docs/directory-structure/app/composables

- https://nuxt.com/docs/guide/concepts/auto-imports

- https://nuxt.com/docs/directory-structure/app/composables

- https://nuxt.com/docs/directory-structure/app/utils

<!--  Source references: - https://nuxt.com/docs/getting-started/server

Source references: - https://nuxt.com/docs/getting-started/server - https://nuxt.com/docs/directory-structure/server

- https://nuxt.com/docs/getting-started/server

- https://nuxt.com/docs/directory-structure/server

- https://nitro.build/guide

await callOnce(async () => {   config.value = await $fetch('/api/config')

config.value = await $fetch('/api/config')

async function login(credentials: Credentials) {     user.value = await $fetch('/api/login', {

user.value = await $fetch('/api/login', {

<!--  Source references: - https://nuxt.com/docs/getting-started/state-management

Source references: - https://nuxt.com/docs/getting-started/state-management - https://nuxt.com/docs/api/composables/use-state

- https://nuxt.com/docs/getting-started/state-management

- https://nuxt.com/docs/api/composables/use-state

- https://nuxt.com/docs/api/utils/clear-nuxt-state

<!--  Source references: - https://nuxt.com/docs/guide/concepts/rendering

Source references: - https://nuxt.com/docs/guide/concepts/rendering - https://nuxt.com/docs/getting-started/prerendering

- https://nuxt.com/docs/guide/concepts/rendering

- https://nuxt.com/docs/getting-started/prerendering

- https://nuxt.com/docs/api/nuxt-config#routerules

author: Anthony Fu   version: "2026.1.28"   source: Generated from https://github.com/pnpm/pnpm, scripts located at https://github.com/antfu/skills

version: "2026.1.28"   source: Generated from https://github.com/pnpm/pnpm, scripts located at https://github.com/antfu/skills   internal: true

source: Generated from https://github.com/pnpm/pnpm, scripts located at https://github.com/antfu/skills

<!--    Source references:   - https://pnpm.io/continuous-integration

Source references:   - https://pnpm.io/continuous-integration   - https://github.com/pnpm/action-setup

- https://pnpm.io/continuous-integration

- https://github.com/pnpm/action-setup

rm -rf node_modules package-lock.json

rm -rf node_modules yarn.lock

rm -rf node_modules

rm -rf node_modules packages/*/node_modules package-lock.json

rm yarn.lock .yarnrc.yml

rm -rf .yarn

# Registry settings (same as npm) registry=https://registry.npmjs.org/

registry=https://registry.npmjs.org/

@myorg:registry=https://npm.myorg.com/

[Credential-related source omitted]

rm -rf node_modules pnpm-lock.yaml pnpm-workspace.yaml

<!--    Source references:   - https://pnpm.io/installation

Source references:   - https://pnpm.io/installation   - https://pnpm.io/cli/import

- https://pnpm.io/installation

- https://pnpm.io/cli/import

- https://pnpm.io/limitations

# .npmrc registry=https://registry.npmmirror.com/

registry=https://registry.npmmirror.com/

# .npmrc proxy=http://proxy.company.com:8080

proxy=http://proxy.company.com:8080

https-proxy=http://proxy.company.com:8080

rm -rf node_modules pnpm-lock.yaml

rm -rf node_modules

<!--    Source references:   - https://pnpm.io/performance

Source references:   - https://pnpm.io/performance   - https://pnpm.io/benchmarks

- https://pnpm.io/performance

- https://pnpm.io/benchmarks

- https://github.com/pnpm/pnpm/releases

pnpm rm <pkg>

<!--    Source references:   - https://pnpm.io/cli/install

Source references:   - https://pnpm.io/cli/install   - https://pnpm.io/cli/add

- https://pnpm.io/cli/install

- https://pnpm.io/cli/add

- https://pnpm.io/cli/run

- https://pnpm.io/filtering

# Registry settings registry=https://registry.npmjs.org/

registry=https://registry.npmjs.org/

@myorg:registry=https://npm.myorg.com/

# Set config via env npm_config_registry=https://registry.npmjs.org/

npm_config_registry=https://registry.npmjs.org/

<!--    Source references:   - https://pnpm.io/npmrc

Source references:   - https://pnpm.io/npmrc   - https://pnpm.io/configuring

- https://pnpm.io/npmrc

- https://pnpm.io/configuring

- https://pnpm.io/package_json

<!--    Source references:   - https://pnpm.io/store

Source references:   - https://pnpm.io/store   - https://pnpm.io/store-path

- https://pnpm.io/store

- https://pnpm.io/store-path

- https://pnpm.io/cli/store

pnpm --filter "./packages/**" exec rm -rf dist

<!--    Source references:   - https://pnpm.io/workspaces

Source references:   - https://pnpm.io/workspaces   - https://pnpm.io/pnpm-workspace_yaml

- https://pnpm.io/workspaces

- https://pnpm.io/pnpm-workspace_yaml

- https://pnpm.io/filtering

<!--    Source references:   - https://pnpm.io/aliases

Source references:   - https://pnpm.io/aliases   - https://pnpm.io/cli/add

- https://pnpm.io/aliases

- https://pnpm.io/cli/add

- https://pnpm.io/cli/install

<!--    Source references:   - https://pnpm.io/catalogs

Source references:   - https://pnpm.io/catalogs   - https://pnpm.io/pnpm-workspace_yaml

- https://pnpm.io/catalogs

- https://pnpm.io/pnpm-workspace_yaml

<!--    Source references:   - https://pnpm.io/hooks

Source references:   - https://pnpm.io/hooks   - https://pnpm.io/onlyBuiltDependencies

- https://pnpm.io/hooks

- https://pnpm.io/onlyBuiltDependencies

<!--    Source references:   - https://pnpm.io/overrides

Source references:   - https://pnpm.io/overrides   - https://pnpm.io/package_json

- https://pnpm.io/overrides