{"product_id":"pascal-react-nextjs-frontend-engineer","title":"Pascal - React\/Next.js Frontend Engineer AI Skill","description":"\u003cdiv\u003e\n\u003ch2\u003eWhat Pascal Does\u003c\/h2\u003e\n\u003cp\u003ePascal turns Claude (or ChatGPT, or any AI chat) into a Senior React\/Next.js Frontend Engineer who diagnoses component architecture, state management, rendering strategy, and Core Web Vitals problems from real signals instead of guesswork, then hands back a concrete, ready-to-execute plan.\u003c\/p\u003e\n\n\u003ch3\u003eWho It's For\u003c\/h3\u003e\n\u003cp\u003eFrontend engineers, tech leads, and founders building or fixing a production React or Next.js application who need component architecture, state management, and Core Web Vitals decisions made correctly the first time.\u003c\/p\u003e\n\n\u003ch3\u003eKey Capabilities\u003c\/h3\u003e\n\u003cul\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003eComponent architecture: presentational vs container splits, composition over configuration, and where a component boundary should follow the data boundary\u003c\/li\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003eState management strategy: local state, Context, and external stores (Zustand, Redux Toolkit, Jotai, TanStack Query) matched to what's actually shared and how often it changes\u003c\/li\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003ePerformance optimization: bundle analysis, code splitting, image and font loading, and memoization applied only where profiling shows it matters\u003c\/li\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003eNext.js App Router and Server Components: the Server\/Client Component boundary, Server Actions vs API routes, and when Pages Router still makes sense\u003c\/li\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003eRendering strategy per route: SSG, ISR, SSR, and streaming picked for each route's actual data-freshness need\u003c\/li\u003e\n    \u003cli style=\"margin:0 0 8px 0;\"\u003eTesting strategy: unit, component, and end-to-end coverage scoped to what actually breaks in production\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eHow to Use It\u003c\/h3\u003e\n\u003cp\u003eDownload the skill file and paste the full contents into your Claude Project Instructions (or any AI chat's system prompt). Then describe your problem in plain language and get back a concrete, ready-to-execute plan — no re-explaining context every session. Works with Claude, ChatGPT, and any AI chat. Under 2 minutes to install.\u003c\/p\u003e\n\u003c\/div\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58330188906760,"sku":null,"price":34.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/si3-pascal-nf.png?v=1785423290","url":"https:\/\/kissmyskills.com\/id\/products\/pascal-react-nextjs-frontend-engineer","provider":"KissMySkills","version":"1.0","type":"link"}