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.
  • Efecto - ASCII dither effect generator for creating unique retro-style visuals
  • GrainRad - ASCII art style generator for creating textured, grainy visual effects
  • Lego Pixellation - Convert images into legofied versions with pixel art aesthetic (GitHub, Tweet)
  • CMYK Emulator - Web-based CMYK print emulator with pre-filter settings, blur, antialiasing, and MP4 recording (works on mobile too)
  • PostSpark - Quickly create eye-catching screenshot mockups for social media with customizable templates
  • BigForge - Photoshop for making memes

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
  • Micro Interactions - Beautiful, modern, responsive micro interactions optimized for performance and UX
  • Ease Master - Animation easing curve visualizer and generator for JavaScript

Shadcn UI Extension Libraries

If you use Shadcn UI, these libraries will supercharge your component toolkit:

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/

AI Development Tools

Claude Code Tips

Ctrl+S to stash your prompt. Send something else, then auto-restore your draft. git stash for prompts.

Loading...

Jitter Fix

Claude Code jitter fix tip
  • 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.
  • Claude Code Frontend Design Skill - Install this skill for enhanced frontend design capabilities. Run: /plugin marketplace add anthropics/claude-code then /plugin install frontend-design@claude-code-plugins
  • Code Simplifier Agent - Open sourced by the Claude Code team. Use at the end of long coding sessions or to clean up complex PRs. Install: claude plugin install code-simplifier (or /plugin marketplace update claude-plugins-official then /plugin install code-simplifier)
  • Humanizer - A Claude Code skill that removes signs of AI-generated writing from text, making it sound more natural and human
  • Remotion Agent Skills - Make videos just with Claude Code! Install: npx skills add remotion-dev/skills (Example)

Prevent Haiku Sub-Agents

If you've been burned by Claude Code default sub-agents using Haiku models, there's an easy workaround to permanently prevent it. Remap the alias via env vars in ~/.claude/settings.json:

{
  "env": {
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-sonnet-4-5-20250929"
  }
}

Even Better: Use Sonnet 1M Context

The best thing I've done with Claude Code — by measure of ranting less to my agent sessions this past week. Use the 1M context variant of Sonnet as the haiku model. Sub-agents get way more context to work with, which means fewer hallucinations and less back-and-forth:

{
  "env": {
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-sonnet-4-5-20250929[1m]"
  }
}

My Claude Code Settings

Loading...
Loading...

Spec-Based Development with Claude Code

My favorite way to build large features with Claude Code is spec-based. Start with a minimal spec or prompt and ask Claude to interview you using the AskUserQuestionTool. Let it ask about technical implementation, UI & UX, concerns, tradeoffs—but make sure the questions are not obvious.

Be very in-depth and continue the interview until it's complete. Then make a new session to execute the spec. This separation keeps context clean and execution focused.

How to use Claude Code effectively with spec-based development

Copy this prompt to start your spec interview:

Interview me using the AskUserQuestionTool. Let it ask about technical implementation, UI & UX, concerns, tradeoffs—but make sure the questions are not obvious.

Browser Automation

  • Stagewise - Frontend Cursor helper
  • Browser MCP - Browser automation toolkit
  • React Grab - Select elements and copy context (HTML, React component, file source). Makes Cursor, Claude Code, Copilot run up to 55% faster

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

Developer Utilities

  • Port Killer - Native macOS app for finding and killing processes on open ports. Perfect for developers
  • Mole - Deep clean and optimize your Mac. Install via: brew install tw93/tap/mole

yt-dlp Commands

yt-dlp is essential for downloading videos and audio from YouTube and 1000+ other sites. Here are the two commands you'll use most:

Download as MP4 (best quality video):

yt-dlp -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" <URL>

Download as MP3 (audio only):

yt-dlp -x --audio-format mp3 <URL>

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:

  • Aura - Like Replit or Lovable, but specifically for beautiful landing pages. Ship stunning pages fast.
  • Visitors.now - Beautiful landing page inspiration
  • Startup Perks - Free perks and discounts for startups on tools, services, and credits

Paid Resources

Tips & Tricks

CSS: Increase Click Area Without Messing Up Layout

Want to increase the click area without messing up your layout? Try :after with position: absolute + inset: -{value}px

This creates a larger, invisible hit area around the element, making it easier to click without changing the layout.

Loading...

CSS: Fix Hover Bugs with Group Classes

You can achieve parent-child hover interactions using the Tailwind group class on parent and group-hover variant on target:

<div class="group">
  <div class="group-hover:translate-y-6"/>
</div>

Here is a breakdown of the target element within an exaggerated oversized parent wrapper:

Loading...

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:

Loading...

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

Verification & Testing Tools

After deploying, test your metadata with these tools:

Performance Optimization

CSS: Fix Dead Zones Between Stacked Elements

Ever notice small dead zones between closely stacked elements where clicks or hovers don't register? Fix it with a ::before pseudo element that extends the hit area vertically:

::before {
  content: "";
  position: absolute;
  inset: -10px 0; /* extends 10px vertically */
}

This creates an invisible buffer zone that eliminates those annoying gaps between list items, nav links, or any tightly stacked interactive elements.

Loading...

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.

CSS: Prevent Page Bounce with Multiple Scroll Containers

If your app contains multiple scroll containers, add this to your html/body to prevent the annoying "page bounce" effect:

overscroll-behavior: none;

This prevents the browser's default overscroll behavior (like elastic scrolling on macOS) from interfering with your nested scrollable areas.

Final Words

I will keep improving this resource.