AI Dev Daily Tools

Techniques, integrations, and custom skills I use every day as a developer working with AI assistants.

In this post:

• What the Crawlers See — Googlebot simulation, SEO audits, and Answer Engine Optimization
• The Debugging Prompt — structured diagnosis instead of guess-and-fix loops
• MCP-Powered Workflows — Sentry triage, automated PRs, safe database queries
• Claude Code Power Features — mobile, teleport, /loop, hooks, Dispatch

---

What the Crawlers See 👀🤖

Want to see what Google sees when it crawls your site? In Chrome DevTools:

1. Open your site → Inspect → Network tab
2. Click the Network Conditions icon (wifi icon)
3. Uncheck "Use browser default" → select "Googlebot"
4. Reload the page

Tip shared by Lucas Cruz

Depending on your rendering strategy, crawlers might see something completely different from your users.

SSR vs SPA

	SSR (Next.js)	SPA + Express
Rendering	Server-rendered HTML for everyone	Client-side for humans, lightweight HTML for bots
Crawler strategy	None needed	Bot detection + dynamic rendering
What crawlers see	Same styled page as users	Minimal HTML with meta tags and structured data
Maintenance	Single rendering path	Two rendering paths

SSR sends full HTML to everyone — crawlers included. SPAs send an empty shell and rely on JS, so teams implement dynamic rendering: detect bot user-agents, serve pre-built HTML with meta tags and structured data.

Takeaway: SSR gives you crawler-friendly rendering for free. SPAs need dynamic rendering — it works, but means maintaining two paths.

AI-Powered SEO Audits

The SEO Audit skill by Corey Haines runs comprehensive audits from your terminal. It evaluates crawlability, Core Web Vitals, on-page optimization, content quality (E-E-A-T), and authority signals — then delivers a prioritized action plan adapted to your site type.

What's a Claude Code skill? Reusable prompt templates invoked with slash commands (e.g., /seo-audit). Think of them as playbooks for your AI assistant.

Caveat: web_fetch and curl can't reliably detect structured data since many CMS plugins inject JSON-LD via JavaScript. Use Google Rich Results Test instead.

Beyond Google: aeo.js

58% of searches end without a click — AI gives the answer directly. Yet 97% of sites have no llms.txt or structured data for AI crawlers.

aeo.js (Answer Engine Optimization) generates the files AI engines need to discover and cite your content: llms.txt, llms-full.txt, robots.txt with AI directives, sitemap.xml, JSON-LD, and an AI content index.

Works as a plugin for Next.js, Astro, Vite, Nuxt, Angular, or standalone via CLI.

Traditional SEO ensures Google can index your pages. AEO ensures AI engines can understand and cite your content.

---

The Debugging Prompt

Most people tell AI assistants "fix this bug" and get stuck in guess-and-fix loops. This prompt pattern works much better:

"Reflect on 5-7 different possible sources of the problem, distill those down to 1-2 most likely sources, and then add logs to validate your assumptions before we move onto implementing the actual code fix."

Why it works:

1. Broad thinking — 5-7 possible causes prevents tunnel vision
2. Prioritization — narrow to 1-2 most likely, like experienced developers do
3. Validation first — add logs before touching code

Real example:

"The program's progress isn't working — users complete a program but progress doesn't appear for coaches.

Reflect on 5-7 different possible sources..."

The AI identified cache invalidation, race conditions, permission scoping, event timing, aggregation bugs, and more. Narrowed to two, added targeted logs, confirmed the root cause — then fixed it.

Key insight: give AI a diagnostic framework, not just a task.

---

MCP-Powered Workflows

MCP (Model Context Protocol) lets Claude Code connect to external tools — Sentry, GitHub, Linear, databases — with authenticated access. Instead of copy-pasting stack traces, Claude pulls what it needs directly.

Three skills I use daily:

Sentry Triage

Go from production error to fix PR without leaving your terminal:

1. Sentry detects an error with full stack trace and context
2. Claude connects via MCP, reads error details and affected files
3. Claude analyzes, cross-references with your codebase, proposes a fix
4. PR is generated with fix, description, and Sentry issue reference

Before: Sentry alert → dashboard → stack trace → find file → understand → fix → PR. ~30 min.

After: Sentry alert → ask Claude → review PR. ~5 min.

You can codify this into a reusable skill that classifies issues into three tiers:

Priority	Type	Action
P1 — Code Bugs	Unhandled exceptions, null pointers, race conditions	Fix in code
P2 — Noise	Expected scenarios at error level, handled exceptions	Downgrade severity — never remove logging
P3 — External	Third-party timeouts, webhook errors	Add retries and timeouts

The skill fetches unresolved issues, investigates each one, checks for prior fixes, applies targeted changes, and presents a summary table. What used to be "Sentry cleanup day" becomes a 5-minute daily routine.

Automated PR Creation

Say "create pr" and Claude handles the rest:

1. Identifies the issue from branch name or issue ID, fetches details via MCP
2. Reads the full diff — all commits, all files changed
3. Generates the PR — concise title, filled-in template, QA checklist, pushes if needed
4. Links back to the issue for bidirectional tracking

The result: accurate descriptions (from the actual diff), complete (no forgotten files), and consistent (follows your template every time).

Guard rail: PRs over ~1,000 lines get an extra-thorough description and a nudge to consider splitting.

Chain it: Fix → Commit → /create-pr ENG-1234 — production error to reviewable PR without leaving the terminal.

Safe Database Queries

The bottleneck: PM needs onboarding numbers, support needs subscription status, designer wants usage data — everyone files a request to engineering and waits.

Solution: an MCP server that gives Claude read-only database access.

Claude Code → MCP Server → SSH Tunnel → Read Replica → PostgreSQL

Three layers of write protection:

1. Application — regex rejects write keywords before touching the DB
2. Session — SET default_transaction_read_only = on on every query
3. Database user — dedicated readonly user with only SELECT permissions

Query → [Regex] → [Session read-only] → [DB user permissions]

Any single layer prevents writes. All three make it virtually impossible.

Production queries go through a read replica — zero performance impact on your app, plus physical write protection at the infrastructure level.

Claude can discover schemas autonomously, read ORM models to understand relationships, redacts sensitive fields in output, and defaults to LIMIT 20.

The impact: PMs validate hypotheses in real-time. Support debugs without escalating. Designers check usage patterns. Engineers investigate incidents faster. All without SQL knowledge, credentials, or write risk.

The value isn't querying faster — it's removing the bottleneck. When data takes 30 seconds instead of hours, it becomes part of every decision.

---

Claude Code Power Features

From Boris Cherny's thread — features worth adding to your workflow:

• Mobile app — Code tab in the Claude iOS/Android app. Make changes without a laptop.
• Teleport — claude --teleport or /teleport to continue a cloud session locally. /remote-control to steer a local session from your phone.
• /loop & /schedule — /loop 5m /babysit runs commands on interval (auto-rebase, run tests). /schedule runs Claude automatically for up to a week. Cron jobs for your AI.
• Hooks — inject logic at lifecycle points: load context on SessionStart, log commands on PreToolUse, route permissions to WhatsApp/Slack.
• Dispatch — secure remote control for Claude Desktop. Use MCPs, browser, and local tools from anywhere.

---

References:

• @bcherny — Claude Code features thread
• @mattpocockuk — AI dev workflows
• SEO Audit skill by Corey Haines
• aeo.js — Answer Engine Optimization
• Claude Code for Real Engineers