Misguided Prompts and Better Outcomes: Learning by Doing (Wrong)

egretting Some Tool Choices I have to admit something — my struggles with getting the spreadsheet navigation to function correctly left me with a bad taste in my mouth. It took much more effort than I anticipated. Some of that effort was just due to my learning and refining my prompts with Cursor. Some of the effort was really due to a lack of a cohesive plan; when I first started the project, I was not clear on how I wanted transaction entry to function, which is arguably the most important function of the app. If I had been more clear up front (or put another way, put more thought into it beforehand and documented my expectations), it probably would have taken less time. At one point, I became so frustrated that I took a step back and created a rather lengthy markdown file to document my expected behaviors of the page, and asked Cursor to start over based on these new requirements. I had hoped the more thorough context would result in a better initial implementation, but to be honest, it was little better than what I had before. In the end, it was just continuous iteration that finally got me to something approaching usable. Or was it? Before I started this project, I asked LLMs for feedback on suggested frameworks. Based on various responses, I ultimately went with React because I thought that might directly translate into something I could use in future professional endeavors. When I thought back to my experience, it occurred to me that implementing spreadsheet-like navigation may be more or less difficult depending on the framework. A New Approach So I took a completely different approach: I asked Claude (not in Cursor) to generate a functioning spreadsheet-like interface using Vue.js. For this exercise, I just wanted to see a working demo — not something I wanted to incorporate into my existing codebase. I wanted to examine the output for relative complexity, and I wanted to see how close I could get to "one-shotting" it with a better prompt. I decided that perhaps I had tripped up Cursor previously by even using the term "spreadsheet," because that implies all kinds of things I do not need, such as: The ability to resize columns Cell merging/splitting functions Data filtering Cell formulas (the actual purpose of a spreadsheet) Therefore, I explicitly focused on navigation in my prompt, and also excluded these functions: I want to build a simple application for entering financial transactions. I have a version based on React and it's more complicated than I want. I would like to do something with Vue.js. The primary interface needs to render and function like a spreadsheet; effectively a table where each row is a transaction. That means keyboard-based navigation (arrow keys, tab/reverse tab). I am not implementing a full spreadsheet; I don't need support for dynamic formulas, or splitting/merging cells, etc. The columns will be fixed. Can you please generate a very basic single page based on Vue.js that has spreadsheet-like navigation and rendering behavior (light borders around each cell, a thicker border to show focus, etc). Populate with a few rows of sample data. There should be one column whose value is calculated dynamically based on the data in the other cells in all rows (like a running balance). The result was a self-contained HTML file at approximately 350 lines, with the first 100 or so being styling. The table definition was maybe another 100 lines, and the rest was just basic JavaScript and easy to understand. I am not making a direct Vue vs. React comparison — that’s just silly and not the point of this exercise. In terms of actual function, it was almost exactly what I was looking for. In the few minutes it took me to write out the prompt, wait for the response, and evaluate the outcome, I was already at a better place than I had been days before after literal hours of work. Here’s a static screenshot for comparison: Retrospective – What Went Wrong? Why did it take hours and multiple attempts when I was doing this with Cursor and React, versus basically being able to one-shot it with Claude? I mentioned several things in my opening paragraph. Do I believe the framework really made the difference? No. All the time I spent trying to tease out the correct functionality from Cursor was my fault — mostly my inexperience. Prompting, and using a tool like Cursor, is itself a skill. Like any skill, it needs practice. So that's what I'm doing now: I am trying to spend some time each day exploring different scenarios within Cursor. I will share more as I continue with this process.

May 9, 2025 - 17:16

Misguided Prompts and Better Outcomes: Learning by Doing (Wrong)

egretting Some Tool Choices
I have to admit something — my struggles with getting the spreadsheet navigation to function correctly left me with a bad taste in my mouth. It took much more effort than I anticipated. Some of that effort was just due to my learning and refining my prompts with Cursor. Some of the effort was really due to a lack of a cohesive plan; when I first started the project, I was not clear on how I wanted transaction entry to function, which is arguably the most important function of the app. If I had been more clear up front (or put another way, put more thought into it beforehand and documented my expectations), it probably would have taken less time.

At one point, I became so frustrated that I took a step back and created a rather lengthy markdown file to document my expected behaviors of the page, and asked Cursor to start over based on these new requirements. I had hoped the more thorough context would result in a better initial implementation, but to be honest, it was little better than what I had before. In the end, it was just continuous iteration that finally got me to something approaching usable.

Or was it?

Before I started this project, I asked LLMs for feedback on suggested frameworks. Based on various responses, I ultimately went with React because I thought that might directly translate into something I could use in future professional endeavors. When I thought back to my experience, it occurred to me that implementing spreadsheet-like navigation may be more or less difficult depending on the framework.

A New Approach

So I took a completely different approach: I asked Claude (not in Cursor) to generate a functioning spreadsheet-like interface using Vue.js. For this exercise, I just wanted to see a working demo — not something I wanted to incorporate into my existing codebase. I wanted to examine the output for relative complexity, and I wanted to see how close I could get to "one-shotting" it with a better prompt.

I decided that perhaps I had tripped up Cursor previously by even using the term "spreadsheet," because that implies all kinds of things I do not need, such as:

The ability to resize columns
Cell merging/splitting functions
Data filtering
Cell formulas (the actual purpose of a spreadsheet)

Therefore, I explicitly focused on navigation in my prompt, and also excluded these functions:

I want to build a simple application for entering financial
transactions. I have a version based on React and it's more
 complicated than I want. I would like to do something with 
Vue.js.

The primary interface needs to render and function like a
 spreadsheet; effectively a table where each row is a 
transaction. That means keyboard-based navigation 
(arrow keys, tab/reverse tab). 
I am not implementing a full spreadsheet; 
I don't need support for dynamic formulas, or 
splitting/merging cells, etc. The columns will be fixed. 

Can you please generate a very basic single page based on Vue.js 
that has spreadsheet-like navigation and rendering behavior 
(light borders around each cell, a thicker border to show focus, etc). 
Populate with a few rows of sample data.

There should be one column whose value is calculated dynamically
based on the data in the other cells in all rows (like a running balance).
The result was a self-contained HTML file at approximately 350 lines, with the first 100 or so being styling. The table definition was maybe another 100 lines, and the rest was just basic JavaScript and easy to understand. I am not making a direct Vue vs. React comparison — that’s just silly and not the point of this exercise. In terms of actual function, it was almost exactly what I was looking for. In the few minutes it took me to write out the prompt, wait for the response, and evaluate the outcome, I was already at a better place than I had been days before after literal hours of work.

Here’s a static screenshot for comparison:

Retrospective – What Went Wrong?

Why did it take hours and multiple attempts when I was doing this with Cursor and React, versus basically being able to one-shot it with Claude?

I mentioned several things in my opening paragraph. Do I believe the framework really made the difference? No. All the time I spent trying to tease out the correct functionality from Cursor was my fault — mostly my inexperience. Prompting, and using a tool like Cursor, is itself a skill. Like any skill, it needs practice.

So that's what I'm doing now: I am trying to spend some time each day exploring different scenarios within Cursor. I will share more as I continue with this process.