JavaScript Ecosystem

LLMs default to the framework versions and patterns their training data over-represents, which skew years behind the current stable releases. This skill is a changelog index that pulls default output forward to the latest stable major and its paradigm.

"Every AI coding tool in 2026 produces the same React app. The brand on the box is different. The code inside is not."

from The LLM Default React Stack

Rule

Write for the version the project actually has, targeting the current paradigm, not the version your training data over-represents. Version numbers move fast; the paradigm shifts move slowly. When unsure, trust the paradigm direction and verify the exact version against the source.

Snapshot and freshness

This skill is a dated snapshot of a fast-moving ecosystem, and a snapshot is technical debt: it ages. Treat it as a cache of the official docs, not an oracle.

• Snapshot date: 2026-06-05 (the date in the frontmatter). Each notes file also carries its own Verified date.
• Staleness rule. If today is more than roughly 6 months past the snapshot date, or past a notes file's Verified date, treat that file's version numbers and "current stable" claims as suspect. The paradigm sections (The shift and the Start column) age far slower than version numbers, so trust those longer and verify the numbers.
• Verify the one tool you are about to use. When a version-specific claim matters for the task, confirm it against that tool's official release notes or migration guide first. If you have web access and find an entry stale, apply the current paradigm and, if you maintain this repo, refresh the notes file.

Is the installed skill itself outdated?

Skills are distributed via skills.sh and copied into your project, so an installed copy is a pinned snapshot that does not update itself.

1. Detect. Compare the snapshot date above to today. A gap of many months means the copy is likely behind newer releases, and several notes files probably are too.
2. Update. Re-install the latest from the source, which overwrites the local copy:

   sh
   npx skills@latest add saschb2b/skills --skill javascript-ecosystem

3. Confirm. Check that the snapshot date moved forward (skills-lock.json records the new content hash). Maintainers: see MAINTENANCE.md.

How to use this skill

1. Check the installed version first. Read package.json and the lockfile. The installed major decides which paradigm applies. Never assume it from memory.
2. Find the tool in the index below and open its notes file for the Stop/Start table.
3. Write and review against the Start column. Rewrite the Stop-column patterns; those are the stale defaults an agent reaches for unprompted.
4. Greenfield. Scaffold on the latest stable major and its paradigm, not the version your training data over-represents.
5. This snapshot is dated. Each notes file carries a verified date and a current-stable version. If the installed version is newer, or the file looks stale, confirm against the official release notes linked in the file before trusting it. The paradigm sections age far slower than the version numbers.

Index

Each notes file holds the current stable version, the LLM default bias, the paradigm shift, and a Stop/Start table.

Frameworks

Meta-frameworks

UI and styling

Data and state

Picking one: a server-cache library (TanStack Query) for fetched data, a client-state library (Zustand or Jotai) for local global state, and Redux Toolkit for genuinely complex shared client state. Keep server data out of the client-state libraries.

Tooling and language

Testing

New Vite + React + TS default: Vitest (unit and component) plus Testing Library plus Playwright (e2e). Jest and Cypress are the secondary choices, not the defaults.

Mobile

Backend

Forms and validation

New-project default: React Hook Form + Zod 4 via @hookform/resolvers, or TanStack Form + Zod 4 (direct via Standard Schema) for the type-safety-first, multi-framework path. Formik is unmaintained.

Auth

Self-hosted new-project default is Better Auth (the Auth.js team steers new work there); Clerk for managed. Lucia is sunset; do not recommend it.

Internationalization

Two architectures: runtime dictionaries (i18next, next-intl) with types layered on, versus compiled message functions (Paraglide) that tree-shake.

Dates and time

Prefer native Temporal where supported (or via polyfill); date-fns or Day.js as the lightweight interim. Moment.js is legacy; do not start new projects on it.

API codegen

Modern codegens stopped emitting framework-specific named hooks (useGetPetQuery). They emit framework-agnostic options factories (REST) and typed documents (GraphQL) that you spread or pass into the data library's own hook (useQuery({ ...getPetOptions(...) }), useQuery(MyDocument)). For full setup, use the dedicated codegen-api skill.

