All resources
WorkflowBeginner1 min read

Git Workflow Cheatsheet

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

The feature-branch loop

bash

git switch main && git pull

git switch -c feat/palette-export

git add -p

git commit -m "feat(palettes): export tokens as CSS variables"

git push -u origin feat/palette-export

Conventional Commits

Format: type(scope): summary. A consistent prefix makes history scannable and lets tools generate changelogs and version bumps.

TypeUse forVersion bump
featA new featureMinor
fixA bug fixPatch
refactorCode change without behavior change—
docs / style / testDocs, formatting, tests—
feat! or BREAKING CHANGE:Incompatible API changeMajor

Keep your branch up to date

bash

git fetch origin

git rebase origin/main

Rebasing replays your commits on top of the latest main, giving a linear history. After rebasing an already pushed branch, push with --force-with-lease, which refuses to overwrite commits you have not seen.

Undo without panic

SituationCommand
Discard unstaged changes in a filegit restore <file>
Unstage a filegit restore --staged <file>
Fix the last commit message or add a filegit commit --amend
Undo the last commit, keep the changesgit reset --soft HEAD~1
Revert a pushed commit safelygit revert <sha>
Find a commit you “lost”git reflog

Keep reading

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