Cursor Deep Dive: How I Built 100+ Web Tools in 24 Hours with One .cursorrules File

WebUtilityKit.com | GitHub: View Repository

⏱️ TL;DR

Leveraging the powerful AI pair programming capabilities of Cursor, I built an online platform containing over 100 practical web utilities in less than 24 hours.

Project Highlights: Pure Frontend, No Backend, No Frameworks (No React/Vue), Zero npm dependencies.

The Secret: Relying on Vanilla JS, Tailwind CSS, and a carefully crafted .cursorrules file—which successfully turned AI into the architect that knows me best.

---

1. The Origin: From Prompt to Execution

It all started with a simple question I asked Claude inside Cursor:

"List 100 common web utilities that can be implemented purely on the client-side."

In seconds, the AI threw a detailed list at me: JSON Formatter, Image Compressor, Strong Password Generator, Unit Converters, PDF Tools... everything I could imagine.

Immediately, I asked the core architectural question:

"What is the simplest way to implement all of these with maximum code reuse?"

The AI's answer was direct: Build a "Design System as Code".

---

2. The Core: The .cursorrules File

Many people misunderstand AI coding assistants, treating every prompt as a one-off "Q&A". But the real power of AI lies in Context Persistence.

I spent the first 2 hours polishing the .cursorrules file. But I didn't type these 300+ lines myself.

The Trick: Meta-Prompting ("Inception" Style)

I didn't start from scratch. I told Cursor:

"I want to build a pure Vanilla JS + Tailwind project. The code style should be minimal like Linear, and backend code is strictly forbidden. Please draft a perfect .cursorrules file for me, including tech stack constraints, style guides, and SEO requirements."

The AI instantly generated 90% of the content. This file became the "DNA" of the project, defining:

• STRICT Stack: No React/Vue allowed. Browser Native APIs only (FileReader, Blob, etc.).
• UI/UX Standards: No borders on containers. Cards must have a "floating" feel. Unified color variables.
• Code Norms: Enforce semantic HTML. No inline styles.

With this file, whenever I said "Make a Base64 Encoder," the AI didn't need me to explain the layout, button styles, or SEO structure again. It automatically read the rules and executed them perfectly.

---

3. The 24-Hour Sprint Retrospective

• 🔴 Hours 1-2: Infrastructure
  • Generated and fine-tuned the .cursorrules design system via AI.
  • Established the directory structure and created shared Header/Footer components.
• 🟡 Hours 3-8: Prototyping (The First 30)
  • Efficiency: ~10 mins per tool.
  • Strategy: Used Tailwind CDN to validate ideas quickly.
  • Output: Completed basic tools like JSON Formatter and Password Generator.
• ⚫ Hours 9-12: Architecture Crisis
  • Hit a major snag migrating from Tailwind CDN to CLI (detailed below). Had to stop and refactor.
• 🟢 Hours 13-20: Explosive Output (The Remaining 70)
  • Efficiency: An amazing ~5 mins per tool.
  • Strategy: Switched to Tailwind CLI and optimized prompt templates. Because the rules were clear, the AI code generation was almost "one-shot" perfect.
• 🔵 Hours 21-24: Polish & Deploy
  • Bulk addition of SEO Meta tags.
  • Configured Cloudflare Pages for automated deployment.
  • Mobile adaptation testing.

---

4. The Trap: Tailwind CDN to CLI Migration

The development process wasn't all smooth sailing. The biggest pitfall was switching the build method.

During the prototyping phase, for speed, the code generated by AI heavily used custom syntax compatible with the CDN mode:

<style type="text/tailwindcss">
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
</style>

This ran perfectly in CDN JIT mode. But when I migrated to Tailwind CLI for production performance (loading speed), the page styles completely collapsed.

Reason: Standard Tailwind CLI cannot parse @apply syntax inside HTML <style> tags.

Solution:

1. Refactor: I replaced all @apply rules scattered across 30 HTML files directly into standard DOM utility classes (e.g., class="px-4 py-2...").
2. Update Rules: Explicitly forbade CDN-style syntax in .cursorrules:

# Forbidden in HTML (do not generate):
- <style type="text/tailwindcss"> ... </style>
- Any @apply inside HTML <style> tags

Lesson Learned: Before letting AI generate code on a large scale, you must define production build constraints first, otherwise, the cost of refactoring is extremely high.

---

5. Deployment: Cloudflare Pages is a Game Changer

CI/CD has never been this simple.

Just connect Cloudflare to your GitHub repository, and everything after that is automatic.

• Setup Time: 3 minutes
• Build Command: None (Pure Static HTML, not even npm run build)
• Hosting Cost: $0 (Free Tier is enough)
• Benefits: Global CDN + Auto HTTPS + Automatic deployment on every git push. ---

6. Project Stats

Metric	Value
Total Tools	100+
Dev Time	~24 Hours
Lines of Code	80,000+
Backend Code	0 Lines
npm Dependencies	0
Performance (FCP)	< 0.5s

---

7. Technical Reflection: Why Vanilla JS?

In a world dominated by React/Vue, why did I go against the grain?

1. Extreme Performance: No Virtual DOM Diffing algorithms, no Hydration process. Browser native APIs are simply the fastest.
2. Absolute Simplicity: Each tool is an independent HTML file. Want to add a new function? New Folder -> Paste -> Modify Logic. No complex Webpack/Vite configs needed.
3. Privacy & Security (Key Selling Point):

• No Backend = Data stays local.
• Image compression, PDF splitting, and password generation are all done in the browser using Web Crypto API or WASM. User data is never uploaded to my server.

1. Design Consistency:

• Dark Mode First.
• Unified "Privacy Badge" design to emphasize local processing and build user trust.

---

8. Advice for Developers

1. Invest in your `.cursorrules`: The 2 hours I spent writing rules saved me 20+ hours of repetitive prompting and debugging later. It is the "Config File" of the AI era.
2. Prototype Fast, but Standardize Early: Don't be like me and wait until you've written 30 pages to unify your build tool (CLI). Refactoring is painful.
3. Constraints Fuel Creativity: "No Backend, No npm" sounds like a limitation, but it forced me to dig into the potential of native browser APIs, resulting in a more private, lightweight product.

---

9. Final Thoughts

Building 100 tools in 24 hours isn't about how fast my hands are, nor is it about deep technical expertise.

I want to emphasize: In this era of AI-assisted programming, the technical barrier has been lowered infinitely. As long as you can screenshot errors to AI and clearly describe your requirements, everyone can be a full-stack engineer.

The .cursorrules file is the real product here; these 100 tools are just its output.

If you want to try it too, open Cursor now and start defining your own Rules.

The project is Open Source. Contributions and Stars ⭐ are welcome:

👉 GitHub: my-tools-matrix

👉 Live Demo: WebUtilityKit.com

---

If you have any technical questions, feel free to discuss them in the comments!