claudeskills.page

Collection · 13 skills

Modern Frontend Stack

Everything a React and Next.js codebase needs, in the order problems tend to appear: component patterns and server boundaries first, then styling, forms and state, then the accessibility and performance work that separates a demo from a product.

Best for Teams building with React, Next.js and Tailwind CSS.

What's inside

Listed in the order we suggest adopting them. You don't call them by name: each skill loads on its own when a request matches it.

  1. React Patterns Fewer effects, derived state, components that compose Frontend react-patterns 234 lines
  2. Next.js App Router Layouts, caching and invalidation that behave in prod Frontend nextjs-app-router 225 lines
  3. React Server Components Keep data on the server and props serializable Frontend react-server-components 205 lines
  4. Tailwind CSS v4 Tokens in @theme, complete class names, no @apply sprawl Frontend tailwind-css 206 lines
  5. State Management One owner per value: URL, cache, store or component Frontend state-management 195 lines
  6. Forms and Validation One schema, server-checked, errors a screen reader hears Frontend forms-validation 198 lines
  7. Accessibility Audit WCAG 2.2 AA findings you can hand to engineers Frontend accessibility-audit 208 lines
  8. Core Web Vitals Fix the sub-part that is actually slow Performance core-web-vitals 190 lines
  9. React Re-renders Profile first, memoize last Performance react-rerenders 199 lines
  10. Playwright E2E End-to-end tests that never need a sleep Testing playwright-e2e 220 lines
  11. Testing Library Component tests that query like a screen reader Testing testing-library 188 lines
  12. Virtualized Lists Thousands of rows, a few dozen DOM nodes Frontend virtualized-lists 284 lines
  13. Drag and Drop Drag as a shortcut, with a click path behind it Frontend drag-and-drop 254 lines

Keep exploring

Other collections

All collections →
esc