Step01
Define the Keyboard Shortcut
Register Ctrl Shift S, or another unused command, in the extension manifest. Send the command to the active tab and provide a clear error announcement when the current page or field cannot be edited.
IntermediatePersonal
Create a Fast, Accessible AI Spell Checker for Any Website
Build a one shortcut spell checker for any browser text field. It corrects typos without rewriting your words, replaces the selected text in place, and announces progress and completion to screen reader users.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.0.
Source episode · 08:40
How I AI: Building Custom AI Accessibility Tools for Slack with Joe McCormick & Claude Codewith Claire Vo
Joe types a message in Slack, presses Ctrl Shift S, and hears processing and completion announcements before the corrected text is returned to the same field.
Before you start
What you need
- A local Manifest V3 Chrome extension
- A model API
- A keyboard shortcut such as Ctrl Shift S
- Web pages with editable text fields
What you’ll make
A fast browser spell checker that fixes typos in the active field while preserving the writer's words, meaning, and tone.
Tools used
- Claude CodeVisitClaude Code
Claude for coding tasks
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step02
Capture Text from Input Field
Capture the value and selection from the focused input, textarea, or contenteditable element. Store the element and cursor position so the result can return to the same place without forcing the user to navigate again.
Step03
Send Text to AI with a Specific Prompt
Send only the active text and a narrow correction instruction to the model. Require plain text output and forbid rephrasing, word substitutions, tone changes, or added content.
Example prompt
Fix spelling and obvious typographical errors in the text below. Do not rewrite, rephrase, substitute words, change the meaning or tone, or add content. Return only the corrected text. If there are no typos, return the original text unchanged. [active field text]
Step04
Replace the Original Text
Replace the original value in the same field, preserve the cursor or selection when practical, and dispatch the input and change events needed by the page. Keep focus in the editor so the message is ready to send.
Step05
Add Accessibility Feedback
Add an ARIA live region that announces when checking starts, when it finishes, when no changes were needed, and when an error occurs. Joe heard processing spell check followed by spell check complete without leaving the field.
A simple auditory confirmation like 'spell check complete' makes the tool much more usable for those with visual impairments.
What good looks like
- The shortcut captures text from the focused editable field.
- Only spelling and obvious typographical errors change.
- The corrected text returns to the same field without moving focus.
- A screen reader announces processing, completion, and errors.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
If it goes sideways
- The model rewrites the message
- Use a restrictive instruction, set a low temperature, and compare the original and corrected token sequences. Reject changes that alter more than spelling, punctuation tied to a typo, or capitalization.
- The extension cannot read or replace the active field
- Support input, textarea, and contenteditable elements separately. Preserve selection and dispatch the input events the host page expects after replacement.
- The correction happens without audible feedback
- Create a persistent ARIA live region and announce processing, spell check complete, no changes, and errors with short messages.
Keep building
Related workflows
intermediateDataJev
How to Deduplicate and Clean Large Datasets Using AI Decision Models
Efficiently clean up large databases by identifying and merging duplicate or near-duplicate records. Use a decision model to get confidence scores for potential matches, allowing for automated merging or manual review.
Open
intermediateProductChatGPTNotion
How to Build a Real-Time Incident Command Dashboard with ChatGPT Sites
Create a custom, real-time incident command dashboard using ChatGPT Sites. This tool pulls live, user-specific data from Slack, Notion, and Google Calendar to keep you informed without disrupting your engineering team.
Open
intermediateProductJev
How to Build a Real-Time Voice-Controlled To-Do List App with Jev
Create a fluid, hands-free to-do list that updates instantly as you speak. Use a multi-step classification process to understand commands, match tasks, and execute functions in real-time without needing to pause.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready