Skip to main content

​
A2A Prompt Template

Use this prompt when continuing dual-mode UI work in SMO1 or applying pattern to other projects:

​
Initial Brief (CLAUDE.md Context)

Project Context:
  • Next.js 15 app (meow-web)
  • Uses React 19 + shadcn/ui + Tailwind
  • Two brand personalities: “cat mode” (playful) and “professional mode” (neutral)
  • Default: cat mode ON
  • UI state persists via localStorage
  • Shared types via @smo1/types package
TASKSET 5: Cat Mode & Terminology TASKSET 5 implements a personality switching system for the SMO1 link shortener dashboard. The system allows users to toggle between “cat mode” (playful) and “professional mode” (neutral) terminology throughout the UI. Definition of Done:
  1. Cat mode context (React Context + localStorage)
  2. Toggle in Settings → Appearance
  3. All terminology switches based on mode (at least 6 locations)
  4. Comprehensive tests (at least 18 tests)
  5. Build passes with zero errors
  6. No existing test failures introduced

​
Continuation Prompt (for next agent)

If picking up this work:
I’m continuing SMO1 TASKSET 5: Cat Mode & Terminology implementation. Current State:
  • CatModeProvider created and integrated into app root (providers.tsx)
  • Toggle wired in Settings → Appearance page
  • 6 components updated with dual-mode labels:
    • ScoringChips (Pawprintz/Treatz/Niblz vs Activity/Efficiency/Compression)
    • CatStatusBadge (Zoomies/Snoozies/Loaf vs Active/Resting/Dormant)
    • Links search placeholder
    • Analytics time range labels
    • Dashboard stat cards
    • Appearance settings label
  • 18 tests passing across 3 test files
Outstanding Work:
  • 5.6: Pagination terminology (blocked: no pagination UI component exists yet)
  • Investigate if any other components need terminology switching
  • Consider creating TERMINOLOGY.ts registry file for centralization
Next Steps to Validate:
  1. Run pnpm build and confirm zero TypeScript errors
  2. Run pnpm test -- --run and confirm all tests pass
  3. Visually verify both cat and professional mode in browser
  4. Check Settings → Appearance toggle works as expected
If Extending:
  • Follow the terminology mapping pattern: extract label pairs into objects
  • Always test both modes using renderWithCatMode() helper
  • Update TERMINOLOGY.ts registry when adding new labels
  • Add snapshot tests if component renders UI changes (not just text)

​
Troubleshooting Guide for Next Agent

Problem: TypeScript errors in new components Solution: Ensure component imports useCatMode hook and checks mounted flag: 
const { isCatMode, mounted } = useCatMode();
if (!mounted) return null; // SSR safety
Problem: localStorage not persisting across page reload Solution: Check that CatModeProvider wraps the entire app. In meow-web, it should be in src/components/providers.tsx. Problem: Tests failing with “hook called outside provider” error Solution: Use renderWithCatMode() helper which wraps component in provider automatically. Problem: Hydration mismatch warnings in console Solution: Component is rendering before mounted = true. Check that component returns null or skeleton while hydrating: 
if (!mounted) return <Skeleton />;
Problem: Can’t find where a label is rendered Solution: Search for the label text in codebase: grep -r "Pawprintz" src/. This reveals all uses.
  • meow-web/src/contexts/cat-mode.tsx — Context implementation
  • meow-web/src/components/providers.tsx — Where provider is integrated
  • meow-web/src/app/settings/appearance/page.tsx — Toggle UI
  • meow-web/src/__tests__/helpers/render-with-context.tsx — Test helper
  • meow-web/CLAUDE.md — Project-specific guidance

​
Validation Checklist

Before declaring TASKSET 5 complete:
  • pnpm build passes with zero TypeScript errors
  • pnpm test -- --run shows all tests passing
  • Manual testing: toggle cat mode ON → see “Pawprintz” + emojis
  • Manual testing: toggle cat mode OFF → see “Activity” + no emojis
  • localStorage: Toggle mode, reload page, mode persists
  • SSR: No hydration mismatch warnings in Next.js dev server
  • Coverage: Any new components have unit tests covering both modes
  • Documentation: CLAUDE.md updated with cat mode architecture notes

​
A2A Integration Points

If orchestrating this via n8n or multi-agent workflow: Input:
  • Repository path (smo1-io/meow-web)
  • Feature branch name
  • Component list to update
Output:
  • PR with all terminology mappings complete
  • Test coverage report
  • Build verification output
Execution:
  1. Agent runs pnpm build to establish baseline
  2. Agent identifies components that need terminology
  3. Agent implements terminology mapping helpers
  4. Agent adds tests for both modes
  5. Agent runs pnpm test -- --run to validate
  6. Agent creates commit with message: “feat(cat-mode): switch terminology in [components]”
  7. Agent opens PR with checklist

​
Lessons for Next Project

When implementing dual-mode UI elsewhere:
  1. Use Context + localStorage from day 1 (not Redux, not prop drilling)
  2. Centralize terminology in a TERMINOLOGY.ts file (not scattered in components)
  3. Test both modes (don’t assume default mode is sufficient)
  4. Guard hydration with mounted flag (critical for SSR apps)
  5. Document the pattern in project CLAUDE.md (so next agent doesn’t reinvent)