Cracked Dev - Ultimate React Developer Resources

29th June 2024

Ultimate collection of tools, workflows, and resources for React development. Component libraries, design systems, and productivity tools.

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:

  • Fancy Components - Growing library of ready-to-use React components & microinteractions. Free & open source
  • 21st Demo - Modern component showcase
  • Shadcn UI Blocks - Production-ready components
  • React Bits - Stunning text animations and effects
  • Anime.js - Powerful JavaScript animation library for creating smooth, complex animations

Color & Theming

  • TweakCN - Shadcn color palette generator
  • Colorion - Color palette selection tool

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

CSS Typography Tip

Improve text readability and avoid awkward single words on the last line:

text-wrap: pretty;

This CSS property makes text line breaks look more natural and professional, especially in headings and paragraphs.

Final Words

I will keep improving this resource.