GraphQL clients

Apollo or urql for stateful UIs (Apollo recommends its own typed documents over the codegen client preset); graphql-request for scripts and SSR. Relay remains the compiler-driven option for large apps.

Email

Modern transactional stack: React Email for templates, an API provider (Resend) to send, Nodemailer when you need raw SMTP.

Payments

Stripe (a PSP) when you own tax registration and want maximum control; a merchant-of-record (Polar, Paddle, Stripe Managed Payments) to make worldwide tax someone else's problem.

Observability

Three complementary layers: errors and replay via Sentry, vendor-neutral traces and metrics via OpenTelemetry, product analytics via PostHog.

Headless CMS

Payload for code-first TS inside Next.js; Sanity for structured content with GROQ and typed queries; Strapi for a self-hosted Node backend.

AI SDKs

Vercel AI SDK for provider-agnostic app code (chat UIs, streaming, agents); the official provider SDKs for direct access. The dedicated claude-api skill covers building Anthropic apps in depth.

When a tool is not in the index

The catalogue is not exhaustive, and it dates. For any tool not listed, or when a notes file looks stale, apply the same method by hand:

1. Read the installed version from package.json and the lockfile.
2. Open the tool's official release notes, changelog, or migration guide for that major.
3. Identify the paradigm the current major moved to, and the pattern it replaced.
4. Write the Start pattern. Flag the Stop pattern if the code or your default reaches for it.
5. If the tool deserves a permanent entry, add one with _template.md.

Companion skills (optional, never required)

This skill is self-contained, including the deep teachable material. The version and paradigm correction live in each notes file; the longer artifacts are inlined as deep-dive files inside this skill, so installing javascript-ecosystem alone gives 100% of the teaching with no other skill present:

• api-codegen/setup.md. Codegen configs, the fragment-masking example, the gql.tada path, DX pitfalls.
• frameworks/react-rules.md. The strict React Compiler lint config and the five silent-bail patterns.
• ui/theme-colors.md. The color-role vocabulary, alpha(), and the audit workflow.

There are no cross-skill file links anywhere, only by-name pointers. The sibling skills below are optional standalone alternatives on those same topics (distilled from the same blog posts). You do not need any of them; they are the maintained source if an inlined copy drifts, and claude-api goes further than this skill's paradigm scope.

• react-compiler. Standalone deep-dive on the React Compiler.
• codegen-api. Standalone deep-dive on typesafe API codegen.
• theme-colors. Standalone deep-dive on role-based color.
• claude-api. Building Anthropic/Claude API apps end to end (beyond version-and-paradigm currency).

Prefer first-party agent guidance

When a tool ships its own official agent guidance, it is the most authoritative and current source. Load it and prefer it; treat this skill as the cross-ecosystem index that routes you there, not a replacement. Known first-party resources (verified 2026-06-05):

• Official agent skills (npx skills add <repo>): Angular (angular/skills), Next.js (vercel-labs/next-skills), Prisma (prisma/skills), Vercel AI SDK (vercel/ai), Expo (expo/skills), Better Auth (better-auth/skills), Clerk (clerk/skills).
• Official MCP servers: Svelte and SvelteKit, Nuxt, Astro (its Docs MCP replaced llms.txt), shadcn/ui, Prisma, Clerk, Better Auth.
• llms.txt / llms-full.txt (fetch <docs-site>/llms.txt for the official docs as agent context): React, Vue, SolidJS, Vite, Bun, Zod, Drizzle, TanStack, React Native, and most of the above. Tailwind and TypeScript do not publish one.

Each per-tool notes file links its first-party resource under an "Agent skills" heading where one exists.

Extending this skill

Add a tool by copying _template.md into the right category folder and adding one row to the matching table above. Keep volatile version numbers inside the notes file, never in this index, so there is a single place to re-verify. Re-verify a notes file whenever you work on its tool and the snapshot date looks old.

Source

Based on The LLM Default React Stack.