grahamcrackers
- 30 skills
- 0 followers
- 6 hours ago last updated
- ▌ Msw · grahamcrackersMock Service Worker (MSW) patterns for API mocking in development and testing. Covers request handlers, response mocking, network error simulation, handler composition, and integration with Vitest and Storybook. Use when mocking APIs, simulating network responses, testing error states, or when the user asks about MSW, API mocking, or mock servers.
- ▌ Vite · grahamcrackersVite configuration patterns for React and TypeScript projects including plugins, environment variables, proxy setup, build optimization, library mode, and SSR. Use when configuring Vite, setting up dev servers, optimizing builds, creating Vite plugins, or when the user asks about Vite configuration, HMR, or build tooling.
- ▌ Tsdown · grahamcrackerstsdown patterns for bundling TypeScript and JavaScript libraries powered by Rolldown. Covers configuration, output formats, type declarations, dependency handling, plugins, monorepo builds, and migration from tsup. Use when building libraries, generating type declarations, bundling for multiple formats, configuring tsdown, or migrating from tsup.
- ▌ Zustand · grahamcrackersZustand state management patterns for React including store design, selectors, slices, middleware (immer, persist, devtools), and async actions. Use when managing client-side state, creating stores, working with Zustand, or when the user asks about global state management, store patterns, or state persistence.
- ▌ Eslint 9 · grahamcrackersESLint 9 flat config patterns for JavaScript and TypeScript projects. Covers migration from .eslintrc, defineConfig, TypeScript config files, plugin setup, and common rule configurations. Use when setting up ESLint, migrating to flat config, configuring linting rules, or when the user asks about ESLint configuration or code quality tooling.
- ▌ Storybook · grahamcrackersStorybook 8 patterns for component-driven development including writing stories, args and controls, interaction testing, documentation, and addon configuration. Use when building component libraries, writing stories, testing interactions, documenting components, or when the user asks about Storybook, component isolation, or visual testing.
- ▌ Changesets · grahamcrackersChangesets best practices for versioning, changelogs, and publishing npm packages in single-package and monorepo projects. Covers the changeset workflow, semver conventions, CI automation with GitHub Actions, and monorepo dependency management. Use when managing package releases, writing changesets, publishing to npm, configuring changelogs, or when the user asks about changesets, versioning, or release workflows.
- ▌ Modern CSS · grahamcrackersModern CSS features and patterns including cascade layers, container queries, :has(), @scope, view transitions, anchor positioning, nesting, and scroll-driven animations. Use when writing modern CSS, choosing between CSS approaches, or when the user asks about new CSS features, cascade layers, container queries, or CSS architecture.
- ▌ Playwright · grahamcrackersPlaywright patterns for end-to-end testing including page object model, fixtures, locators, assertions, API testing, visual regression, and CI integration. Use when writing E2E tests, setting up Playwright, creating page objects, testing user flows, or when the user asks about end-to-end testing, browser testing, or Playwright configuration.
- ▌ Tailwindcss · grahamcrackersTailwind CSS v4 best practices including CSS-native configuration, theme variables, modern utilities, and migration patterns. Use when writing Tailwind CSS, styling components, configuring Tailwind, working with the v4 theme system, or when the user asks about Tailwind conventions or migration.
- ▌ React Router · grahamcrackersReact Router v7 patterns for client-side routing including nested routes, loaders, actions, route params, search params, navigation guards, and code splitting. Use when setting up React Router, creating routes, handling navigation, loading route data, or when the user asks about React Router, SPA routing, or route configuration.
- ▌ Framer Motion · grahamcrackersFramer Motion animation patterns for React including transitions, variants, layout animations, AnimatePresence, gestures, scroll animations, and performance optimization. Use when animating React components, building transitions, adding micro-interactions, or when the user asks about Framer Motion, React animation, or motion design.
- ▌ Github Actions · grahamcrackersGitHub Actions best practices for CI/CD workflows including job structure, caching, reusable workflows, composite actions, matrix builds, secrets management, and common pipeline patterns. Use when writing GitHub Actions workflows, setting up CI/CD, optimizing builds, creating reusable actions, or when the user asks about GitHub Actions, workflows, or deployment automation.
- ▌ State Machines · grahamcrackersXState v5 patterns for state machines and statecharts in React including machine design, actors, guards, actions, services, parallel states, and React integration. Use when modeling complex UI state, building multi-step flows, managing async processes, or when the user asks about state machines, XState, statecharts, or finite state automata.
- ▌ Tanstack Query · grahamcrackersTanStack Query v5 patterns for server state management, caching, mutations, optimistic updates, and query organization. Use when working with TanStack Query, React Query, server state, data fetching hooks, or when the user asks about caching strategies, query invalidation, or mutation patterns.
- ▌ Tanstack Table · grahamcrackersTanStack Table v8 patterns for building headless, type-safe tables in React with sorting, filtering, pagination, and virtualization. Use when building data tables, grids, or list views, or when the user asks about TanStack Table, React Table, column definitions, or table state management.
- ▌ Vitest Testing · grahamcrackersVitest and Testing Library patterns for unit, component, and integration tests in TypeScript and React projects. Covers test organization, mocking, assertions, component testing, and MSW integration. Use when writing tests, setting up Vitest, mocking dependencies, testing React components, or when the user asks about testing patterns or test configuration.
- ▌ Zod Validation · grahamcrackersZod schema validation patterns for TypeScript, including API response parsing, form validation, environment variables, and type inference. Use when validating data, parsing API responses, defining schemas, integrating with forms, or when the user asks about Zod, runtime validation, or schema design.
- ▌ Git Conventions · grahamcrackersGit conventions for teams including conventional commits, branching strategies, PR workflows, merge strategies, and commit message formatting. Use when writing commit messages, creating branches, setting up Git workflows, or when the user asks about Git conventions, commit formats, branching strategies, or PR best practices.
- ▌ React Hook Form · grahamcrackersReact Hook Form patterns for performant, type-safe forms with Zod validation, field arrays, multi-step forms, and controlled components. Use when building forms, handling form validation, working with React Hook Form, or when the user asks about form patterns, field arrays, or form state management.
- ▌ Tanstack Router · grahamcrackersTanStack Router patterns for type-safe routing in React including file-based routes, search params validation, data loading, authenticated routes, and code splitting. Use when setting up routing, creating routes, handling search params, loading route data, or when the user asks about TanStack Router, type-safe routing, or client-side navigation.
- ▌ Web Performance · grahamcrackersWeb performance optimization patterns including Core Web Vitals, bundle analysis, lazy loading, image optimization, caching strategies, rendering performance, and monitoring. Use when optimizing page load speed, reducing bundle size, improving CWV scores, profiling render performance, or when the user asks about web performance, Core Web Vitals, or page speed.
- ▌ Security Patterns · grahamcrackersFrontend security patterns including XSS prevention, Content Security Policy, CSRF protection, input sanitization, authentication token handling, dependency auditing, and secure headers. Use when hardening a web app, handling user input, managing auth tokens, configuring CSP, or when the user asks about web security, XSS, CSRF, or secure coding practices.
- ▌ React Best Practices · grahamcrackersModern React 19 patterns for components, hooks, state management, performance, and project structure. Use when writing React components, reviewing React code, designing component APIs, or when the user asks about React conventions, architecture, or best practices.
- ▌ Clean Code Principles · grahamcrackers bundleClean code principles for readable, maintainable TypeScript and React codebases. Covers naming, functions, abstraction, composition, error handling, comments, and code smells. Use when writing new code, refactoring, reviewing code quality, or when the user asks about clean code, readability, or maintainability.
- ▌ React Aria Components · grahamcrackersReact Aria Components patterns for building accessible, unstyled UI with composition-based architecture. Covers component structure, styling with Tailwind and CSS, render props, collections, forms, selections, overlays, and drag-and-drop. Use when building accessible components, using react-aria-components, creating design systems, or when the user asks about React Aria, accessible UI primitives, or headless component libraries.
- ▌ Accessibility Patterns · grahamcrackersWeb accessibility (a11y) patterns for WCAG compliance, ARIA usage, semantic HTML, keyboard navigation, and focus management. Use when building accessible UI, reviewing components for a11y, adding ARIA attributes, handling keyboard interactions, or when the user asks about accessibility, WCAG, screen readers, or focus management.
- ▌ Typescript Best Practices · grahamcrackersCore TypeScript conventions for type safety, inference, and clean code. Use when writing TypeScript, reviewing TypeScript code, creating interfaces/types, or when the user asks about TypeScript patterns, conventions, or best practices.
- ▌ Bulletproof React Patterns · grahamcrackers bundleBulletproof React architecture patterns for scalable, maintainable applications. Covers feature-based project structure, component patterns, state management boundaries, API layer design, error handling, security, and testing strategies. Use when structuring a React project, designing application architecture, organizing features, or when the user asks about React project structure or scalable patterns.
- ▌ Typescript Advanced Patterns · grahamcrackersAdvanced TypeScript type-level patterns including generics, branded types, discriminated unions, template literals, conditional types, and type-safe builders. Use when working on complex TypeScript type design, creating type-safe APIs, building libraries, or when the user asks about advanced type patterns.