React Forge

9 skills inclus

• 01

  React Performance Rules

  Fait appliquer par l'agent 70 règles de performance React et Next.js classées par impact : cascades réseau, bundle, rendu serveur, re-rendus.+

  sf-react-perf/SKILL.md, de vercel-labs/agent-skills, licence MIT.

  1---

  2name: sf-react-perf

  3description: Applies a prioritized catalog of 70 React and Next.js performance rules (waterfalls, bundle size…

  4---

  5

  6# React and Next.js Performance Rules

  7

  8Catalog of 70 rules, ordered by impact, each in its own file under `rules/` with a wrong and a right example.…

  9

  10## When to use

  11

  12- Writing new React components, Next.js pages, route handlers or Server Actions.

  13- Reviewing or refactoring React/Next.js code, or diagnosing a slow page, slow build or janky interaction.

  14- Adding data fetching (server or client) or a third-party script.

  15

  16Do not use it for visual design, accessibility audits or animation craft (other skills cover those). Do not a…
• 02

  React Composition Patterns

  Fait concevoir par l'agent des API de composants React par composition : composants composés, état remonté en provider, plus de props booléennes.+

  sf-react-composition/SKILL.md, de vercel-labs/agent-skills, licence MIT.

  1---

  2name: sf-react-composition

  3description: Guides React component API design with composition instead of configuration, covering compound c…

  4---

  5

  6# React Composition Patterns

  7

  8Design component APIs that stay simple as features grow. Replace boolean props and render-prop sprawl with sm…

  9

  10## When to use

  11

  12- A component takes several boolean or mode props (`isThread`, `isEditing`, `showAttachments`) and branches o…

  13- Building reusable primitives (composer, dialog, table, tabs) for several screens.

  14- Components outside the visual tree need the same state (a preview or a submit button outside the form box).

  15- Reviewing component architecture or a pull request that adds "one more prop".

  16
• 03

  React View Transitions

  Fait animer par l'agent pages et changements d'état avec l'API View Transition de React : composant ViewTransition, types de transition, CSS.+

  sf-react-view-transitions/SKILL.md, de vercel-labs/agent-skills, licence MIT.

  1---

  2name: sf-react-view-transitions

  3description: "Implements native page and state animations with React's View Transition API (the ViewTransitio…

  4---

  5

  6# React View Transitions

  7

  8Animate between UI states with the browser's `document.startViewTransition`, driven by React. Declare *what*…

  9

  10## When to use

  11

  12- Route changes, list-to-detail navigation, shared images or cards that morph between views.

  13- Skeleton-to-content reveals, enter/exit of panels, list reorder after filter or sort.

  14- Sliding tab indicators and other "same thing, new place" movements.

  15

  16Do not use it for gesture-driven or physics animation, continuous scroll-linked effects, or micro-interaction…
• 04

  Next.js App Router Patterns

  Fait structurer par l'agent une app Next.js App Router : composants serveur et client, conventions de fichiers, streaming, Server Actions, cache.+

  sf-nextjs-app-router/SKILL.md, de wshobson/agents, licence MIT.

  1---

  2name: sf-nextjs-app-router

  3description: Builds and structures Next.js App Router applications with Server and Client Components, file co…

  4---

  5

  6# Next.js App Router Patterns

  7

  8Structure App Router features so that data loads on the server, interactivity stays small and client-side, sl…

  9

  10## When to use

  11

  12- Building a new route, layout or feature in an `app/` directory.

  13- Migrating pages from `pages/` to `app/`.

  14- Choosing where a component runs, where data is fetched, and how it is cached.

  15- Implementing modals as routes, dashboards with independent slots, forms with Server Actions, or JSON endpoi…

  16
• 05

  Next.js Dev Loop

  Fait vérifier par l'agent qu'un changement Next.js marche vraiment à l'exécution via l'endpoint MCP du serveur de dev et un navigateur.+

  sf-nextjs-dev-loop/SKILL.md, de vercel/next.js, licence MIT.

  1---

  2name: sf-nextjs-dev-loop

  3description: Verifies that a Next.js change works at runtime, not just that it compiles, by cross-checking th…

  4---

  5

  6# Next.js Dev Loop

  7

  8The edit and verify rhythm during `next dev`: make a change, then prove it works in the running app. Two view…

  9

  10- **`/_next/mcp`**: an HTTP endpoint Next.js exposes about itself. It knows routes, segments, RSC, server act…

  11- **`agent-browser`**: a CLI that drives a real Chrome. It knows the DOM, console, network, React fiber tree…

  12

  13## When to use

  14

  15- After any edit to routes, components, server actions or data fetching in a project where `next dev` is runn…

  16- When the user asks to confirm that something works, or reports a runtime bug to reproduce.
• 06

  Next.js Cache Components Adoption

  Fait activer par l'agent les Cache Components dans une app Next.js et mener le build au vert, route par route, avec ou sans codemod.+

  sf-nextjs-cache-adoption/SKILL.md, de vercel/next.js, licence MIT.

  1---

  2name: sf-nextjs-cache-adoption

  3description: Turns on Cache Components in a Next.js App Router app and walks it to a passing build, route by…

  4---

  5

  6# Cache Components Adoption

  7

  8Enable Cache Components and get every route to a passing build without changing what users see or what the co…

  9

  10## When to use

  11

  12- The user wants `cacheComponents: true`, `"use cache"`, Partial Prerendering behavior, or instant navigation…

  13- A build fails with blocking-prerender or instant-validation errors after the flag was turned on.

  14

  15Do not use it for Pages Router-only apps (Pages to App migration is a separate project), or to grow static sh…

  16
• 07

  Next.js Cache Components Tuning

  Fait agrandir par l'agent la coquille statique d'une route Next.js pour un affichage instantané, en boucle pilotée par un test.+

  sf-nextjs-cache-tuning/SKILL.md, de vercel/next.js, licence MIT.

  1---

  2name: sf-nextjs-cache-tuning

  3description: Makes a Next.js route's meaningful UI appear instantly on initial load or client navigation by g…

  4---

  5

  6# Cache Components Shell Tuning

  7

  8Drive one route from "not instant" to "instant" and keep it there. The loop is test-driven: write a failing `…

  9

  10Before changing the route, read the **Optimizing the static shell** guide bundled at `node_modules/next/dist/…

  11

  12## When to use

  13

  14- A page paints late on first load, or a client navigation waits on data before anything changes.

  15- The user wants regression coverage that a route stays instant.

  16
• 08

  TypeScript Advanced Types

  Fait écrire par l'agent des types TypeScript précis : génériques, types conditionnels, mappés, littéraux de gabarit, unions discriminées.+

  sf-typescript-types/SKILL.md, de wshobson/agents, licence MIT.

  1---

  2name: sf-typescript-types

  3description: Designs precise TypeScript types with generics and constraints, conditional types and infer, map…

  4---

  5

  6# TypeScript Advanced Types

  7

  8Make invalid states unrepresentable and let inference carry the types, without building types so clever that…

  9

  10## When to use

  11

  12- Typing reusable code: libraries, generic components, API clients, event emitters, form and config helpers.

  13- Replacing `any`, unsafe casts or wide `string` types with precise ones.

  14- Modeling state with discriminated unions, or deriving types from existing ones instead of duplicating them.

  15- Explaining or fixing a hard type error.

  16
• 09

  shadcn/ui

  Fait gérer par l'agent les composants shadcn/ui : init avec preset, registres, ajout et mise à jour par le CLI, composition et thème par tokens.+

  sf-shadcn-ui/SKILL.md, de shadcn-ui/ui, licence MIT.

  1---

  2name: sf-shadcn-ui

  3description: "Manages shadcn/ui components and projects: initializing with presets, searching registries, add…

  4user-invocable: false

  5allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)

  6---

  7

  8# shadcn/ui

  9

  10A framework for building ui, components and design systems. Components are added as source code to the user's…

  11

  12> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shad…

  13

  14## Project context first

  15

  16Start every task by running `npx shadcn@latest info --json` in the project directory (with the project's runn…

Extraits. Les dossiers complets sont livrés après le paiement.

Installation