Shipping the Interactive Framework Artifact + Configurable TTS Updates

Big day for MemStack Pro! Got the interactive framework artifact embedded on the marketing site, updated all the skill counts, and made the TTS notifications configurable.

The Framework Artifact Goes Live

Finally moved that 935-line framework artifact from the main repo onto the marketing site. This thing shows off all 77 skills across 5 interactive tabs - Phase Pipeline, Skills Map, Directory Structure, Session Memory, and Human vs Agent comparison.

The Next.js conversion was trickier than expected. Had to:

• Add "use client" and convert to ES imports
• Use .jsx extension instead of fighting TypeScript strict checking
• Wrap it in next/dynamic with ssr: false because it uses window.innerWidth and was causing hydration errors
• Do some named export gymnastics to make the dynamic import happy

But hey, all 5 tabs work perfectly and Playwright confirms everything's solid. The artifact sits right between the hero section and problem statement - prime real estate.

Session Memory Tab Rewrite

Renamed "Feedback Loops" to "Session Memory" and completely rewrote the content. The old version showed n8n workflows, SendGrid emails, and webhook integrations that buyers don't actually get out of the box. Not helpful.

New version focuses on what actually ships:

1. Session Ends → Diary Saves Context → Next Session Starts → Diary Loads Context → Echo Recalls History

Tagline: "Every session picks up where the last one left off"

Much cleaner and actually represents the product.

Skill Count Updates Everywhere

Went from "60 skills in 9 categories" to "75+ skills in 10 categories" across the entire marketing site. Found 14 instances across 7 files that needed updating. Used "75+" instead of the exact "77" to give myself room for growth without constant maintenance.

Also added "Core" to the category list since that's now one of our 10 categories.

Configurable TTS Notifications

The text-to-speech notifications were hardcoded, which wasn't great for buyers who want to customize them. Created a new .claude/tts-config.json file where you can:

• Enable/disable TTS entirely
• Pick your voice
• Customize the approval prompt, task complete, and error messages

Updated the hook script to read from this config and added docs to the getting started guide. Much more buyer-friendly.

The Numbers

7 commits across both repos, 143KB first load JS (the 56KB artifact chunk is totally worth it), and everything deployed clean to Netlify.

The marketing site now actually shows what the framework does instead of just talking about it. That interactive artifact is going to convert way better than static descriptions ever could.

Next up: probably need to add that Core category to the visual SkillGrid component since it's still showing 9 categories instead of 10. But for now, everything's live and looking good.