npx claudepluginhub levifig/loaf --plugin loafWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
Covers TypeScript 5+, React 18+, Next.js 14+ App Router, Zustand, Tailwind CSS, and Vitest testing.
This skill is limited to using the following tools:
references/a11y.mdreferences/api.mdreferences/core.mdreferences/debugging.mdreferences/esm.mdreferences/forms.mdreferences/mobile.mdreferences/nextjs.mdreferences/performance.mdreferences/react.mdreferences/state.mdreferences/styling.mdreferences/testing.mdreferences/types.mdTypeScript Development
Modern TypeScript development with React ecosystem.
Stack Overview
| Layer | Default | Alternatives |
|---|---|---|
| Language | TypeScript 5+ | JavaScript (ESM) |
| Runtime | Node.js 22+ | Bun, Deno |
| Framework | Next.js 14+ | Vite, Remix |
| UI Library | React 18+ | - |
| State (Client) | Zustand | Context + Reducer |
| State (Server) | React Query | SWR |
| Forms | React Hook Form + Zod | - |
| Styling | Tailwind CSS + CVA | CSS Modules |
| Testing | Vitest + RTL | Jest |
| E2E Testing | Playwright | Cypress |
| Package Manager | pnpm | npm, yarn |
Topics
| Topic | Use For |
|---|---|
| Core | Project setup, tsconfig, modern TS features, type utilities |
| React | Components, hooks, Context API, performance patterns |
| Next.js | App Router, Server/Client Components, Server Actions, routing |
| Types | Advanced types, generics, conditional types, type guards |
| State | Zustand, React Query, Context + Reducer, URL state |
| Forms | React Hook Form, Zod validation, Server Actions integration |
| API | Fetch wrappers, React Query, tRPC, GraphQL, WebSockets |
| Testing | Vitest, React Testing Library, MSW, Playwright E2E |
| Styling | Tailwind CSS, CVA variants, dark mode, responsive design |
| Performance | Bundle analysis, code splitting, memoization, Web Vitals |
| Accessibility | WCAG compliance, ARIA, keyboard navigation, screen readers |
| Mobile | React Native, Expo, navigation, platform-specific code |
| ESM | ESM patterns, JSDoc types, JS vs TS decision guide |
| Debugging | Console methods, DevTools, source maps, async debugging |
Critical Rules
Always
- Use strict mode in tsconfig
- Type all function parameters and returns
- Handle null/undefined explicitly
- Use Server Components by default
- Validate on both client and server
- Test with screen readers
- Measure before optimizing
Never
- Use
any(useunknownwith type guards) - Use
!(non-null assertion) without justification - Store server data in client state (use React Query)
- Rely on color alone for information
- Create new functions in render
- Skip error handling for API calls
Similar Skills
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.