Most People Use Cursor Like a Notepad. Here's How to Use It Like a Pro — Composer, Rules, Debugging & Claude Together.
Cursor AI Course — Part 3: Advanced & Pro
Parts 1 and 2 got you from zero to a live website. Part 3 is where you stop being a beginner. Composer, Cursor Rules, Claude inside Cursor, debugging workflows, and speed shortcuts — this is what separates people who dabble from people who actually ship.
You have a working blog. You know how to prompt. Now you're going to learn how to work faster, smarter, and more consistently — using the features most Cursor users never touch.
This part has no theory. Every section is a technique you can use today, with a prompt or walkthrough to get you started.
Composer — Edit Multiple Files in One Shot
Chat handles one file at a time. Composer handles your whole project at once. It reads, edits, and creates multiple files in a single operation. This is the feature that makes Cursor genuinely powerful for real projects.
Composer shows you every change it's going to make before you approve anything. You review each file, accept what you want, reject what you don't. Nothing changes until you say so.
// Open Composer with Cmd+Shift+I, then paste this Redesign my blog to use a dark theme across all files. Update index.html, about.html, post.html, and style.css: - Background: #0F172A (very dark navy) - Text: #E2E8F0 (light gray) - Cards and surfaces: #1E293B - Keep the green accent color (#10B981) everywhere it exists - Navigation: dark background to match, light links - All borders should use rgba(255,255,255,.08) instead of light gray Do NOT change the HTML structure or remove any content. Do NOT change class names or IDs. Style changes only — update color values in CSS.
Composer handles anything cross-file: "Rename all instances of 'post-card' to 'article-card' across all files" · "Extract the nav HTML into a shared include comment in each page" · "Add a loading='lazy' attribute to every img tag across the project." Tasks that used to take an hour take seconds.
Cursor Rules — Stop Repeating Yourself
Every time you start a new chat in Cursor, it forgets your preferences. Unless you set up rules. Cursor Rules let you write permanent instructions for how Cursor behaves in your project — and it follows them automatically in every prompt, forever.
- In your project root folder, create a file called .cursorrules (with the dot at the start)
- Open it in Cursor — it's just a plain text file
- Write your instructions in plain English
- Save it — every future prompt in this project follows those rules without you repeating them
# My AI Blog — Cursor Rules Project type: Static HTML blog — HTML, CSS, and vanilla JavaScript only Always follow these rules: - Never use Bootstrap, Tailwind, or any CSS framework - All styles go in style.css — never write inline styles - All CSS custom properties (variables) stay at the top of style.css - Use semantic HTML tags: header, nav, main, article, section, footer - Every img tag must have a loading="lazy" attribute and an alt attribute - Write mobile-first CSS: base styles for mobile, min-width media queries for desktop - Never remove existing styles — only add or modify what's necessary - Max 20 lines per JavaScript function - Comments in English only Naming conventions: - CSS classes: kebab-case (like this: .post-card-title) - JavaScript variables: camelCase - File names: lowercase-with-hyphens Design tokens: - Primary: #10B981 (emerald green) - Background: #F8FAFC - Text: #1E293B - Muted text: #64748B - Font: Inter, system-ui, sans-serif
Without rules, every new session risks Cursor guessing wrong about your preferences. With rules, every prompt automatically follows your standards. Output becomes consistent. You stop correcting the same mistakes over and over.
Debugging — Fix Broken Stuff Fast
Something will break. Always does. Here's the fastest way to fix it — and it works almost every time.
Press F12 in Chrome → click the Console tab → find the red error → copy the entire message. Don't describe it. Don't paraphrase it. Paste the actual text.
"I'm getting this error when I click the submit button on the contact form:" → paste the error. That's all Cursor needs. It knows your code. It'll pinpoint exactly which line is wrong.
Cursor will explain what was wrong and show the fix. Read the explanation — not to become a developer, but to understand what happened. Apply, then test in your browser.
Reply: "That didn't fix it. Here's the new error:" and paste the updated message. Two or three rounds of this resolves almost everything. Don't give up after the first try.
"It's broken." "It doesn't work." "Something is wrong." None of these help. Cursor needs to know what the actual error says, or exactly what you expected to see vs. what you're seeing. Be specific — always.
Cursor + Claude — Pick the Right Model for Each Task
Cursor lets you switch AI models per conversation. In 2026 this matters more than ever because different models are genuinely better at different things.
In the Chat panel, click the model name in the bottom-left corner — it usually says "claude-sonnet" or "gpt-4o." A dropdown lets you pick. You can switch mid-conversation. Settings → Models lets you set a default.
Blog post copy, page descriptions, meta text, about sections, email drafts — Claude writes better prose. The tone is more natural, less corporate. Anything where words need to actually sound human, switch to Claude.
JavaScript functions, CSS fixes, debugging, file manipulation — GPT-4o is fast and precise for pure code tasks. It follows technical instructions more literally. Use it when you need exact, predictable output.
Write your blog post content with Claude, then switch to GPT-4o to format it as HTML and add it to post.html. The two models complement each other — use both in the same workflow.
// Switch to Claude in the model selector first, then paste this Write a 500-word blog post for my site titled: "3 Things Cursor AI Does Better Than I Expected." Tone: Honest and conversational. Like you're telling a friend something cool you found. Not professional-tone. Not corporate. Not inspirational. Structure: - A 2-sentence opening that doesn't start with "I" or with a question - Thing 1: how fast the first real result came - Thing 2: how well it understands context across files - Thing 3: how useful it is for fixing bugs — paste the error and it just... fixes it - A short, grounded closing — not a call to action, just a real thought Avoid: AI buzzwords, listicle headers, "In conclusion," "It's worth noting," "game-changer." Return as HTML with proper h2 tags and paragraph tags. Ready to paste into post.html.
The people getting the most out of Cursor aren't the ones who know the most code. They're the ones who ask the most specific questions.
Speed Shortcuts — The Ones That Actually Matter
These six shortcuts cut your workflow time in half once they become muscle memory. Learn them in order — master one before moving to the next.
Final Polish — 3 Pro Features to Add to Your Blog
Run these three prompts on your blog from Part 2. Each one adds a feature that makes the site feel finished and professional.
Add a dark mode toggle to my blog's navigation bar. Requirements: - A sun/moon icon button on the right side of the nav - Clicking it switches between light mode and dark mode using CSS custom properties - Dark mode: background #0F172A, text #E2E8F0, cards #1E293B - User preference saved in localStorage — persists on page reload - Works across all three pages (index.html, about.html, post.html) - No external libraries — vanilla JavaScript only - The icon should swap (sun ↔ moon) when toggled
Add complete SEO meta tags to the <head> of all three HTML files. For each page add: - A unique meta description (140-160 characters relevant to that page) - Open Graph tags: og:title, og:description, og:type, og:url, og:image (use placeholder URL) - Twitter Card tags: twitter:card (summary_large_image), twitter:title, twitter:description - A canonical link tag pointing to that page's URL (use placeholder domain yoursite.com) Add a HTML comment above each group labeling what it is. Use content appropriate to each page — not the same text on all three.
Add a reading progress bar to post.html. Requirements: - A thin (3px) horizontal bar fixed at the very top of the page, above the nav - It fills from 0% to 100% as the user scrolls through the article - Color: #10B981 (emerald green) - Smooth transition — no jumpy updates - Vanilla JavaScript only — no libraries - Should not affect the page layout or push content down
What to Build Next
Course is done. Here's where to go from here:
- Add a Contact Form — Cursor + Netlify Forms = a working form with zero backend or server
- Connect a Headless CMS — ask Cursor to integrate Decap CMS so you write blog posts through a UI instead of editing HTML manually
- Build Something Different — portfolio, landing page, product page — apply the exact same process
- Try Cursor + Next.js — once you're comfortable with HTML, ask Cursor to migrate your blog to Next.js. It'll walk you through it.
- Keep reading Kodexon — new Cursor tutorials every week, from specific techniques to full project walkthroughs
The only way to actually get good at this is to build more things. Break them. Fix them. Build something else. Cursor makes that loop faster than anything before it — just show up and start.
Cursor AI Course — Complete
3 parts. A real website built and deployed. Advanced workflows unlocked. You went from zero to shipping — using prompts, not code.
Part 3 Complete — Full Course Done
- Composer mastered — edit multiple files in one prompt
- .cursorrules set up — Cursor follows your standards automatically
- Can debug any error using Chat with the exact error text
- Know when to use Claude vs GPT-4o — and how to switch mid-session
- All 6 speed shortcuts in muscle memory
- Dark mode, SEO meta tags, and scroll progress bar added to the blog
- Know exactly where to go next