Cracked Dev - Ultimate React Developer Resources

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
• ASCII Patterns - Dynamic ASCII patterns for unique backgrounds

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
• 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

Shadcn UI Extension Libraries

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

• Kokonut UI - Beautiful Shadcn-compatible components
• Cult UI - Stunning UI components for modern apps
• Cult UI Pro - Premium components and templates
• Tailark - Modern UI components with Tailwind
• Smooth UI - Sleek and smooth animated components
• Motion Primitives - Animation primitives for React & Tailwind

Color & Theming

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

Icons

Only two libraries you need for icons:

• React Icons - Popular icon packs in a single package
• Lucide Icons - Beautiful & consistent icon toolkit
• Lucide Animated - Beautifully crafted animated icons, open-source (MIT License)

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.

Jitter Fix

• 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)

My Claude Code Settings

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.

Copy this prompt to start your spec interview:

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:

• Building the Second Brain - Complete guide
• Obsidian Basics - Get started

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:

• Primeagen Dev Workflow - Speed is everything
• NVIM Guide - Master the editor

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.

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

• Meta Tags Generator - Preview and optimize your meta tags
• SEO Test - Comprehensive SEO analysis tool
• Favicon.io - Quick and easy favicon generator for your website

Performance Optimization

• Reducing Image Load Size - Crucial for performance
• Squoosh - Google's powerful image compression tool with various codecs
• Clarity AI - Upscale and enhance your images with AI Magic

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.