Contribute to this project! 💡

Dev Resources

Practical guides, cheatsheets and best practices for building real interfaces — with copy-ready code for CSS, React, TypeScript, APIs and more.

CSS & Tailwind

Modern CSS Layout Cheatsheet

Flexbox, Grid, fluid sizing and container queries: the handful of patterns that solve most real-world layouts.

  • Flexbox or Grid?
  • Responsive grids without media queries
  • Centering, the reliable way
  • +2 more
Beginner2 min read
CSS & Tailwind

Tailwind CSS Component Patterns

Merge classes safely, model variants, style by state with group and peer, and avoid the dynamic class name trap.

  • Merge classes with cn()
  • Model variants instead of ad-hoc props
  • Style by state with group, peer and data attributes
  • +1 more
Intermediate2 min read
Accessibility

Accessible Components Checklist

A practical checklist for semantics, keyboard support, names, contrast and motion before you ship a component.

  • Start with the right element
  • Keyboard and focus
  • Give everything an accessible name
  • +2 more
Beginner1 min read
React

React Performance Essentials

Derive instead of syncing, subscribe narrowly to stores, memoize on purpose and load heavy code on demand.

  • Derive values instead of syncing state
  • Subscribe to the smallest slice of a store
  • Memoize on purpose
  • +2 more
Intermediate2 min read
TypeScript

TypeScript Patterns for UI Code

Discriminated unions, satisfies with as const, generic components and exhaustive switches — with examples from this codebase.

  • Discriminated unions for variant data
  • satisfies + as const for config
  • Exhaustive switches
  • +2 more
Intermediate2 min read
Performance

Web Performance Checklist

Core Web Vitals targets and the Next.js techniques that move them: images, fonts, bundles and caching.

  • Know the targets
  • Images
  • Fonts
  • +2 more
Intermediate2 min read
APIs

REST API Design Basics

Methods and idempotency, status codes, consistent errors and cursor pagination — conventions clients can rely on.

  • Resources and methods
  • Status codes that carry meaning
  • One error format everywhere
  • +1 more
Beginner1 min read
Workflow

Git Workflow Cheatsheet

Branching, Conventional Commits, keeping branches current and undoing mistakes without losing work.

  • The feature-branch loop
  • Conventional Commits
  • Keep your branch up to date
  • +1 more
Beginner1 min read