1-Key Stroke, Level 1 Complete
2025-12-14•StenoRacer
Next.jsTypeScriptTailwind CSSReact
Prompt Run
Add color-coded word type labels (prep, pron, aux, det) under each word in Sentence Practice page. Add settings toggle for:
- Show/hide word type labels
- Enable/disable shake on error
Remove distracting animations (transition effects, success checkmark, "Press M" instruction). Keep red error flash only.
Output
- Added
getRoleInfo()helper function mapping roles to labels + colors:- pron → cyan
- aux → amber
- prep → emerald
- det → violet
- Implemented settings gear icon (top right) with dropdown
- Two checkboxes: "Show word types" and "Shake on error"
- Removed
transition-allcausing unwanted word movement - Removed success checkmark (✓) and error text to prevent layout shift
- Removed green background flash (kept red for errors)
- Deleted "Press M" instruction below steno display
- Created README.md with project overview, steno layout diagram, curriculum table
- Committed and pushed to
origin/main
Time Spent
~1 hour
Why Stopped
Feature complete. All requested changes implemented and deployed.