How I AI: Building Custom AI Accessibility Tools for Slack with Joe McCormick & Claude Code

Welcome back to How I AI! I'm Claire Vo, and in this episode, I was so excited to sit down with Joe McCormick, a principal software engineer at Babylist. Joe has an incredible story. Right before starting college, he lost most of his central vision due to a rare genetic disorder. This led him to pivot from mechanical engineering to computer science, where he discovered a new way to channel his creativity and build amazing things.

Joe’s journey is a powerful example of how AI can be a great equalizer. He shared with me how tools like ChatGPT and Gemini are closing the gap for software engineers with visual impairments, not just in his professional life but in his personal life, too. He's a fantastic illustration of the personal software movement, where individuals can now build highly customized tools to solve their unique problems—problems that might not be economically viable for larger companies to address.

What I love about Joe's approach is its pragmatism and efficiency. He doesn't just use AI; he harnesses it to create small, powerful micro-apps that make his daily work faster and more accessible. These aren't just theoretical projects; they are tools he uses every day to navigate the digital world, particularly in a Slack-heavy environment like Babylist.

In our conversation, Joe walks us through three custom Chrome extensions he built for himself. He even builds one of them for us, live on the show, in under 25 minutes using Claude Code. You'll see his entire workflow, from dictating a product spec to debugging with screenshots, all while navigating his setup with a screen reader. Let's get into his brilliant workflows.

Workflow 1: AI-Powered Image Descriptions in Slack

One of the first tools Joe showed me was a Chrome extension he built to describe images shared in Slack. As a software engineer at a company focused on baby products, he constantly sees images of strollers, car seats, and other items. While he can use a screen magnifier to zoom in, it’s a tedious and time-consuming process.

To solve this, he created a simple but incredibly effective workflow:

