Developer Experience Using Cursor.ai and Claude.ai - Part 2: Benefits

Scoping a project

The first major benefit that Claude.ai has provided is the ability to quickly generate an initial project scope document. It reminds me of important details that are sometimes overlooked when estimating the time and cost of a project or task.

Please write a specification document for a pizza delivery website, has user accounts, manage orders, real-time order tracking, menu management, payment handling in the Netherlands and SEO optimizations and powered by Prismic

The prompt will outline nearly everything I need to consider, including services, integrations, and easily overlooked details when focusing on complex features, such as SEO.

By using Claude as a foundation to template large tasks, I can provide more accurate and meaningful estimates faster and rely on fewer iterations during scope and planning meetings.

Notice how I avoid including specific details or features that might be sensitive to the project—those are elements I'll fill in manually.

Thinking of the problem more deeply

AI works well because it demonstrates the 'garbage in, garbage out' principle—if you don't provide clear and consistent information, Claude will likely return poor results.

This dynamic encourages you to think more deeply about the problem and how to approach solving it. The quality of the answers you receive directly reflects your approach to framing the problem.

If we first look at a bad prompt: I need to fix the product listing page, it first shows out of date content and then shows the real content afterwards. This explains the problem, but vaguely, and might not lead to the right solution.

Let's look at explaining the issue better: I want to refactor this screen as it relies on stale data initially while the background fetch is happening. Whenever there are query parameters in the URL, I want the client-side fetch to complete first before showing any content. Please use the loading component in our /core/components folder - /core/components/loader.js

Here, we've given the AI more context about the root of the problem, the considerations it needs to make, and how to handle the request gracefully.

We also avoid flooding the request with too much information by scoping the context to only the necessary files.

Considering improvements

This section should be taken with a grain of salt, as there's often missing context and personal preferences that significantly affect what constitutes an actual improvement.

That said, what I appreciate about Cursor AI is the ability to provide it with the global context of my codebase and ask for specific improvements: How can I improve the SEO of this project? The AI then returns useful pointers and suggestions. For these types of requests, I find the Chat/Ask option more effective than the Agent.

This is still a sensitive area—a suggested change might technically be an improvement but may not yield any meaningful benefits. People can easily argue, "Claude suggested it, so it must be the way forward." Consider a simple line like: const ids = projects.map(id => id); In React, you might want to memoize this to prevent recalculation on every render, but if your projects array only contains about 10 entries, the cost of memoization might exceed the cost of the operation itself.

I list this as a benefit because of the "considerations" aspect—in a healthy, balanced team, these suggestions can spark valuable discussions leading to knowledge sharing and identifying areas for improvement within your team's practices, such as standards to include in your definition of done.

Onboarding

The feeling of entering a new codebase has never really changed for me, even after 10+ years of software development. Each project contains a history of decisions, conversations, and legacy code all bundled together.

I strive to do meaningful work from day one, but onboarding can be time-consuming regardless of experience. I've found Cursor to be an excellent tool for making this process faster and more efficient.

Here are some commands that can accelerate onboarding:

Please provide for me in an MD file a breakdown of this project, folder structure, links to document files, component breakdowns and where they're used

I'm looking for how the data gets into the shoppingCart.js file from the header, can you explain the prop drilling path or how data is shared here?

Using these alongside your regular onboarding process allows you to ramp up quickly and gain a better feel for the codebase and project.

Learning

This section deserves a quick disclaimer: the benefit of using AI to learn coding largely depends on the mentality of the person using it.

Using Cursor or AI to simply generate a working project without taking time to understand what's happening, why it works, and whether the AI-suggested code is appropriate will leave you at a disadvantage.

If you're using Cursor to adopt a new library, framework, or language, approach it the same way you'd learn anything else: focus on understanding the fundamentals.

Use Cursor to help you understand why certain approaches don't work, why others do, and what alternative solutions might solve your problem. This creates a learning experience similar to having a semi-experienced developer guiding you along the way.

Personally, I had some experience with PHP 8+ years ago. In recent months, I've been picking it up again, and Cursor has significantly helped me understand the changes in PHP and modern approaches that have evolved over those 8 years.

Back-end & Design systems

One of the most valuable outcomes from incorporating AI into our team has been its impact on cross-functional collaboration. Cursor has demonstrated a remarkable ability to understand our design system components and accurately apply them to new screens and functionality. This has created a bridge between our front-end design principles and back-end implementation that wasn't previously possible.

With this capability, our back-end developers can now rapidly build out new features with minimal guidance from the front-end team. The result is a more efficient workflow where front-end developers can focus their expertise on iterative UX improvements and the ongoing maintenance and evolution of our design system. This division of labor has accelerated our development cycle while maintaining visual and functional consistency across the application.