Recently, I posted about how I started using MCP tools in Cursor to speed up development and automated testing. Since then, I’ve gone a step further and created a repository of example rules I use when developing and testing both PHP and React apps:

👉 Cursor-Rules on GitHub

Cursor-Rules/
├── PHP/
│   ├── php.mdc          # PHP coding standards and best practices
│   └── testing.mdc      # PHP testing guidelines
├── React/
│   ├── react.mdc        # React development best practices
│   └── testing.mdc      # React testing guidelines
└── README.md           # This file

These rules mainly focus on coding structure and testing.

Applying the Rules to Emerald Notes

For PR #6 of Emerald Notes, I tried combining these rules with a development plan to improve the note editor.

📄 Plan: Editor Improvements (8/23/25)

Description: This is a development plan to improve the editor for notes Goal: Once this plan is finished, the editor should increased functionality, as well as not should display the same in view mode as the editor

Background Context: So far the editor has the following features:

Simple text formatting like bold, italics, strike-through and color
Images and links
unordered and ordered lists
code blocks and tables(basic)
Steps:

Step 1: Plan improvements to the editor, figure out what features would be useful to add. Ensure these features are feasible. Suggestions: - Make the table features more useful and improve the usability - Figure out how to make layout changes and content positioning easier. For example center, left and right align, image anchoring
Step 2: Propose changes to the users, give each major feature a step so the user change respond with approval or tweaks
Step 3: Implement each feature separately, making sure to use an rules or tools you have at your disposal to test
Step 4: Repeat step 3 for each feature
Step 5; After each feature is implement, please test for a final time to make sure each feature works together, then summarize the results.

The goal was to add new features like better tables, text alignment, image positioning, and layout controls.

It started out very promising, following me request by taking in my suggestions and creating a plan to add features:

I'll execute the plan to improve the editor for notes. Let me start by examining the current editor implementation and then proceed with the steps outlined in the plan.

Read file: src/components/DualEditor.tsx
Now let me examine the current editor implementation to understand what features are already available and what improvements can be made.

## Step 1: Plan Improvements ✅

I've analyzed the current editor implementation and identified several areas for improvement. The editor already has a solid foundation with text formatting, images, links, lists, code blocks, and basic tables.

## Step 2: Propose Changes

I've planned **4 major feature improvements** that will significantly enhance the editor's functionality. Here are the proposed features:

### **Feature 1: Enhanced Table Functionality**
- **Table cell background colors** - Add color picker for individual cells
- **Improved table styling** - Better borders, spacing, and visual design
- **Table header styling options** - Enhanced header appearance
- **Better table insertion** - Dialog to select table size before insertion
- **Table cell padding controls** - Adjust spacing within cells

### **Feature 2: Text Alignment and Layout Controls**
- **Text alignment buttons** - Left, center, right, and justify alignment
- **Horizontal rules/dividers** - Insert clean separators between content
- **Text indentation controls** - Indent and outdent text blocks
- **Improved paragraph spacing** - Better control over content spacing

### **Feature 3: Image Positioning and Anchoring**
- **Image alignment options** - Left, center, right alignment for images
- **Text wrapping around images** - Float images with text flow
- **Image size controls** - Resize images with proper aspect ratio
- **Image caption support** - Add descriptive text below images

### **Feature 4: Enhanced Content Positioning**
- **Margin/padding controls** - Adjust spacing around block elements
- **Better block positioning** - More control over element placement
- **Floating elements** - Advanced positioning for complex layouts

---

**Please review these proposed features and let me know:**
1. Which features you'd like me to implement first
2. If you'd like any modifications to the proposed features
3. If you'd like me to proceed with all features in the order listed

Each feature will be implemented separately and tested thoroughly before moving to the next one.

Once I approved these changes, it did follow the instructions however the results where less then satisfactory.

Results

Here’s how it went when I combined my rules + plan with Cursor:

Feature 1: Enhanced Tables

  • ✅ Rounded table corners were added.
  • ❌ Background colors only worked through an alert box that asked for a text input (instead of a proper color picker).
  • ❌ A color picker was added to the main editor toolbar, but it didn’t actually do anything. (this was mention in the result summary the agent created)

Feature 2: Text Alignment & Layout

  • ✅ A horizontal divider was successfully added.
  • ❌ Alignment icons were confusing — one of them didn’t even seem to map to a real alignment option.
  • ❌ The UI felt inconsistent, with icons that didn’t match their function between text and image alignment.
Menu items for text alignment

Feature 3: Image Positioning & Anchoring

  • ✅ Resizing works, but again it relies on an alert box where you type in a width value.
  • ❌ Captions don’t display properly — it just prompts for text but doesn’t render it under the image.
  • ❌ Alt text isn’t updated when adding captions.


Feature 4: Content Positioning

  • ❌ This one was a complete failure.
  • Tables and code blocks can’t be moved at all.
  • Images are draggable, but instead of moving them, Cursor duplicates the image when you release it.

Takeaways / Lessons Learned

While Cursor followed my plan, the results weren’t production-ready. A few key lessons:

  • Be specific about UX – React apps shouldn’t use system alert boxes. My rules need to explicitly forbid that.
  • Define styling expectations – Alignment and image controls should have clear, distinct UI.
  • Improve testing rules – Mentioning Playwright isn’t enough; I need to require full feature testing before marking a step complete.

📄 Full results: Editor Improvements Results

Final Thoughts

This experiment showed me that MCP rules + plans can guide Cursor, but the quality of the rules matters just as much as the code. With clearer UX and testing requirements, I think the next iteration will be much closer to usable.