Want to become an absolute beast at React development? This is my curated collection of tools, workflows, and resources that'll transform you from a regular dev into a cracked one.

Cursor Workflows

Master the art of building beautiful UIs with Cursor AI. These tutorials will show you how to leverage AI to 10x your development speed.

Design Resources

Design Systems Theory

Learn the principles behind great design systems:

Website Backgrounds

Creating stunning backgrounds is crucial for that polished look:

Thumbnail & Visual Tools

Create eye-catching thumbnails and visuals:

  • Text Between Background & Subject Tool - Perfect for thumbnail text layering
  • Dither Plugin - The easiest way to add dither effects on the web. The dither plugin for TailwindCSS is adding a dither effect to your elements by using simple CSS filters. The plugin is free to use and open-source.

Component Libraries

Why reinvent the wheel? Use these premium component libraries:

Color & Theming

  • TweakCN - Shadcn color palette generator

Icons

Only two libraries you need for icons:

was looking for brand icons today

then remembered this existed https://svgl.app/

Backend with Go

Great for concurrent and parallel use cases. Go is becoming the go-to backend language for React apps.

AI Development Tools

Claude Code Tips

  • Claude Code Tips - Master the AI assistant
  • Claude Code Templates (aitmpl.com) - Ready-to-use configurations for Anthropic's Claude Code. A comprehensive collection of AI agents, custom commands, settings, hooks, external integrations (MCPs), and project templates to enhance your development workflow.

Browser Automation

AI Image Generation

Generate stunning visuals with AI-powered image generation tools:

  • ComfyUI - Powerful and modular Stable Diffusion GUI and backend
  • ComfyUI Tutorial - Learn how to use ComfyUI effectively

Knowledge Management

Obsidian - Your Second Brain

Every cracked dev needs a second brain to store knowledge:

Dev Workflow Optimization

The Primeagen Way

Learn from one of the most efficient developers in the game:

Startup Quick Setup

Need to ship FAST? These are premium resources:

Paid Resources

Tips & Tricks

DevTools: Inspect Disappearing Elements

Ever struggled to inspect tooltips or dropdowns that disappear when you move your mouse? Here's a pro tip from @kamrify:

Use the DevTools debugger to freeze the page:

  • Open DevTools Console
  • Trigger the element you want to inspect
  • While it's visible, run: setTimeout(() => {debugger}, 3000)
  • You now have 3 seconds to position your cursor before the page freezes
  • Inspect the element at your leisure!

Design System Prompt

Use this prompt to extract design systems from any website:

Create a JSON profile design system that extracts visual data from 
these screenshots so that I can use the JSON output in Cursor to 
give it context on how to replicate such design systems in a 
consistent style. Avoid including the contents of the specific 
images. The output should include the design style, the structure 
and anything that'll help an AI replicate such designs.

Meta Tags & SEO

Performance Optimization

Final Words

I will keep improving this resource.

"The best developers aren't the ones who know everything, they're the ones who know how to find everything." - Some cracked dev, probably