1. Trigger the Shortcut: When he focuses on a Slack message containing an image, he presses a custom keyboard shortcut: Ctrl+Shift+D.
2. AI Analysis: The extension grabs the image and sends it to an AI model (like ChatGPT's vision capabilities) for analysis.
3. Get the Description: A modal window pops up with a detailed text description of the image. For example, it described a stroller as a “modern infant baby stroller with a car seat” and noted its canopy and other features.
4. Ask Follow-up Questions: What makes this tool even better is the ability to ask follow-up questions. Joe demonstrated by typing, "what age child is this for?" and the tool fetched the answer. This interactivity allows him to quickly get the context he needs without having to ask a colleague or spend minutes zooming and panning across an image.

This workflow isn't just about accessibility; it's about efficiency. It transforms a high-friction task into a seamless, seconds-long interaction. Joe is even adapting this concept for Figma, creating a tool that can describe design components, including colors and CTA styles, to help him work more effectively as a full-stack engineer.

Workflow 2: An Instant, Accessible Spell Checker

Next, Joe showed me a tool that I think many of us could use. He admits his brain sometimes moves faster than his fingers, leading to typos. While tools like Grammarly exist, they aren't always screen reader friendly or can involve multiple clicks. He wanted something faster.

His solution is another custom Chrome extension with a simple, direct workflow:

1. Type the Message: He types his message in any input field on the web, typos and all (e.g., "testing typos in the message").
2. Trigger the Shortcut: He hits Ctrl+Shift+S.
3. Correct the Text: The extension sends the text to OpenAI with a very specific prompt, which he shared with me:

do not change any of the words, just fix typos.

This hyper-focused prompt ensures the AI only corrects spelling and grammar without altering his original meaning or tone. The corrected text instantly replaces the original. For him, the accessibility feature is key; his screen reader announces, "processing, spell check, spell check, complete," so he knows the task is done and he can send his message with confidence.

This is a perfect example of what Joe calls the collapsing "payback period" for personal software. A tool that saves a few minutes a day might have taken days to build in the past, making the return on investment questionable. Now, he can build something like this in 30 minutes, and the daily time savings add up incredibly fast.

Workflow 3: Live-Building a Link Summarizer with Claude Code

For the main event, Joe walked me through building a brand-new Chrome extension from scratch. The problem? We're all drowning in links shared on Slack. Instead of saving them for later and creating a massive to-do list, he wanted a way to get the gist of an article instantly and decide if it's worth a full read.

Here's his step-by-step process using Claude Code.

Step 1: Defining the Product with Voice

Like any good project, it starts with a spec. Joe opened VS Code and, instead of typing, used the built-in voice-to-text feature (Ctrl+I) to dictate his requirements.

We want to build a simple PRD for a locally run Chrome extension. Whose job is it to exist in Slack alone? And when focused on a Slack message, you can hit the keyboard shortcut, control shift one, and it will search that message to find any external links. If there are external links found, it should open them up in hidden tabs, extract their content, and send it off to open ai. To summarize.

He then refined this with more detail, specifying that the summary should include 3-5 key takeaways and be displayed in a "fully screen reader accessible modal." The AI took this dictation and generated a well-structured PRD, complete with goals, user stories, and functional requirements.

Step 2: Scaffolding with Claude Code & Custom Skills

With the PRD ready, he moved into Claude Code. Since he's built several Chrome extensions before, he created a Claude Skill that contains the common patterns and boilerplate for his projects. This allows him to accelerate development significantly.

For accessibility, he uses a fantastic feature in Claude Code. Instead of typing long prompts in the terminal, which can be hard to navigate with a screen reader, he hits Ctrl+G. This opens the prompt in a regular text editor, where he has full navigation and editing capabilities.

His initial prompt was straightforward:

@PRD.md
Use the Claude Skill for creating chrome extensions to build out this PRD.
Use my open AI key from my shared chrome extension config.

After saving the file, the text is sent back to the Claude Code terminal as the new prompt. This is a much more efficient and accessible way to work with the AI agent.

Step 3: Reviewing the Plan & Navigating with Accessibility in Mind

Claude Code generated a full development plan. Again, using the Ctrl+G trick, Joe opened this plan in the editor. He uses Markdown folding to collapse sections, allowing him to quickly scan the headings and expand only the parts he wants to review in detail—a much better experience than reading a massive file line-by-line.

He approved the plan, and Claude Code began executing the steps, creating files and writing code. It even set up a symbolic link to his shared configuration file, a smart engineering practice that means if he ever needs to update his API key, he only has to do it in one place.

Step 4: The First Test and a Common AI Hurdle

Once the agent finished, it was time to test. Joe went to his Chrome Extensions settings, enabled "Developer mode," and used the "Load unpacked" option to load the local folder containing his new extension. After refreshing Slack, he focused on a message with a link and hit his new shortcut: Ctrl+Shift+1.

It worked... sort of. A modal popped up, but it contained raw, unformatted JSON text, not the clean summary he wanted. This is a common issue when working with AI; sometimes the model returns a string that looks like JSON instead of a properly formatted JSON object that the application can parse.

Step 5: Visual Debugging with a Custom Slash Command

Here’s where Joe’s custom setup really shines. To debug, he needed to show Claude what was happening. Since he runs Claude Code in the Windows Subsystem for Linux (WSL), he can't directly paste from his Windows clipboard into the terminal. So, he built a solution.

He took a screenshot of the buggy modal and then used a custom slash command he wrote, /pasteimage. This command uses a PowerShell script to grab the image from his clipboard and make it available to Claude. It's an ingenious fix for a specific cross-platform friction point.

Claude analyzed the image and immediately understood the problem. The OpenAI API call was asking for a text response that just happened to be formatted as JSON. Claude adjusted the code to specifically request a JSON object as the response type, which would allow the extension to parse it correctly.

Step 6: Success! A Working Link Summarizer

With the fix applied by Claude, Joe reloaded the extension with a single click in the Chrome developer tools. He ran the Ctrl+Shift+1 shortcut one more time.

Success! A clean, fully accessible modal appeared, displaying the article's title, a link to view the full piece, and a neat list of three to five key takeaways. He noted that because he instructed the AI to make it accessible, it correctly used ARIA (Accessible Rich Internet Applications) roles to ensure the modal traps focus and is read properly by screen readers.

The Power of Personal, Accessible AI

Joe's live-coding session was a fantastic demonstration of how quickly you can go from an idea to a functional, personalized tool. These micro-apps, each solving a specific point of friction, add up to a massive increase in efficiency and a better daily experience. His workflows prove that the most important thing you can do when you hit a recurring, tedious task is to pause and ask, "Can I automate this?"

What was most touching was hearing how this technology impacts his personal life. He shared that he uses the Gemini app on his phone to read books to his young children. He can just point his phone's camera at a page, and the AI reads it aloud. He and his son can turn the pages together, and he just says "Gemini, next page." It's a beautiful example of how AI is creating more equitable access to the world and enabling moments that might otherwise be a challenge.

Joe's work is a powerful reminder that AI isn't just about large-scale enterprise solutions; it's about empowering individuals to build the exact tools they need to make their lives better, one keyboard shortcut at a time.

A special thanks to our sponsors

• Orkes—The enterprise platform for reliable applications and agentic workflows
• Tines—Start building intelligent workflows today

Episode and Guest Links

• Find Joe McCormick: LinkedIn, Babylist
• Find Claire Vo: ChatPRD, Website, LinkedIn, X

Tools Referenced:

• Claude Code
• VS Code
• Whisper Flow
• Gemini
• ChatGPT
• Meta Ray-Ban Smart Glasses

Other References:

• Chrome Extensions Documentation
• ARIA (Accessible Rich Internet Applications)
• Windows Subsystem for Linux
• Screen Readers
• Claude Skills explained: How to create reusable AI workflows