Next.js + React

Pack

App Next.js : boucle de dev, Turbopack, React/Vercel, a11y, TypeScript, shadcn — prêt pour démarrer un produit web.

Cette collection Arboris assemble skills et commandes autour d’un même thème. Installe le pack via la CLI ou un ZIP, puis ouvre ton agent pour enchaîner les tâches couvertes. Les éléments listés ci-dessous restent accessibles individuellement dans le catalogue si tu préfères une install à la carte. Objectif : gagner du temps et garder une base commune de prompts de qualité. Chaque skill et chaque commande peut aussi être copié seul, scanné côté sécu, et mis à jour quand le catalogue évolue. Idéal pour standardiser un workflow d’équipe sans imposer un monorepo de prompts.

14 éléments

Commandes · next-react-starter

/commitCommit Conventional Commits + changelog/semver (message clair, scope, type)./ready-prPrépare une PR — branche, checks, changelog, commit, description MR (sans push)./review-prLance une revue de pull request structurée (risques, tests, clarté)./explain-codeExplique un fichier ou une sélection de code de façon claire et progressive./ncuMet à jour les packages npm du projet avec npm-check-updates (ncu)./lighthouseAudit perf Lighthouse / Core Web Vitals sur une page après changement lourd.

Skills · next-react-starter

coding-standardsBaseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.frontend-a11yAccessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.next-dev-loopVerify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.nextjs-turbopackNext.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.react-patternsReact 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.shadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".typescript-advanced-typesMaster TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.vercel-react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.