When I started out as a developer, debugging used to feel like an endless maze. I would spend hours digging through logs, re-running code, and scratching my head over why something wasn’t working as expected. Over time, I realized that the key to faster, smarter, and stress-free debugging lies in having the right tools by your side.

In this article, I want to share the **top 7 debugging tools** that I personally use (and highly recommend) for developers in 2025. These tools have saved me countless hours, improved my productivity, and, most importantly, made debugging less frustrating and more structured.

![](https://cdn-images-1.medium.com/max/1600/1*EXeRWSxpkHm1fniEJfeAnQ.jpeg)

Generated By Author From Perplexity

### 1. Chrome DevTools

If you’re a web developer like me, **Chrome DevTools** is probably your best friend already. It comes built into Google Chrome, and it’s an absolute powerhouse for debugging front-end issues.

I use it for:

* Inspecting and editing HTML/CSS in real-time
* Tracking JavaScript errors and network activity
* Monitoring performance with Lighthouse
* Debugging memory leaks and layout shifts

The **Elements panel** alone has saved me when layouts broke mysteriously, and the **Network tab** is my go-to when APIs fail silently. For anyone working with web apps, Chrome DevTools is non-negotiable.

### 2. Visual Studio Code Debugger

I’ve tried several IDEs, but **VS Code** has become my default workspace. Its **built-in debugger** is surprisingly powerful and works seamlessly across different languages with extensions.

What I love about it:

* Step-by-step code execution
* Watch variables and expressions live
* Conditional breakpoints (a lifesaver when chasing tricky bugs)
* Integrated terminal for quick tests

With extensions like **Python Debugger** or [**Node.js**](https://Node.js) **Tools**, I can debug almost anything directly in VS Code without switching environments. This tight integration really streamlines my workflow.

### 3. GDB (GNU Debugger)

When it comes to **low-level debugging** for C or C++ programs, nothing beats **GDB**. Although it has a steep learning curve, once I got the hang of it, it became indispensable.

Some of my favorite commands include:

* break to set breakpoints
* next and step to move through code execution
* print to inspect variable values

I especially rely on GDB when dealing with **segmentation faults** or pointer-related bugs. It’s a must-have tool for developers working close to the system level.

### 4. Postman

At first, I thought of **Postman** only as an API testing tool. But over time, I realized it’s also a fantastic debugging tool, especially when backend and frontend don’t align.

I use Postman to:

* Debug API endpoints with different inputs
* Verify headers, authentication tokens, and status codes
* Automate regression testing with collections
* Identify whether bugs lie in the client or server side

Whenever I run into issues with **API integration**, Postman helps me isolate the root cause quickly. It’s my favorite companion for debugging RESTful and GraphQL APIs.

### 5. LogRocket

When debugging complex web apps, client-side logging often becomes a black hole. That’s when I turned to **LogRocket**.

It records everything users do on the front end and replays sessions, so I can **see bugs exactly as the users experienced them**.

Features I rely on:

* Session replays to watch user behavior
* Automatic error tracking and reporting
* Integration with tools like Jira and GitHub
* Performance monitoring

This tool bridges the gap between QA, developers, and users. It has saved me from endless “it’s not working on my system” debates.

### 6. PDB (Python Debugger)

As someone who codes a lot in Python, I can’t live without **PDB**. While print statements work for quick checks, serious debugging demands PDB’s interactive powers.

Why I love PDB:

* I can pause execution at any point with import pdb; pdb.set\_trace()
* Inspect variables and stack traces interactively
* Navigate through function calls with commands like n, s, and c.

It feels like I’m **talking directly to my Python program**, and that makes it easier to pinpoint exactly where things go wrong.

### 7. Xcode Debugger

For iOS development, **Xcode’s debugger** has been a lifesaver. Apple has really polished this tool for Objective-C and Swift projects.

Key highlights for me:

* Visual interface for stepping through code
* Debugging multithreaded applications
* Real-time memory usage analysis
* Integration with Instruments for performance testing

The visual debugging of **view hierarchies** is especially powerful. Whenever I build mobile apps, Xcode debugger makes sure I don’t lose my mind chasing invisible UI bugs.

### How These Tools Changed My Debugging Approach

Before adopting these tools, debugging was mostly trial-and-error for me. I’d throw in a bunch of [console.log](https://console.log) statements, re-run the program, and hope I’d spot the issue. Now, I’ve moved from **random guessing** to **structured problem-solving**.

Here’s what changed for me:

1. **Speed**: I can pinpoint issues faster with breakpoints and interactive debugging.
2. **Accuracy**: Tools like LogRocket and Postman leave no room for guesswork.
3. **Confidence**: I no longer fear “hidden bugs” because I know how to dig deep and trace them.

### Conclusion

Debugging is a skill, but it’s also about having the right toolkit. The seven tools I’ve shared —Chrome DevTools, VS Code Debugger, GDB, Postman, LogRocket, PDB, and Xcode Debugger are my go-to resources in 2025.

If you’re serious about becoming a better developer, don’t just code; **learn to debug effectively**. I’ve found that the more comfortable I get with these tools, the more confident I become in building and shipping reliable software.

So the next time a bug haunts you at 2 a.m., remember: you don’t have to fight it alone. With the right debugging tools, you’ll not only find the issue faster but also grow as a developer in the process

Thank You For Reading!!!

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

When I started out as a developer, debugging used to feel like an endless maze. I would spend hours digging through logs, re-running code, and scratching my head over why something wasn’t working as expected. Over time, I realized that the key to faster, smarter, and stress-free debugging lies in having the right tools by your side.
In this article, I want to share the top 7 debugging tools that I personally use (and highly recommend) for developers in 2025. These tools have saved me countless hours, improved my productivity, and, most importantly, made debugging less frustrating and more structured.
<img src="https://cdn-images-1.medium.com/max/1600/1*EXeRWSxpkHm1fniEJfeAnQ.jpeg" alt="">
Generated By Author From Perplexity
<h3 id="1-chromedevtools">1. Chrome DevTools</h3>
If you’re a web developer like me, Chrome DevTools is probably your best friend already. It comes built into Google Chrome, and it’s an absolute powerhouse for debugging front-end issues.
I use it for:
<ul>
<li>Inspecting and editing HTML/CSS in real-time</li>
<li>Tracking JavaScript errors and network activity</li>
<li>Monitoring performance with Lighthouse</li>
<li>Debugging memory leaks and layout shifts</li>
</ul>
The Elements panel alone has saved me when layouts broke mysteriously, and the Network tab is my go-to when APIs fail silently. For anyone working with web apps, Chrome DevTools is non-negotiable.
<h3 id="2-visual-studio-codedebugger">2. Visual Studio Code Debugger</h3>
I’ve tried several IDEs, but VS Code has become my default workspace. Its built-in debugger is surprisingly powerful and works seamlessly across different languages with extensions.
What I love about it:
<ul>
<li>Step-by-step code execution</li>
<li>Watch variables and expressions live</li>
<li>Conditional breakpoints (a lifesaver when chasing tricky bugs)</li>
<li>Integrated terminal for quick tests</li>
</ul>
With extensions like Python Debugger or <a href="https://Node.js">Node.js</a> Tools, I can debug almost anything directly in VS Code without switching environments. This tight integration really streamlines my workflow.
<h3 id="3-gdb-gnu-debugger">3. GDB (GNU Debugger)</h3>
When it comes to low-level debugging for C or C++ programs, nothing beats GDB. Although it has a steep learning curve, once I got the hang of it, it became indispensable.
Some of my favorite commands include:
<ul>
<li>break to set breakpoints</li>
<li>next and step to move through code execution</li>
<li>print to inspect variable values</li>
</ul>
I especially rely on GDB when dealing with segmentation faults or pointer-related bugs. It’s a must-have tool for developers working close to the system level.
<h3 id="4-postman">4. Postman</h3>
At first, I thought of Postman only as an API testing tool. But over time, I realized it’s also a fantastic debugging tool, especially when backend and frontend don’t align.
I use Postman to:
<ul>
<li>Debug API endpoints with different inputs</li>
<li>Verify headers, authentication tokens, and status codes</li>
<li>Automate regression testing with collections</li>
<li>Identify whether bugs lie in the client or server side</li>
</ul>
Whenever I run into issues with API integration, Postman helps me isolate the root cause quickly. It’s my favorite companion for debugging RESTful and GraphQL APIs.
<h3 id="5-logrocket">5. LogRocket</h3>
When debugging complex web apps, client-side logging often becomes a black hole. That’s when I turned to LogRocket.
It records everything users do on the front end and replays sessions, so I can see bugs exactly as the users experienced them.
Features I rely on:
<ul>
<li>Session replays to watch user behavior</li>
<li>Automatic error tracking and reporting</li>
<li>Integration with tools like Jira and GitHub</li>
<li>Performance monitoring</li>
</ul>
This tool bridges the gap between QA, developers, and users. It has saved me from endless “it’s not working on my system” debates.
<h3 id="6-pdb-python-debugger">6. PDB (Python Debugger)</h3>
As someone who codes a lot in Python, I can’t live without PDB. While print statements work for quick checks, serious debugging demands PDB’s interactive powers.
Why I love PDB:
<ul>
<li>I can pause execution at any point with import pdb; pdb.set_trace()</li>
<li>Inspect variables and stack traces interactively</li>
<li>Navigate through function calls with commands like n, s, and c.</li>
</ul>
It feels like I’m talking directly to my Python program, and that makes it easier to pinpoint exactly where things go wrong.
<h3 id="7-xcodedebugger">7. Xcode Debugger</h3>
For iOS development, Xcode’s debugger has been a lifesaver. Apple has really polished this tool for Objective-C and Swift projects.
Key highlights for me:
<ul>
<li>Visual interface for stepping through code</li>
<li>Debugging multithreaded applications</li>
<li>Real-time memory usage analysis</li>
<li>Integration with Instruments for performance testing</li>
</ul>
The visual debugging of view hierarchies is especially powerful. Whenever I build mobile apps, Xcode debugger makes sure I don’t lose my mind chasing invisible UI bugs.
<h3 id="how-these-tools-changed-my-debugging-approach">How These Tools Changed My Debugging Approach</h3>
Before adopting these tools, debugging was mostly trial-and-error for me. I’d throw in a bunch of <a href="https://console.log">console.log</a> statements, re-run the program, and hope I’d spot the issue. Now, I’ve moved from random guessing to structured problem-solving.
Here’s what changed for me:
<ol>
<li>Speed: I can pinpoint issues faster with breakpoints and interactive debugging.</li>
<li>Accuracy: Tools like LogRocket and Postman leave no room for guesswork.</li>
<li>Confidence: I no longer fear “hidden bugs” because I know how to dig deep and trace them.</li>
</ol>
<h3 id="conclusion">Conclusion</h3>
Debugging is a skill, but it’s also about having the right toolkit. The seven tools I’ve shared —Chrome DevTools, VS Code Debugger, GDB, Postman, LogRocket, PDB, and Xcode Debugger are my go-to resources in 2025.
If you’re serious about becoming a better developer, don’t just code; learn to debug effectively. I’ve found that the more comfortable I get with these tools, the more confident I become in building and shipping reliable software.
So the next time a bug haunts you at 2 a.m., remember: you don’t have to fight it alone. With the right debugging tools, you’ll not only find the issue faster but also grow as a developer in the process
Thank You For Reading!!!
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
Hey, <a href="https://linkedin.com/in/sunilsandhu">Sunil</a> here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️
If you want to show some love, please take a moment to follow me on <a href="https://linkedin.com/in/sunilsandhu">LinkedIn</a>, <a href="https://tiktok.com/@messyfounder">TikTok</a>, <a href="https://instagram.com/sunilsandhu">Instagram</a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/">weekly newsletter</a>.

My personal experience with the best debugging tools

Top 7 Debugging Tools Every Developer Should Master in 2025

Few programming concepts are so alluringly simple yet so widely misunderstood as randomness. Behind every throw of the dice, draw of a loot box, or shuffle in a playlist is an exacting system of logic masquerading as chaos. Code is truly random chaos. It’s designed uncertainty, carefully calibrated to seem spontaneous, fair, and thrilling.

Whether gaming or securing data from hackers, using simulations or business analytics, or running digital currency, randomness provides the unpredictability and efficiency we have come to expect from software. But for developers, mastering randomness isn’t all about built-in functions. It is a matter of finding how to combine probability, user experience, and fairness within the same system.

![](https://cdn-images-1.medium.com/max/1600/1*moQQstwvpN6Fj-ALKz5rjg.png)

*Source:* [*pexels.com*](http://pexels.com)

## Controlled Chaos in Design

The best way to use randomness in software is for controlled chaos. Pure unpredictability can seem unfair, and complete predictability can make experiences dull. Developers address this by creating biased randomness, where probabilities are not evenly distributed to provide smoother pacing or balance the action.

This is true of many experiences in the world of gaming and entertainment. The equations that govern both online pokie games and computerized casino platforms are based on incredibly complicated random number generators (RNGs) that ensure each spin or round is entirely unpredictable and uncorrelated with the next. They're rigorously tested to comply with international standards and will continue to produce fair results regardless of how many times the event is held.

The aim is not just to be entertaining, but also transparent. Today's real-money gambling platforms feature blockchain verification, data encryption, and compliance testing to add another layer of confidence for those playing. These games allow the player to take chances in a way that feels natural, whether or not they are completely traceable behind the scenes.

A great example of these principles in action can be seen when you [check out Cardplayer](https://www.cardplayer.com/au/online-pokies-real-money), where modern online pokies showcase how advanced randomization, secure payment systems, and fair-play verification create today’s real-money digital experiences. It’s a reminder that what appears to be luck is often intricate math operating quietly in the background.

## The Math Behind “Random”

What most people think of as random is really pseudo-random. It's generated by equations that produce sequences that look random without any external conditions; however, it is perfectly deterministic under the same conditions. In just about every programming language, methods such as *Math.random()* or *Python's random()* depend on a seed (usually system time and some form of environmental noise).

As for the same seed, everything will be repeated. That’s because simulations, games, and tests will often reset the pulses of their randomizers so that results will seem fresh. Developers occasionally augment this with probability correction, a less subtle method for biasing results so the users don’t lose faith in the system.

For example, if a player has been losing repeatedly at a game, they might be offered marginally better odds for their next attempt. This keeps interest up and the headache down, even while the math is still ticking along predictably in the background.

## Building Systems That Feel Fair

Fairness is both perception and math. In code, fairness can also hinge on how randomness is executed and transmitted. Three key principles guide them as they design systems that feel balanced:

1. **Predictability for the system, unpredictability for the user:** Program code must know the limits of chance, but no user should feel a “pattern”.
2. **Make it clear where it is crucial:** Explain the odds, show Probabilities, and make your results verifiable when Fairness matters.
3. **Error recovery and bias management:** Guarantee that no latent factors or input biases affect results in the long term.

These features emerge across gaming and other applications, such as [cybersecurity and cryptography](https://www.einfochips.com/blog/the-crucial-role-of-cryptography-in-cybersecurity/), to safeguard sensitive information, random keys, and unpredictable sequences. In both cases, the credibility of a system is the degree to which its randomness can be trusted.

## Why Randomness Still Matters

Randomness is everywhere, quietly yet forcefully powering much of modern computing. For cybersecurity, such random keys are the natural shields for encryption systems. In artificial intelligence, random sampling can be used to train balanced models. Randomness is also the force behind many day-to-day apps that decide what playlist you’ll listen to next or which product you’ll see in your feed.

In other words, randomness is the force that keeps systems from becoming static. It adds heterogeneity, randomness, and creativity to software that would have otherwise been monotonous.

For developers, becoming competent in randomness is not a matter of syntax. It boils down to knowing how to ride the line with uncertainty and not lose user trust. It demands the creation of experiences that seem complex, where unpredictable things can and should happen, yet are still structured enough to ensure fairness.

## Practical Use of Randomness in Development

Developers creatively apply randomness across different domains to influence system performance and user behavior. Here are some of the ways it is critical:

* **Engines:** Used to randomly generate unique enemy behaviors, item drops, and world styles.
* [**Artificial Neural Networks**](https://arxiv.org/abs/2404.03992)**:** Employed in data augmentation and data enrichment to avoid overfitting.
* **UI Testing:** Used randomly through user flows to find bugs in various interaction patterns.
* **Security:** Necessary in creating secure Encryption Keys and Tokenized Credentials.
* **Personalized Content:** Neutralizes recommendations to prevent duplicate content for users.

Both these use cases are based on the same underpinning: structured, repeatable randomness when required to feel real to the end user.

## The Art of Controlled Unpredictability

To the untrained eye, this randomness may look like noise, but in programming, it is a feature that enables systems to feel alive. When it works, it creates balance, excitement, and trust.

And as developers, the target isn’t capitulation to anarchy but rather to tame it: “to inject some uncertainty that does something useful.” Whether it’s a randomized dataset or a digital poker table, randomness imbues systems with a human edge.

Because at the end of the day, code doesn’t bet. It computes, simulates, and provides a feeling of verisimilitude. The appearance of randomness is no accident; it’s a byproduct of precision.

Few programming concepts are so alluringly simple yet so widely misunderstood as randomness. Behind every throw of the dice, draw of a loot box, or shuffle in a playlist is an exacting system of logic masquerading as chaos. Code is truly random chaos. It’s designed uncertainty, carefully calibrated to seem spontaneous, fair, and thrilling.
Whether gaming or securing data from hackers, using simulations or business analytics, or running digital currency, randomness provides the unpredictability and efficiency we have come to expect from software. But for developers, mastering randomness isn’t all about built-in functions. It is a matter of finding how to combine probability, user experience, and fairness within the same system.
<img src="https://cdn-images-1.medium.com/max/1600/1*moQQstwvpN6Fj-ALKz5rjg.png" alt="">
Source: <a href="http://pexels.com">pexels.com</a>
<h2 id="controlled-chaos-in-design">Controlled Chaos in Design</h2>
The best way to use randomness in software is for controlled chaos. Pure unpredictability can seem unfair, and complete predictability can make experiences dull. Developers address this by creating biased randomness, where probabilities are not evenly distributed to provide smoother pacing or balance the action.
This is true of many experiences in the world of gaming and entertainment. The equations that govern both online pokie games and computerized casino platforms are based on incredibly complicated random number generators (RNGs) that ensure each spin or round is entirely unpredictable and uncorrelated with the next. They're rigorously tested to comply with international standards and will continue to produce fair results regardless of how many times the event is held.
The aim is not just to be entertaining, but also transparent. Today's real-money gambling platforms feature blockchain verification, data encryption, and compliance testing to add another layer of confidence for those playing. These games allow the player to take chances in a way that feels natural, whether or not they are completely traceable behind the scenes.
A great example of these principles in action can be seen when you <a href="https://www.cardplayer.com/au/online-pokies-real-money">check out Cardplayer</a>, where modern online pokies showcase how advanced randomization, secure payment systems, and fair-play verification create today’s real-money digital experiences. It’s a reminder that what appears to be luck is often intricate math operating quietly in the background.
<h2 id="the-math-behind-random">The Math Behind “Random”</h2>
What most people think of as random is really pseudo-random. It's generated by equations that produce sequences that look random without any external conditions; however, it is perfectly deterministic under the same conditions. In just about every programming language, methods such as Math.random() or Python's random() depend on a seed (usually system time and some form of environmental noise).
As for the same seed, everything will be repeated. That’s because simulations, games, and tests will often reset the pulses of their randomizers so that results will seem fresh. Developers occasionally augment this with probability correction, a less subtle method for biasing results so the users don’t lose faith in the system.
For example, if a player has been losing repeatedly at a game, they might be offered marginally better odds for their next attempt. This keeps interest up and the headache down, even while the math is still ticking along predictably in the background.
<h2 id="building-systems-that-feel-fair">Building Systems That Feel Fair</h2>
Fairness is both perception and math. In code, fairness can also hinge on how randomness is executed and transmitted. Three key principles guide them as they design systems that feel balanced:
<ol>
<li>Predictability for the system, unpredictability for the user: Program code must know the limits of chance, but no user should feel a “pattern”.</li>
<li>Make it clear where it is crucial: Explain the odds, show Probabilities, and make your results verifiable when Fairness matters.</li>
<li>Error recovery and bias management: Guarantee that no latent factors or input biases affect results in the long term.</li>
</ol>
These features emerge across gaming and other applications, such as <a href="https://www.einfochips.com/blog/the-crucial-role-of-cryptography-in-cybersecurity/">cybersecurity and cryptography</a>, to safeguard sensitive information, random keys, and unpredictable sequences. In both cases, the credibility of a system is the degree to which its randomness can be trusted.
<h2 id="why-randomness-still-matters">Why Randomness Still Matters</h2>
Randomness is everywhere, quietly yet forcefully powering much of modern computing. For cybersecurity, such random keys are the natural shields for encryption systems. In artificial intelligence, random sampling can be used to train balanced models. Randomness is also the force behind many day-to-day apps that decide what playlist you’ll listen to next or which product you’ll see in your feed.
In other words, randomness is the force that keeps systems from becoming static. It adds heterogeneity, randomness, and creativity to software that would have otherwise been monotonous.
For developers, becoming competent in randomness is not a matter of syntax. It boils down to knowing how to ride the line with uncertainty and not lose user trust. It demands the creation of experiences that seem complex, where unpredictable things can and should happen, yet are still structured enough to ensure fairness.
<h2 id="practical-use-of-randomness-in-development">Practical Use of Randomness in Development</h2>
Developers creatively apply randomness across different domains to influence system performance and user behavior. Here are some of the ways it is critical:
<ul>
<li>Engines: Used to randomly generate unique enemy behaviors, item drops, and world styles.</li>
<li><a href="https://arxiv.org/abs/2404.03992">Artificial Neural Networks</a>: Employed in data augmentation and data enrichment to avoid overfitting.</li>
<li>UI Testing: Used randomly through user flows to find bugs in various interaction patterns.</li>
<li>Security: Necessary in creating secure Encryption Keys and Tokenized Credentials.</li>
<li>Personalized Content: Neutralizes recommendations to prevent duplicate content for users.</li>
</ul>
Both these use cases are based on the same underpinning: structured, repeatable randomness when required to feel real to the end user.
<h2 id="the-art-of-controlled-unpredictability">The Art of Controlled Unpredictability</h2>
To the untrained eye, this randomness may look like noise, but in programming, it is a feature that enables systems to feel alive. When it works, it creates balance, excitement, and trust.
And as developers, the target isn’t capitulation to anarchy but rather to tame it: “to inject some uncertainty that does something useful.” Whether it’s a randomized dataset or a digital poker table, randomness imbues systems with a human edge.
Because at the end of the day, code doesn’t bet. It computes, simulates, and provides a feeling of verisimilitude. The appearance of randomness is no accident; it’s a byproduct of precision.

When Code Meets Chance: How Developers Build the Illusion of Randomness

![](https://cdn-images-1.medium.com/max/1600/0*nxMFmNThOOlYjSVp)

Debugging is not just a part of coding -it’s where most of us spend **half our development time**.
Late-night bug hunts, coffee gone cold, staring at the same line of code for hours -we have all been there.
That’s why the right **debugging tools** can save hours, protect your sanity, and make you a faster, more confident developer.

In this post, I am sharing the **10 debugging tools every developer should know**, with **pros, cons and how I have used them in real projects**.

[Non Members-Free Read](https://medium.com/@jaydipkumarjha/top-10-debugging-tools-every-developer-should-know-c4d185d6fa5d?sk=770a5d293db7b947bf9f6c8ee1b08bed)

### 1. Chrome DevTools -The Frontend Lifesaver

Every frontend bug I have ever fixed started here. From inspecting elements to live-editing CSS, tracking network calls and stepping through JS-[**Chrome DevTools**](https://developer.chrome.com/docs/devtools?utm_source=chatgpt.com) is my go-to.

![](https://cdn-images-1.medium.com/max/1600/1*l9SlFcoJ9PYUtPek0dVk2Q.png)

Image Credit-[developer.chrome.com](https://developer.chrome.com/docs/devtools?utm_source=chatgpt.com)

**Pros:** Built-in, free, and extremely powerful.
**Cons:** Can look intimidating if you are new.
**Real-life use:** Once saved a production layout bug by hot-fixing CSS in DevTools before shipping a proper patch.

### 2. Postman -API Debugging Without Pain

[**Postman**](https://www.postman.com) is perfect for reproducing API issues without spinning up the whole frontend.

**Pros:** Great UI, lets you save and share requests.
**Cons:** Heavy for quick requests, but worth it.
**Real-life use:** Found a failing POST request because my JSON format was slightly wrong-caught in minutes with Postman.

### 3. VS Code Debugger -Step Through Like a Pro

Console logs are good, but breakpoints are better. [**VS Code’s debugger**](https://code.visualstudio.com/docs/debugtest/debugging) lets you step through code, inspect variables, and skip the log spam.

**Pros:** Works out of the box for most setups.
**Cons:** Needs a little config for Node or SSR React apps.
**Real-life use:** Used it to track a memory leak in a Node app that would have taken hours with just logs.

### 4. Git Bisect-Hunt Down That Buggy Commit

[Git Bisect ](https://git-scm.com/docs/git-bisect)is my secret weapon for finding which commit broke something.

**Pros:** Super quick for regression bugs.
**Cons:** Needs a reproducible test case to work.
**Real-life use:** Once tracked a two-week-old bug to a single commit-without bisect, I would have blamed the wrong code.

### 5. Sentry-Production Bug Tracking

Logs are nice, [but Sentry](https://sentry.io/welcome/?utm_source=chatgpt.com) shows exactly where things break, with stack traces and user context.

**Pros:** Alerts, detailed reports, and user sessions.
**Cons:** Free plan has limits.
**Real-life use:** Found a Safari-only bug through Sentry that users were silently suffering from.

### 6. Wireshark -Deep Network Debugging

When requests just disappear, [Wireshark](https://www.wireshark.org) is my last resort.

**Pros:** Lets you inspect network packets in detail.
**Cons:** Steep learning curve if you’re new.
**Real-life use:** Found a proxy misconfiguration dropping requests randomly -without this, I would still be guessing.

### 7. Docker Logs & Exec-Debug Inside Containers

For containerized apps, `docker logs` and `docker exec` are must-haves.

**Pros:** Lets you debug live containers easily.
**Cons:** Requires Docker know-how.
**Real-life use:** Jumped into a running container to check environment variables -found a missing config in minutes.

### 8. ESLint & Prettier -Prevent Bugs Before They Happen

Clean code = fewer bugs. ESLint catches silly mistakes, and Prettier keeps code consistent.

**Pros:** Prevents small bugs early.
**Cons:** Can feel noisy if rules aren’t set right.
**Real-life use:** ESLint once caught an unused variable that was silently breaking production.

### 9. Log Monitoring Tools (Graylog, Kibana)

When something breaks in production, logs tell the story. Centralized logging saves hours of guesswork.

**Pros:** View logs across services in one place.
**Cons:** Needs setup and server resources.
**Real-life use:** Traced a payment failure flow across microservices in minutes-without touching code.

### 10. Rubber Duck Debugging

Rubber duck debugging is old but gold. Explaining the bug to someone else (or a literal rubber duck) works surprisingly well.

**Pros:** Free, instant clarity.
**Cons:** People may look at you weirdly.
**Real-life use:** Many times, just writing a Slack message describing the bug made the solution pop into my head before I hit send.

**Editor’s Note-**&#x49; am not affiliated with any of the tools, websites, or services mentioned in this article. All links and references are shared purely for educational purposes based on personal experience and to help fellow developers explore useful debugging tools.

Debugging is not just about fixing errors -it’s about having the right tools to make your life easier. Start with these, get comfortable and you will cut your debugging time in half.

Thanks for Reading 🚀🙏….don’t forget to drop your love ❤️

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!

<img src="https://cdn-images-1.medium.com/max/1600/0*nxMFmNThOOlYjSVp" alt="">
Debugging is not just a part of coding -it’s where most of us spend half our development time.
Late-night bug hunts, coffee gone cold, staring at the same line of code for hours -we have all been there.
That’s why the right debugging tools can save hours, protect your sanity, and make you a faster, more confident developer.
In this post, I am sharing the 10 debugging tools every developer should know, with pros, cons and how I have used them in real projects.
<a href="https://medium.com/@jaydipkumarjha/top-10-debugging-tools-every-developer-should-know-c4d185d6fa5d?sk=770a5d293db7b947bf9f6c8ee1b08bed">Non Members-Free Read</a>
<h3 id="1-chrome-devtools--the-frontend-lifesaver">1. Chrome DevTools -The Frontend Lifesaver</h3>
Every frontend bug I have ever fixed started here. From inspecting elements to live-editing CSS, tracking network calls and stepping through JS-<a href="https://developer.chrome.com/docs/devtools?utm_source=chatgpt.com">Chrome DevTools</a> is my go-to.
<img src="https://cdn-images-1.medium.com/max/1600/1*l9SlFcoJ9PYUtPek0dVk2Q.png" alt="">
Image Credit-<a href="https://developer.chrome.com/docs/devtools?utm_source=chatgpt.com">developer.chrome.com</a>
Pros: Built-in, free, and extremely powerful.
Cons: Can look intimidating if you are new.
Real-life use: Once saved a production layout bug by hot-fixing CSS in DevTools before shipping a proper patch.
<h3 id="2-postman--api-debugging-withoutpain">2. Postman -API Debugging Without Pain</h3>
<a href="https://www.postman.com">Postman</a> is perfect for reproducing API issues without spinning up the whole frontend.
Pros: Great UI, lets you save and share requests.
Cons: Heavy for quick requests, but worth it.
Real-life use: Found a failing POST request because my JSON format was slightly wrong-caught in minutes with Postman.
<h3 id="3-vs-code-debugger--step-through-like-apro">3. VS Code Debugger -Step Through Like a Pro</h3>
Console logs are good, but breakpoints are better. <a href="https://code.visualstudio.com/docs/debugtest/debugging">VS Code’s debugger</a> lets you step through code, inspect variables, and skip the log spam.
Pros: Works out of the box for most setups.
Cons: Needs a little config for Node or SSR React apps.
Real-life use: Used it to track a memory leak in a Node app that would have taken hours with just logs.
<h3 id="4-git-bisect-hunt-down-that-buggycommit">4. Git Bisect-Hunt Down That Buggy Commit</h3>
<a href="https://git-scm.com/docs/git-bisect">Git Bisect </a>is my secret weapon for finding which commit broke something.
Pros: Super quick for regression bugs.
Cons: Needs a reproducible test case to work.
Real-life use: Once tracked a two-week-old bug to a single commit-without bisect, I would have blamed the wrong code.
<h3 id="5-sentry-production-bugtracking">5. Sentry-Production Bug Tracking</h3>
Logs are nice, <a href="https://sentry.io/welcome/?utm_source=chatgpt.com">but Sentry</a> shows exactly where things break, with stack traces and user context.
Pros: Alerts, detailed reports, and user sessions.
Cons: Free plan has limits.
Real-life use: Found a Safari-only bug through Sentry that users were silently suffering from.
<h3 id="6-wireshark--deep-network-debugging">6. Wireshark -Deep Network Debugging</h3>
When requests just disappear, <a href="https://www.wireshark.org">Wireshark</a> is my last resort.
Pros: Lets you inspect network packets in detail.
Cons: Steep learning curve if you’re new.
Real-life use: Found a proxy misconfiguration dropping requests randomly -without this, I would still be guessing.
<h3 id="7-docker-logs--exec-debug-inside-containers">7. Docker Logs &#x26; Exec-Debug Inside Containers</h3>
For containerized apps, <code>docker logs</code> and <code>docker exec</code> are must-haves.
Pros: Lets you debug live containers easily.
Cons: Requires Docker know-how.
Real-life use: Jumped into a running container to check environment variables -found a missing config in minutes.
<h3 id="8-eslint--prettier--prevent-bugs-before-theyhappen">8. ESLint &#x26; Prettier -Prevent Bugs Before They Happen</h3>
Clean code = fewer bugs. ESLint catches silly mistakes, and Prettier keeps code consistent.
Pros: Prevents small bugs early.
Cons: Can feel noisy if rules aren’t set right.
Real-life use: ESLint once caught an unused variable that was silently breaking production.
<h3 id="9-log-monitoring-tools-graylog-kibana">9. Log Monitoring Tools (Graylog, Kibana)</h3>
When something breaks in production, logs tell the story. Centralized logging saves hours of guesswork.
Pros: View logs across services in one place.
Cons: Needs setup and server resources.
Real-life use: Traced a payment failure flow across microservices in minutes-without touching code.
<h3 id="10-rubber-duck-debugging">10. Rubber Duck Debugging</h3>
Rubber duck debugging is old but gold. Explaining the bug to someone else (or a literal rubber duck) works surprisingly well.
Pros: Free, instant clarity.
Cons: People may look at you weirdly.
Real-life use: Many times, just writing a Slack message describing the bug made the solution pop into my head before I hit send.
Editor’s Note-I am not affiliated with any of the tools, websites, or services mentioned in this article. All links and references are shared purely for educational purposes based on personal experience and to help fellow developers explore useful debugging tools.
Debugging is not just about fixing errors -it’s about having the right tools to make your life easier. Start with these, get comfortable and you will cut your debugging time in half.
Thanks for Reading 🚀🙏….don’t forget to drop your love ❤️
<h3 id="a-message-from-ourfounder">A message from our Founder</h3>
Hey, <a href="https://linkedin.com/in/sunilsandhu">Sunil</a> here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.
Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️
If you want to show some love, please take a moment to follow me on <a href="https://linkedin.com/in/sunilsandhu">LinkedIn</a>, <a href="https://tiktok.com/@messyfounder">TikTok</a>, <a href="https://instagram.com/sunilsandhu">Instagram</a>. You can also subscribe to our <a href="https://newsletter.plainenglish.io/">weekly newsletter</a>.
And before you go, don’t forget to clap and follow the writer️!

Top 10 Debugging Tools Every Developer Should Know

Top 10 Debugging Tools

It’s 2 a.m. I’m three Red Bulls deep, debugging a layout issue that appeared out of nowhere.

The CSS looks fine. The markup looks fine.

***My soul? Not so much.***

In desperation, I install *one* NPM package. Hit save. Boom. Fixed.

**And that’s when it hit me:** I don’t write JavaScript. I compose symphonies of dependencies.

> **My job? 10% writing code, 90% knowing what package to install.**

Here are the top 10 NPM packages that keep me (relatively) sane.

**Some are old friends. Some are new obsessions. All are absolutely essential.**

> [You can read the full story for free by clicking here](https://medium.com/@fireprogrammer/top-10-npm-packages-i-cant-live-without-e77d3e79e658?sk=43048f7374cc6a85c51a4bd32e0d44a5)

![](https://cdn-images-1.medium.com/max/1600/1*gBQh_aomj2IpCkNYy9R_fQ.png)

### 1. Prettier

> Because code formatting arguments are a waste of life.

Look, I’m not here to debate tabs vs spaces. Prettier doesn’t care, and neither should you.

It formats your code *one way* — the right way. Every time I save, my mess turns into beauty. It’s like auto-tune for code.

```
npm install --save-dev prettier
```

> Use it. Love it. Never look back.

### 2. ESLint

> Because you’re not as perfect as you think you are.

I used to believe I was a clean coder.

**ESLint showed me the truth:** I was writing spaghetti with extra cheese.

From catching unused variables to enforcing best practices, ESLint is like that brutally honest friend who tells you when your code stinks.

Bonus points for pairing it with Prettier.

```
npm install eslint --save-dev
```

### 3. dotenv

> Stop hardcoding secrets, you maniac.

If you’ve ever pushed an API key to GitHub, we need to talk.

`dotenv` lets you store environment variables in a `.env` file like a civilized developer.

```
npm install dotenv
```

Then just:

```
require('dotenv').config();console.log(process.env.MY_SECRET);
```

> Your future self will thank you.

### 4. axios

> Because `fetch` is fine, but axios is divine.

Yeah, yeah, `fetch` is built-in. But have you ever chained error handling with it?

**Axios just *works* better. Cleaner syntax.**

Built-in JSON handling. Interceptors. It’s like fetch, but with manners.

```
npm install axios
```

### 5. nodemon

> Because restarting your server manually is medieval.

Every time I used to `Ctrl + C` and restart the server, a piece of me died.

`nodemon` watches for changes and restarts your app for you. It’s the lazy dev’s best friend.

```
npm install --save-dev nodemon
```

Add it to your scripts and *stop suffering*.

### 6. chalk

> Because your terminal deserves a little flair.

Who said logs have to be boring? `chalk` lets you color your console output, and suddenly [`console.log`](https://console.log) feels like performance art.

Debugging becomes less dreadful when it looks like a rainbow.

```
npm install chalkconsole.log(chalk.green('Success!'));
```

### 7. lodash

> Because JavaScript has weird gaps.

Sure, JS has improved. But `lodash` still fills in the gaps with grace.

**Deep clones? Debounce? Throttle?** Yup.

It’s like carrying a Swiss army knife in your code.

```
npm install lodash
```

Also, `_.get()` alone is worth the price of admission.

### 8. date-fns

> Because [moment.js](https://moment.js) is a heavy dinosaur.

Need to format, parse, or manipulate dates without shipping a time machine worth of bytes?

`date-fns` is modern, modular, and elegant.

```
npm install date-fnsimport { format } from 'date-fns';console.log(format(new Date(), 'yyyy-MM-dd'));
```

### 9. jsonwebtoken

> Because auth is hard, but this helps.

User authentication isn’t optional.

`jsonwebtoken` makes signing and verifying JWTs *almost* painless. Almost.

```
npm install jsonwebtoken
```

> Remember: with great tokens comes great responsibility.

### 10. uuid

> Because IDs should be unique. Duh.

If you’re generating IDs manually, stop. `uuid` is fast, standards-compliant, and idiot-proof.

```
npm install uuidimport { v4 as uuidv4 } from 'uuid';console.log(uuidv4());
```

It’s like giving every object a digital passport.

### Honorable Mentions

* `cors`: **Because you love testing locally and hate errors.**
* `express`: B**ecause Fastify fans will still argue, but Express works just fine.**
* `react-icons`: **Because nobody wants to download SVGs manually anymore.**

### Finally, Use Tools, Not Crutches

> **Let’s be clear. These packages don’t write your code.**

> **They just make the job less of a grind.**

But be warned: NPM addiction is real. Don’t install packages just because you *can*.

Use the ones that make you faster, smarter, and slightly less likely to rage-quit.

> Agree? Disagree? Got a holy-grail package I missed?

> Smash that clap button, drop a comment, or roast me in the replies.

> I’m all ears (and caffeine).

Happy coding!

It’s 2 a.m. I’m three Red Bulls deep, debugging a layout issue that appeared out of nowhere.
The CSS looks fine. The markup looks fine.
My soul? Not so much.
In desperation, I install one NPM package. Hit save. Boom. Fixed.
And that’s when it hit me: I don’t write JavaScript. I compose symphonies of dependencies.
<blockquote>
My job? 10% writing code, 90% knowing what package to install.
</blockquote>
Here are the top 10 NPM packages that keep me (relatively) sane.
Some are old friends. Some are new obsessions. All are absolutely essential.
<blockquote>
<a href="https://medium.com/@fireprogrammer/top-10-npm-packages-i-cant-live-without-e77d3e79e658?sk=43048f7374cc6a85c51a4bd32e0d44a5">You can read the full story for free by clicking here</a>
</blockquote>
<img src="https://cdn-images-1.medium.com/max/1600/1*gBQh_aomj2IpCkNYy9R_fQ.png" alt="">
<h3 id="1-prettier">1. Prettier</h3>
<blockquote>
Because code formatting arguments are a waste of life.
</blockquote>
Look, I’m not here to debate tabs vs spaces. Prettier doesn’t care, and neither should you.
It formats your code one way — the right way. Every time I save, my mess turns into beauty. It’s like auto-tune for code.
<pre><code class="code-highlight">npm install --save-dev prettier
</code></pre>
<blockquote>
Use it. Love it. Never look back.
</blockquote>
<h3 id="2-eslint">2. ESLint</h3>
<blockquote>
Because you’re not as perfect as you think you are.
</blockquote>
I used to believe I was a clean coder.
ESLint showed me the truth: I was writing spaghetti with extra cheese.
From catching unused variables to enforcing best practices, ESLint is like that brutally honest friend who tells you when your code stinks.
Bonus points for pairing it with Prettier.
<pre><code class="code-highlight">npm install eslint --save-dev
</code></pre>
<h3 id="3-dotenv">3. dotenv</h3>
<blockquote>
Stop hardcoding secrets, you maniac.
</blockquote>
If you’ve ever pushed an API key to GitHub, we need to talk.
<code>dotenv</code> lets you store environment variables in a <code>.env</code> file like a civilized developer.
<pre><code class="code-highlight">npm install dotenv
</code></pre>
Then just:
<pre><code class="code-highlight">require('dotenv').config();console.log(process.env.MY_SECRET);
</code></pre>
<blockquote>
Your future self will thank you.
</blockquote>
<h3 id="4-axios">4. axios</h3>
<blockquote>
Because <code>fetch</code> is fine, but axios is divine.
</blockquote>
Yeah, yeah, <code>fetch</code> is built-in. But have you ever chained error handling with it?
Axios just works better. Cleaner syntax.
Built-in JSON handling. Interceptors. It’s like fetch, but with manners.
<pre><code class="code-highlight">npm install axios
</code></pre>
<h3 id="5-nodemon">5. nodemon</h3>
<blockquote>
Because restarting your server manually is medieval.
</blockquote>
Every time I used to <code>Ctrl + C</code> and restart the server, a piece of me died.
<code>nodemon</code> watches for changes and restarts your app for you. It’s the lazy dev’s best friend.
<pre><code class="code-highlight">npm install --save-dev nodemon
</code></pre>
Add it to your scripts and stop suffering.
<h3 id="6-chalk">6. chalk</h3>
<blockquote>
Because your terminal deserves a little flair.
</blockquote>
Who said logs have to be boring? <code>chalk</code> lets you color your console output, and suddenly <a href="https://console.log"><code>console.log</code></a> feels like performance art.
Debugging becomes less dreadful when it looks like a rainbow.
<pre><code class="code-highlight">npm install chalkconsole.log(chalk.green('Success!'));
</code></pre>
<h3 id="7-lodash">7. lodash</h3>
<blockquote>
Because JavaScript has weird gaps.
</blockquote>
Sure, JS has improved. But <code>lodash</code> still fills in the gaps with grace.
Deep clones? Debounce? Throttle? Yup.
It’s like carrying a Swiss army knife in your code.
<pre><code class="code-highlight">npm install lodash
</code></pre>
Also, <code>_.get()</code> alone is worth the price of admission.
<h3 id="8-date-fns">8. date-fns</h3>
<blockquote>
Because <a href="https://moment.js">moment.js</a> is a heavy dinosaur.
</blockquote>
Need to format, parse, or manipulate dates without shipping a time machine worth of bytes?
<code>date-fns</code> is modern, modular, and elegant.
<pre><code class="code-highlight">npm install date-fnsimport { format } from 'date-fns';console.log(format(new Date(), 'yyyy-MM-dd'));
</code></pre>
<h3 id="9-jsonwebtoken">9. jsonwebtoken</h3>
<blockquote>
Because auth is hard, but this helps.
</blockquote>
User authentication isn’t optional.
<code>jsonwebtoken</code> makes signing and verifying JWTs almost painless. Almost.
<pre><code class="code-highlight">npm install jsonwebtoken
</code></pre>
<blockquote>
Remember: with great tokens comes great responsibility.
</blockquote>
<h3 id="10-uuid">10. uuid</h3>
<blockquote>
Because IDs should be unique. Duh.
</blockquote>
If you’re generating IDs manually, stop. <code>uuid</code> is fast, standards-compliant, and idiot-proof.
<pre><code class="code-highlight">npm install uuidimport { v4 as uuidv4 } from 'uuid';console.log(uuidv4());
</code></pre>
It’s like giving every object a digital passport.
<h3 id="honorable-mentions">Honorable Mentions</h3>
<ul>
<li><code>cors</code>: Because you love testing locally and hate errors.</li>
<li><code>express</code>: Because Fastify fans will still argue, but Express works just fine.</li>
<li><code>react-icons</code>: Because nobody wants to download SVGs manually anymore.</li>
</ul>
<h3 id="finally-use-tools-notcrutches">Finally, Use Tools, Not Crutches</h3>
<blockquote>
Let’s be clear. These packages don’t write your code.
</blockquote>
<blockquote>
They just make the job less of a grind.
</blockquote>
But be warned: NPM addiction is real. Don’t install packages just because you can.
Use the ones that make you faster, smarter, and slightly less likely to rage-quit.
<blockquote>
Agree? Disagree? Got a holy-grail package I missed?
</blockquote>
<blockquote>
Smash that clap button, drop a comment, or roast me in the replies.
</blockquote>
<blockquote>
I’m all ears (and caffeine).
</blockquote>
Happy coding!

(And You Probably Shouldn’t Either If You Like Your Sanity)

Top 10 NPM Packages I Can’t Live Without

![](https://cdn-images-1.medium.com/max/1600/1*ALhuFd92u_JLADJZQgBDLA.jpeg)

Photo by [Ana Cruz](https://unsplash.com/@anacruzbaeza?utm_source=unsplash\&utm_medium=referral\&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/colorful?utm_source=unsplash\&utm_medium=referral\&utm_content=creditCopyText)

If you’re a software engineer with a Mac, like me, you probably work a lot in the Mac terminal. Working in the default Terminal is not very convenient to use, in this article I would like to talk about tools that will help improve your terminal.

#### Step 1. Homebrew

[Homebrew (brew)](https://brew.sh/) — package manager that allows you to install applications and software on macOS depending on the user’s desire. It is recommended for its simplicity and efficiency in terms of saving time and effort. 
To install, you need to run a command:

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

After installing, add it to the path replace 3 more commands will appear in the terminal that you will need to execute. In “\[username]” must be your actual username:

```
 echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/[username]/.zprofile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/[username]/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)"
```

***

> 💡 Speed up your blog creation with [**DifferAI**](https://differ.blog/differ-ai).

> Available for **free** exclusively on the **free and open blogging platform,** [**Differ**](https://differ.blog/)**.**

[**Introducing DifferAI**
*DifferAI is your writing co-pilot - seamlessly integrated within Differ's text editor. Powered by a Large Language…*&#x64;iffer.blog](https://differ.blog/differ-ai "https://differ.blog/differ-ai")

***

#### Step 2. iTerm2

The default Terminal app on MacOS does a great job. But there are better options. I am using iTerm2. It has a bunch of cool features like: ***autocomplete***, ***copy mode***, ***split panes***, ***search***, ***paste history*** and much more you can check their website [iTerm2](https://iterm2.com/) for more details.

To install, run:

```
brew install --cask iterm2
```

If you don’t have it installed, install git as well:

```
brew install git
```

Switch to iTerm2 for the remainder of this walkthrough.

***

#### Step 3. Oh My Zsh

[Oh My Zsh](https://ohmyz.sh/) — help to spruce up your terminal and make it more colorful. Run this to install [Oh My Zsh](https://ohmyz.sh/):

```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

> **How to get NVM to work with it**.

> Once it installs, exit out of the terminal window and open up a brand new terminal window. If you try running the command `nvm`, you might notice it doesn’t work. That’s because it’s not set as a plugin. To fix this, there are a couple of things you have to do.

> First, open up your *.zshrc* file to edit it:

> `vi ~/.zshrc`

> Use your down arrow key to scroll down in the file until you see `plugins=(git)`. Press the **i** key to go into edit mode. Adjust your cursor using your arrow keys and then add nvm in the parenthesis so it looks like this: `plugins=(git nvm)`. Make sure there is a space between `git` and `nvm`.

> When this is done, save and exit this file by doing the following: Press your escape key, then type `:wq`, and then press enter.

> Next, to refresh with your edits, run this command:

> `source ~/.zshrc`

***

#### Step 4. Theme for Oh My Zsh

The most popular scheme for [Oh My Zsh](https://ohmyz.sh/) is [PowerLevel10K](https://github.com/romkatv/powerlevel10k)

![](https://cdn-images-1.medium.com/max/1600/1*qJ2REoqCNUkIexZOIHPWJA.png)

Run this to install PowerLevel10K:

```
git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
```

Next open up your *.zshrc* file to edit it:

*`vi ~/.zshrc`*

Change the value of “*ZSH\_THEME*” as shown below:

```
ZSH_THEME="powerlevel10k/powerlevel10k"
```

Next, to refresh with your edits, run this command:

*`source ~/.zshrc`*

After which you should get the following message:

![](https://cdn-images-1.medium.com/max/1600/1*BMBxdW7kEMcLMqh41DMDFA.png)

Install the font by pressing “**y**” and then quit iTerm2.

Next, you will need to reopen ITerm2 and select the configuration and suggested options. If you do not like the selected configuration, you can change it by calling the command

*`p10k configure`*

![](https://cdn-images-1.medium.com/max/1600/1*Zf19nQU-w252BvEEW0I8vQ.gif)

**Change iTerm2 Colors to Custom Theme**

1. Open iTerm2 preferences
2. Go to Profiles > Colors
3. Import the downloaded color profile or change colors manually
4. Select the color profile

You can find other themes here: [Iterm2 Color Schemes](https://iterm2colorschemes.com/)

***

#### Step 5. ZSH Plugins

**Auto Suggestions plugin** — This plugin will look at your history and suggest stuff that you have typed earlier. So it differs from the default auto-completion in that it is not very smart. It just suggests what you have typed before, including typos and errors.

Install zsh-autosuggestions:

```
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
```

**Syntax Highlighting —** plugin is the syntax highlighter. It will highlight your command as you type:

Install zsh-syntax-highlighting:

```
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
```

Next need to open the “\~/.zshrc” file *`vi ~/.zshrc `*&#x61;nd modify the plugins line to what you see below.

```
plugins=(git nvm zsh-autosuggestions zsh-syntax-highlighting)
```

Load these new plugins by running:

*`source ~/.zshrc`*

Well, that’s all, now you have a more convenient and colorful terminal.

![](https://cdn-images-1.medium.com/max/1600/1*OR_XCYIg3fH8IXI2bE_XHQ.gif)

Hope it was useful for you!

Thanks for reading! See you soon. 😊

<img src="https://cdn-images-1.medium.com/max/1600/1*ALhuFd92u_JLADJZQgBDLA.jpeg" alt="">
Photo by <a href="https://unsplash.com/@anacruzbaeza?utm_source=unsplash&#x26;utm_medium=referral&#x26;utm_content=creditCopyText">Ana Cruz</a> on <a href="https://unsplash.com/s/photos/colorful?utm_source=unsplash&#x26;utm_medium=referral&#x26;utm_content=creditCopyText">Unsplash</a>
If you’re a software engineer with a Mac, like me, you probably work a lot in the Mac terminal. Working in the default Terminal is not very convenient to use, in this article I would like to talk about tools that will help improve your terminal.
<h4 id="step-1homebrew">Step 1. Homebrew</h4>
<a href="https://brew.sh/">Homebrew (brew)</a> — package manager that allows you to install applications and software on macOS depending on the user’s desire. It is recommended for its simplicity and efficiency in terms of saving time and effort. 
To install, you need to run a command:
<pre><code class="code-highlight">/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
</code></pre>
After installing, add it to the path replace 3 more commands will appear in the terminal that you will need to execute. In “[username]” must be your actual username:
<pre><code class="code-highlight"> echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/[username]/.zprofile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/[username]/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)"
</code></pre>
<hr>
<blockquote>
💡 Speed up your blog creation with <a href="https://differ.blog/differ-ai">DifferAI</a>.
</blockquote>
<blockquote>
Available for free exclusively on the free and open blogging platform, <a href="https://differ.blog/">Differ</a>.
</blockquote>
<a href="https://differ.blog/differ-ai" title="https://differ.blog/differ-ai">Introducing DifferAI
DifferAI is your writing co-pilot - seamlessly integrated within Differ's text editor. Powered by a Large Language…differ.blog</a>
<hr>
<h4 id="step-2iterm2">Step 2. iTerm2</h4>
The default Terminal app on MacOS does a great job. But there are better options. I am using iTerm2. It has a bunch of cool features like: autocomplete, copy mode, split panes, search, paste history and much more you can check their website <a href="https://iterm2.com/">iTerm2</a> for more details.
To install, run:
<pre><code class="code-highlight">brew install --cask iterm2
</code></pre>
If you don’t have it installed, install git as well:
<pre><code class="code-highlight">brew install git
</code></pre>
Switch to iTerm2 for the remainder of this walkthrough.
<hr>
<h4 id="step-3-oh-myzsh">Step 3. Oh My Zsh</h4>
<a href="https://ohmyz.sh/">Oh My Zsh</a> — help to spruce up your terminal and make it more colorful. Run this to install <a href="https://ohmyz.sh/">Oh My Zsh</a>:
<pre><code class="code-highlight">sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
</code></pre>
<blockquote>
How to get NVM to work with it.
</blockquote>
<blockquote>
Once it installs, exit out of the terminal window and open up a brand new terminal window. If you try running the command <code>nvm</code>, you might notice it doesn’t work. That’s because it’s not set as a plugin. To fix this, there are a couple of things you have to do.
</blockquote>
<blockquote>
First, open up your .zshrc file to edit it:
</blockquote>
<blockquote>
<code>vi ~/.zshrc</code>
</blockquote>
<blockquote>
Use your down arrow key to scroll down in the file until you see <code>plugins=(git)</code>. Press the i key to go into edit mode. Adjust your cursor using your arrow keys and then add nvm in the parenthesis so it looks like this: <code>plugins=(git nvm)</code>. Make sure there is a space between <code>git</code> and <code>nvm</code>.
</blockquote>
<blockquote>
When this is done, save and exit this file by doing the following: Press your escape key, then type <code>:wq</code>, and then press enter.
</blockquote>
<blockquote>
Next, to refresh with your edits, run this command:
</blockquote>
<blockquote>
<code>source ~/.zshrc</code>
</blockquote>
<hr>
<h4 id="step-4-theme-for-oh-myzsh">Step 4. Theme for Oh My Zsh</h4>
The most popular scheme for <a href="https://ohmyz.sh/">Oh My Zsh</a> is <a href="https://github.com/romkatv/powerlevel10k">PowerLevel10K</a>
<img src="https://cdn-images-1.medium.com/max/1600/1*qJ2REoqCNUkIexZOIHPWJA.png" alt="">
Run this to install PowerLevel10K:
<pre><code class="code-highlight">git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
</code></pre>
Next open up your .zshrc file to edit it:
<code>vi ~/.zshrc</code>
Change the value of “ZSH_THEME” as shown below:
<pre><code class="code-highlight">ZSH_THEME="powerlevel10k/powerlevel10k"
</code></pre>
Next, to refresh with your edits, run this command:
<code>source ~/.zshrc</code>
After which you should get the following message:
<img src="https://cdn-images-1.medium.com/max/1600/1*BMBxdW7kEMcLMqh41DMDFA.png" alt="">
Install the font by pressing “y” and then quit iTerm2.
Next, you will need to reopen ITerm2 and select the configuration and suggested options. If you do not like the selected configuration, you can change it by calling the command
<code>p10k configure</code>
<img src="https://cdn-images-1.medium.com/max/1600/1*Zf19nQU-w252BvEEW0I8vQ.gif" alt="">
Change iTerm2 Colors to Custom Theme
<ol>
<li>Open iTerm2 preferences</li>
<li>Go to Profiles > Colors</li>
<li>Import the downloaded color profile or change colors manually</li>
<li>Select the color profile</li>
</ol>
You can find other themes here: <a href="https://iterm2colorschemes.com/">Iterm2 Color Schemes</a>
<hr>
<h4 id="step-5-zshplugins">Step 5. ZSH Plugins</h4>
Auto Suggestions plugin — This plugin will look at your history and suggest stuff that you have typed earlier. So it differs from the default auto-completion in that it is not very smart. It just suggests what you have typed before, including typos and errors.
Install zsh-autosuggestions:
<pre><code class="code-highlight">git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
</code></pre>
Syntax Highlighting — plugin is the syntax highlighter. It will highlight your command as you type:
Install zsh-syntax-highlighting:
<pre><code class="code-highlight">git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
</code></pre>
Next need to open the “~/.zshrc” file <code>vi ~/.zshrc </code>and modify the plugins line to what you see below.
<pre><code class="code-highlight">plugins=(git nvm zsh-autosuggestions zsh-syntax-highlighting)
</code></pre>
Load these new plugins by running:
<code>source ~/.zshrc</code>
Well, that’s all, now you have a more convenient and colorful terminal.
<img src="https://cdn-images-1.medium.com/max/1600/1*OR_XCYIg3fH8IXI2bE_XHQ.gif" alt="">
Hope it was useful for you!
Thanks for reading! See you soon. 😊

How to Make Your Mac Terminal Better and Make It More Colorful

![](https://cdn-images-1.medium.com/max/1600/1*VoztV7vzJR5dobsx3f6ROQ.png)

Generated by the author with AI.

ShadCN looked great on paper, Cursor seemed smart enough, and I thought I could skip the boring frontend parts. just tell it what to build and let it do the rest.

Wrong.

Instead of a clean UI, I ended up with messy layouts, clashing styles, and components that just didn’t work together.

I almost gave up on building beautiful interfaces, until I discovered a new workflow powered by something called the [**ShadCN UI MCP server**](https://github.com/Jpisnice/shadcn-ui-mcp-server).

[**GitHub - Jpisnice/shadcn-ui-mcp-server: A mcp server to allow LLMS gain context about shadcn ui…**
*A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation …*&#x67;ithub.com](https://github.com/Jpisnice/shadcn-ui-mcp-server "https://github.com/Jpisnice/shadcn-ui-mcp-server")

And it completely changed everything.

***

### Why Most AI + UI Workflows Fail (And What Nobody Tells You)

Let’s get real: tools like Cursor and Claude Code are impressive, but when it comes to UI, they **lack one critical thing, context**.

They don’t understand how ShadCN components are *meant* to be used. So unless you guide them with a tight process, they’ll spit out half-baked UIs that barely hold together.

That’s what was happening to me over and over. Until I implemented a three-part system:

1. **Use the ShadCN UI MCP server** for context and structure
2. **Leverage demo patterns** for foolproof component usage
3. **Customize with TweakCN** for unique, beautiful design

Let’s walk through it step by step.

***

### Step 1: Set Up the MCP Server

The `shadcn-ui-mcp-server` fixes one of the biggest issues with AI-generated UIs: they often look off because they lack real context. This tool brings that missing context back, so your components actually work and look the way they’re supposed to.

Once it’s connected, you’re ready to build UIs that actually work the first time.

### Installation Tips:

* Use your [**GitHub personal access token**](https://github.com/settings/tokens) to bump up your request limit (5,000/hr vs. 60/hr)
* Don’t forget to **save your token,** you won’t see it again

![](https://cdn-images-1.medium.com/max/1600/1*zPOYQl5CSIzkfVhh6inXmw.png)

[GitHub Access Token](https://github.com/settings/tokens)

* Install `shadcn-ui-mcp-server`using npx (Recommended) the fastest way to get started.

```
# Basic usage (rate limited to 60 requests/hour)npx @jpisnice/shadcn-ui-mcp-server# With GitHub token for better rate limits (5000 requests/hour)npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
```

* Plug it into Cursor via settings (Cmd/Ctrl + Shift + j) → tools & integrations → New MCP Server
* Add MCP Server Configuration:

```
{  "mcpServers": {    "shadcn-ui": {      "command": "npx",      "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"]    }  }}
```

Once installed, you unlock these tools:

![](https://cdn-images-1.medium.com/max/1600/1*WdS5sMY1vSN8LyRb9kGbgw.png)

* `get_component:` Get component source code
* `get_component_demo:`Get component usage examples
* `list_components:` List all available components
* `get_component_metadata:` Get component dependencies and info
* `get_block:` Get block implementations (dashboard-01, calendar-01, etc...)
* `list_blocks:` List all available blocks with categories

***

The real secret? I wrote **rule files** that tell my AI agent *how* to behave when working with ShadCN.

```
I want to build a modern web interface using ShadCN components.
```

Goal:- A login page with standard email/password authentication.- After login, a dashboard displays a grid of cards — each representing an MCP server.- Clicking a card opens a detailed view with:  - A header image  - Metadata (name, status, region, version)  - Installation steps shown as bubble cards or collapsible UI

````
Please generate an implementation plan:- List the key components and pages to build- Suggest how to structure the project modularly- Recommend the tools/hooks/layout strategies to use for optimal UX
```

![](https://cdn-images-1.medium.com/max/1600/1*LlOwNe3jNVKbUFyJrJaMpw.png)

Claude generate implementation plan

After brainstorming you can create your rule file for cursor [`rule.mdc`](https://rule.mdc)

![](https://cdn-images-1.medium.com/max/1600/1*n-z3TGoHXCCuJrd0Aevhow.png)

[rule.md](https://rule.md) file

So here’s what I did next:

![](https://cdn-images-1.medium.com/max/1600/1*duvcxSnmjrDNefYM9KC6JQ.png)

I asked Claude to **take the entire structure and drop it into a** [**`task.md`**](https://task.md) **file**.

Then, I triggered the next phase with this simple instruction inside my Cursor project:

```
@rule.mdcPlease implement the UI plan outlined @task.md for our next.js app.  You can begin building directly from the defined structure.
```

![](https://cdn-images-1.medium.com/max/1600/1*dnnt3MpqJ2gnKpA-8PYkPQ.png)

And that’s when the magic happened.

Because the rule file had already been set up to pull in ShadCN components through the MCP server, Cursor followed the entire logic tree:

1. Parsed the structure from [`task.md`](https://task.md)
2. Identified each ShadCN component needed
3. Called the `get_component_demo` tool to check correct usage
4. Began assembling the full UI **block by block**

It literally turned a spec sheet into a living frontend without me lifting a finger.

This UI wasn’t cobbled together. It followed every rule and planning artifact we built into the system.

The result? A frontend that was not only fast to build but structurally sound and easy to extend.

![](https://cdn-images-1.medium.com/max/1200/1*UdFDsZqkauFK4q4HSteiAw.png)

![](https://cdn-images-1.medium.com/max/800/1*b7NYFK5gSujfF-tLkyuI2g.png)

![](https://cdn-images-1.medium.com/max/800/1*9NqvJiMDSJY7CxQFofR34Q.png)

![](https://cdn-images-1.medium.com/max/800/1*4aQlbl_vqwt-7eyK2Ejv1w.png)

![](https://cdn-images-1.medium.com/max/800/1*DVoq7hkryTLh8Mv8x8te6w.png)

![](https://cdn-images-1.medium.com/max/800/1*4LEuf0cVgzW1aD-MmDm91A.png)

***

### Step 3: Customize Everything with TweakCN

Let’s be honest, a lot of ShadCN sites look the same.

[**Beautiful themes for shadcn/ui - tweakcn | Theme Editor & Generator**
*Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom…*&#x74;weakcn.com](https://tweakcn.com/ "https://tweakcn.com/")

To break out of that cookie-cutter mold, I used **TweakCN**. It’s a visual theming tool for ShadCN components that lets you create a **custom UI look** in seconds.

You can:

* Change colors, spacings, borders, typography
* Preview every tweak live
* Export a theme and install it directly into your project

![](https://cdn-images-1.medium.com/max/1600/1*zPquCy07j4bo0kx2wbcacg.png)

[TweakCN](https://tweakcn.com/editor/theme)

If Cursor struggles to install it directly, just copy the custom code and paste it manually. Every variable you need is clearly listed.

***

### Real Talk: Why This Workflow Works (and Why You Should Try It)

Here’s what used to happen:

* I’d ask AI to build a UI → It’d mess up component usage
* I’d waste hours fixing CSS or rewriting layouts
* My site looked like a ShadCN clone factory

Now?

* I plan every UI with structured files
* I implement with context-rich tools
* I design with a visual editor
* And I rarely debug UI anymore

The result? My sites **look custom, feel professional**, and work across devices, the first time.

***

### TL;DR: Your ShadCN Setup Checklist:

* Install the MCP server and connect it to Cursor
* Add your GitHub access token for max performance
* Create rule files to guide AI behavior
* Use demo tools to prevent implementation errors
* Design with TweakCN for a unique, polished look

***

### Final Thoughts:

We’re entering an era where **context-driven AI workflows** are the only way to build fast and at scale. You wouldn’t write backend logic without testing and structure, so why treat your UI like it doesn’t matter?

Start with the MCP server. Design with intent. Let the AI assist you *with guardrails.*

Your users will notice. Your projects will look legit. And you’ll finally feel like your UI matches the quality of your code.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!
````

<img src="https://cdn-images-1.medium.com/max/1600/1*VoztV7vzJR5dobsx3f6ROQ.png" alt="">
Generated by the author with AI.
ShadCN looked great on paper, Cursor seemed smart enough, and I thought I could skip the boring frontend parts. just tell it what to build and let it do the rest.
Wrong.
Instead of a clean UI, I ended up with messy layouts, clashing styles, and components that just didn’t work together.
I almost gave up on building beautiful interfaces, until I discovered a new workflow powered by something called the <a href="https://github.com/Jpisnice/shadcn-ui-mcp-server">ShadCN UI MCP server</a>.
<a href="https://github.com/Jpisnice/shadcn-ui-mcp-server" title="https://github.com/Jpisnice/shadcn-ui-mcp-server">GitHub - Jpisnice/shadcn-ui-mcp-server: A mcp server to allow LLMS gain context about shadcn ui…
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation …github.com</a>
And it completely changed everything.
<hr>
<h3 id="why-most-ai--ui-workflows-fail-and-what-nobody-tellsyou">Why Most AI + UI Workflows Fail (And What Nobody Tells You)</h3>
Let’s get real: tools like Cursor and Claude Code are impressive, but when it comes to UI, they lack one critical thing, context.
They don’t understand how ShadCN components are meant to be used. So unless you guide them with a tight process, they’ll spit out half-baked UIs that barely hold together.
That’s what was happening to me over and over. Until I implemented a three-part system:
<ol>
<li>Use the ShadCN UI MCP server for context and structure</li>
<li>Leverage demo patterns for foolproof component usage</li>
<li>Customize with TweakCN for unique, beautiful design</li>
</ol>
Let’s walk through it step by step.
<hr>
<h3 id="step-1-set-up-the-mcpserver">Step 1: Set Up the MCP Server</h3>
The <code>shadcn-ui-mcp-server</code> fixes one of the biggest issues with AI-generated UIs: they often look off because they lack real context. This tool brings that missing context back, so your components actually work and look the way they’re supposed to.
Once it’s connected, you’re ready to build UIs that actually work the first time.
<h3 id="installation-tips">Installation Tips:</h3>
<ul>
<li>Use your <a href="https://github.com/settings/tokens">GitHub personal access token</a> to bump up your request limit (5,000/hr vs. 60/hr)</li>
<li>Don’t forget to save your token, you won’t see it again</li>
</ul>
<img src="https://cdn-images-1.medium.com/max/1600/1*zPOYQl5CSIzkfVhh6inXmw.png" alt="">
<a href="https://github.com/settings/tokens">GitHub Access Token</a>
<ul>
<li>Install <code>shadcn-ui-mcp-server</code>using npx (Recommended) the fastest way to get started.</li>
</ul>
<pre><code class="code-highlight"># Basic usage (rate limited to 60 requests/hour)npx @jpisnice/shadcn-ui-mcp-server# With GitHub token for better rate limits (5000 requests/hour)npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
</code></pre>
<ul>
<li>Plug it into Cursor via settings (Cmd/Ctrl + Shift + j) → tools &#x26; integrations → New MCP Server</li>
<li>Add MCP Server Configuration:</li>
</ul>
<pre><code class="code-highlight">{ "mcpServers": { "shadcn-ui": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "ghp_your_token_here"] } }}
</code></pre>
Once installed, you unlock these tools:
<img src="https://cdn-images-1.medium.com/max/1600/1*WdS5sMY1vSN8LyRb9kGbgw.png" alt="">
<ul>
<li><code>get_component:</code> Get component source code</li>
<li><code>get_component_demo:</code>Get component usage examples</li>
<li><code>list_components:</code> List all available components</li>
<li><code>get_component_metadata:</code> Get component dependencies and info</li>
<li><code>get_block:</code> Get block implementations (dashboard-01, calendar-01, etc...)</li>
<li><code>list_blocks:</code> List all available blocks with categories</li>
</ul>
<hr>
The real secret? I wrote rule files that tell my AI agent how to behave when working with ShadCN.
<pre><code class="code-highlight">I want to build a modern web interface using ShadCN components.
</code></pre>
Goal:- A login page with standard email/password authentication.- After login, a dashboard displays a grid of cards — each representing an MCP server.- Clicking a card opens a detailed view with: - A header image - Metadata (name, status, region, version) - Installation steps shown as bubble cards or collapsible UI
<pre><code class="code-highlight">Please generate an implementation plan:- List the key components and pages to build- Suggest how to structure the project modularly- Recommend the tools/hooks/layout strategies to use for optimal UX
```

![](https://cdn-images-1.medium.com/max/1600/1*LlOwNe3jNVKbUFyJrJaMpw.png)

Claude generate implementation plan

After brainstorming you can create your rule file for cursor [`rule.mdc`](https://rule.mdc)

![](https://cdn-images-1.medium.com/max/1600/1*n-z3TGoHXCCuJrd0Aevhow.png)

[rule.md](https://rule.md) file

So here’s what I did next:

![](https://cdn-images-1.medium.com/max/1600/1*duvcxSnmjrDNefYM9KC6JQ.png)

I asked Claude to **take the entire structure and drop it into a** [**`task.md`**](https://task.md) **file**.

Then, I triggered the next phase with this simple instruction inside my Cursor project:

```
@rule.mdcPlease implement the UI plan outlined @task.md for our next.js app. You can begin building directly from the defined structure.
```

![](https://cdn-images-1.medium.com/max/1600/1*dnnt3MpqJ2gnKpA-8PYkPQ.png)

And that’s when the magic happened.

Because the rule file had already been set up to pull in ShadCN components through the MCP server, Cursor followed the entire logic tree:

1. Parsed the structure from [`task.md`](https://task.md)
2. Identified each ShadCN component needed
3. Called the `get_component_demo` tool to check correct usage
4. Began assembling the full UI **block by block**

It literally turned a spec sheet into a living frontend without me lifting a finger.

This UI wasn’t cobbled together. It followed every rule and planning artifact we built into the system.

The result? A frontend that was not only fast to build but structurally sound and easy to extend.

![](https://cdn-images-1.medium.com/max/1200/1*UdFDsZqkauFK4q4HSteiAw.png)

![](https://cdn-images-1.medium.com/max/800/1*b7NYFK5gSujfF-tLkyuI2g.png)

![](https://cdn-images-1.medium.com/max/800/1*9NqvJiMDSJY7CxQFofR34Q.png)

![](https://cdn-images-1.medium.com/max/800/1*4aQlbl_vqwt-7eyK2Ejv1w.png)

![](https://cdn-images-1.medium.com/max/800/1*DVoq7hkryTLh8Mv8x8te6w.png)

![](https://cdn-images-1.medium.com/max/800/1*4LEuf0cVgzW1aD-MmDm91A.png)

***

### Step 3: Customize Everything with TweakCN

Let’s be honest, a lot of ShadCN sites look the same.

[**Beautiful themes for shadcn/ui - tweakcn | Theme Editor &#x26; Generator**
*Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom…*&#x26;#x74;weakcn.com](https://tweakcn.com/ "https://tweakcn.com/")

To break out of that cookie-cutter mold, I used **TweakCN**. It’s a visual theming tool for ShadCN components that lets you create a **custom UI look** in seconds.

You can:

* Change colors, spacings, borders, typography
* Preview every tweak live
* Export a theme and install it directly into your project

![](https://cdn-images-1.medium.com/max/1600/1*zPquCy07j4bo0kx2wbcacg.png)

[TweakCN](https://tweakcn.com/editor/theme)

If Cursor struggles to install it directly, just copy the custom code and paste it manually. Every variable you need is clearly listed.

***

### Real Talk: Why This Workflow Works (and Why You Should Try It)

Here’s what used to happen:

* I’d ask AI to build a UI → It’d mess up component usage
* I’d waste hours fixing CSS or rewriting layouts
* My site looked like a ShadCN clone factory

Now?

* I plan every UI with structured files
* I implement with context-rich tools
* I design with a visual editor
* And I rarely debug UI anymore

The result? My sites **look custom, feel professional**, and work across devices, the first time.

***

### TL;DR: Your ShadCN Setup Checklist:

* Install the MCP server and connect it to Cursor
* Add your GitHub access token for max performance
* Create rule files to guide AI behavior
* Use demo tools to prevent implementation errors
* Design with TweakCN for a unique, polished look

***

### Final Thoughts:

We’re entering an era where **context-driven AI workflows** are the only way to build fast and at scale. You wouldn’t write backend logic without testing and structure, so why treat your UI like it doesn’t matter?

Start with the MCP server. Design with intent. Let the AI assist you *with guardrails.*

Your users will notice. Your projects will look legit. And you’ll finally feel like your UI matches the quality of your code.

### A message from our Founder

**Hey,** [**Sunil**](https://linkedin.com/in/sunilsandhu) **here.** I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? **We don’t receive any funding, we do this to support the community. ❤️**

If you want to show some love, please take a moment to **follow me on** [**LinkedIn**](https://linkedin.com/in/sunilsandhu)**,** [**TikTok**](https://tiktok.com/@messyfounder), [**Instagram**](https://instagram.com/sunilsandhu). You can also subscribe to our [**weekly newsletter**](https://newsletter.plainenglish.io/).

And before you go, don’t forget to **clap** and **follow** the writer️!
</code></pre>

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

How to Thrive as a Programmer: 4 Skill-Building Tips for Success

How to Read an Excel File in C# ( .NET Guide)

Looking for an exciting and secure career path to follow? Machine learning may be just for you. Here’s how it’s changing tech careers in general.

How Machine Learning is Changing Tech Careers and Java Jobs

AI for Beginners: How Machine Learning is Changing Tech Careers and Java Jobs

A comparison of iTextSharp, IronPDF, Aspose.PDF, and PuppeteerSharp

Programming

Top 7 Debugging Tools Every Developer Should Master in 2025

When Code Meets Chance: How Developers Build the Illusion of Randomness

Top 10 Debugging Tools Every Developer Should Know

Top 10 NPM Packages I Can’t Live Without

How to Make Your Mac Terminal Better and Make It More Colorful

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

How to Thrive as a Programmer: 4 Skill-Building Tips for Success

How to Read an Excel File in C# ( .NET Guide)

AI for Beginners: How Machine Learning is Changing Tech Careers and Java Jobs

Top C# PDF Libraries: A Side-by-Side Comparison for .NET Developers

Main Menu

Follow Us

Programming

Top 7 Debugging Tools Every Developer Should Master in 2025

When Code Meets Chance: How Developers Build the Illusion of Randomness

Top 10 Debugging Tools Every Developer Should Know

Top 10 NPM Packages I Can’t Live Without

How to Make Your Mac Terminal Better and Make It More Colorful

I Stopped Writing UI Code. Now I Let MCP Servers Build My Interfaces with ShadCN

How to Thrive as a Programmer: 4 Skill-Building Tips for Success

How to Read an Excel File in C# ( .NET Guide)

AI for Beginners: How Machine Learning is Changing Tech Careers and Java Jobs

Top C# PDF Libraries: A Side-by-Side Comparison for .NET Developers