20 React Composition Patterns alternatives
React Composition Patterns: Vercel's official skill for React component architecture — replace boolean prop proliferation with compound components, lifted state and explicit variants. Includes React 19 APIs. 20 agent skills do similar work, most sharing Frontend, Official and React, ranked by how much they have in common with React Composition Patterns.
Back to React Composition Patterns
-
by Vercel
Vercel's official guide to React's <ViewTransition> API — shared elements, list identity, Suspense reveals and directional route animations without an animation library.
-
by Google Labs (Stitch)
Google's official Stitch skill that reverses the usual direction — turns an existing React, Vue, Angular or Vite front end back into an editable Stitch design.
Also: Design System, Frontend, React
-
by Figma
Figma's official design-to-code skill — a mandatory pre-step to get_design_context that turns a Figma node into components matching your real stack, not generic markup.
Also: Design System, Frontend, React
-
by Vercel
Vercel's official skill for auditing UI code against the Web Interface Guidelines — accessibility, performance and UX rules reported as terse file:line findings.
-
by Vercel
Vercel Engineering's React and Next.js performance playbook as an agent skill — 70 rules across 8 categories, ordered by impact, for writing and refactoring fast components.
-
by Google Labs (Stitch)
Google's official Stitch skill for generating and editing UI screens from text or images — with a mandatory prompt-enhancement pipeline before every call.
Also: Design System, Frontend
-
by Ferousco-dev
Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.
Also: Design System, Frontend
-
by Google Labs (Stitch)
Google's official Stitch skill for distilling a project into a DESIGN.md — a semantic design system agents can read before they generate anything.
Also: Design System, Frontend
-
by Google Labs (Stitch)
Google's official Stitch build skill for shadcn/ui — component discovery, installation, customisation and the conventions that keep a generated UI idiomatic.
-
by Datadog
Official Datadog skill that adds or repairs Browser RUM in a web app — detects framework, router, bundler and existing setup, then wires init once and verifies the build still passes.
-
by Vercel
Audit UI code against Vercel's Web Interface Guidelines — accessibility, interaction, performance and layout rules — reported as terse file:line findings.
-
by Vercel
Vercel's official skill for reviewing documentation and prose against its writing handbook — voice, structure, code samples and typography, reported as file:line findings.
-
by Vercel
Vercel's official deployment skill — inspects project state, picks the right deploy path, and defaults to preview deployments with a claimable URL when no account is linked.
-
by Svelte
The Svelte team's own guidance on writing modern Svelte 5 — when to reach for each rune, why effects are an escape hatch, and the reactivity traps models fall into.
Also: Frontend, TypeScript
-
by Sanity
Sanity's official agent skill — schema design, GROQ, TypeGen, Visual Editing, Portable Text, Studio structure, localization, Functions and Blueprints, plus integration guides for eight frontend frameworks.
Also: Frontend, TypeScript
-
by Angular (Google)
Angular's official skill for generating idiomatic modern Angular — signals, resource and httpResource, forms, DI, routing, SSR, ARIA and CLI scaffolding.
Also: Frontend, TypeScript
-
by Anthropic
A suite for building elaborate, multi-component HTML artifacts with modern frontend tooling — React, Tailwind CSS, and shadcn/ui.
Also: Frontend, TypeScript
-
by WordPress
Official WordPress skill for Gutenberg block work: block.json, attributes and serialization, dynamic rendering, and the deprecation path that keeps existing content valid.
-
by Inngest
Build crash-safe AI agents on AgentKit and step.ai — durable tool calls, human-in-the-loop approval, realtime progress, and when not to reach for an agent loop at all.
Also: Official, TypeScript
-
by Inngest
Inngest's durable-execution playbook as an agent skill — steps and memoisation, event and cron triggers, idempotency, cancellation, retries and non-retriable errors.
Also: Official, TypeScript
