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.
- How to make beautiful UI with Cursor - Essential techniques
- Advanced Cursor Workflows - Next-level productivity
- Figma MCP for Cursor - Design to code workflow
Design Resources
Design Systems Theory
Learn the principles behind great design systems:
- Design Systems Surf - Comprehensive design systems resource
Website Backgrounds
Creating stunning backgrounds is crucial for that polished look:
- PatternCraft - Beautiful patterns for modern web design
- PhotoGradient - Gorgeous gradient backgrounds
Thumbnail & Visual Tools
Create eye-catching thumbnails and visuals:
- Text Between Background & Subject Tool - Perfect for thumbnail text layering
Component Libraries
Why reinvent the wheel? Use these premium component libraries:
- 21st Demo - Modern component showcase
- Shadcn UI Blocks - Production-ready components
- React Bits - Stunning text animations and effects
Color & Theming
- TweakCN - Shadcn color palette generator
Icons
Only two libraries you need for icons:
- React Icons - Popular icon packs in a single package
- Lucide Icons - Beautiful & consistent icon toolkit
Backend with Go
Great for concurrent and parallel use cases. Go is becoming the go-to backend language for React apps.
- Learn Go - Complete tutorial
- Go vs Node.js Comparisons - Make an informed choice
AI Development Tools
Claude Code Tips
- Claude Code Tips - Master the AI assistant
Browser Automation
- Stagewise - Frontend Cursor helper
- Browser MCP - Browser automation toolkit
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:
- Building the Second Brain - Complete guide
- Obsidian Basics - Get started
Dev Workflow Optimization
The Primeagen Way
Learn from one of the most efficient developers in the game:
- Primeagen Dev Workflow - Speed is everything
- NVIM Guide - Master the editor
Startup Quick Setup
Need to ship FAST? These are premium resources:
Paid Resources
- Magic UI Pro - Beautiful component library
- Align UI Pro - Production-ready blocks
- Bento Grids - Modern grid layouts
- React Bits Pro - Premium animations
Tips & Tricks
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
- Meta Tags Generator - Preview and optimize your meta tags
Performance Optimization
- Reducing Image Load Size - Crucial for performance
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