Coding
Vocabulary Learning App Builder
Vocabulary Learning App Builder turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
The prompt
Vocabulary Learning App Builder guides the model through a defined task while preserving the source prompt's useful structure and constraints. It specifically covers Task, Context, Technical Stack. Use it when planning, writing, reviewing, or debugging software and you want a response that is easier to evaluate and act on.
text prompt
## Role
You are an expert full-stack developer and educational technology architect specializing in production-ready web applications.
## Task
Build a complete, deployable vocabulary learning web application with spaced repetition (Leitner system), sophisticated state management, and premium UI/UX. Deliver production-ready code with all components integrated and fully functional.
## Context
{{appRequirements}}
Include: target languages to support, design aesthetic preferences (default to Linear.app/Readwise-inspired minimalism if unspecified), deployment platform (Vercel, Netlify, etc.), feature priorities, and target user skill level.
## Technical Stack
- React with TypeScript
- Zustand for state management with persistence
- Tailwind CSS for responsive design
- Framer Motion for animations
- WCAG 2.1 AA compliant accessibility
- Audio integration for pronunciation
- Full PWA configuration
- Code splitting, lazy loading, error boundaries
## Output
Deliver the complete application with:
1. **Project Architecture & TypeScript Interfaces**
Type definitions for vocabulary items, user progress, and state
2. **Core Components**
Learning interface, review cards, progress dashboard, statistics views
3. **State Management Layer**
Zustand stores with persistence, vocabulary management, progress tracking
4. **Spaced Repetition Engine**
Leitner algorithm implementation with mathematically sound interval calculations
5. **Sample Data**
50+ vocabulary entries with translations, pronunciation guides, and example sentences
6. **Styling & Animation**
Responsive layouts, micro-interactions, loading states
7. **Audio & Accessibility**
Pronunciation support, keyboard navigation, screen reader optimization
8. **Error Handling & Optimization**
Error boundary components, performance monitoring, bundle optimization
9. **Deployment Configuration**
Build scripts, environment setup, PWA manifest
Provide fully integrated, production-ready code with comprehensive comments explaining architecture decisions and implementation details.
Tune the prompt, not the plumbing.
Every control comes from this prompt’s content schema. Changes stay in your browser and update instantly.
Customized prompt2088 characters
## Role
You are an expert full-stack developer and educational technology architect specializing in production-ready web applications.
## Task
Build a complete, deployable vocabulary learning web application with spaced repetition (Leitner system), sophisticated state management, and premium UI/UX. Deliver production-ready code with all components integrated and fully functional.
## Context
Paste the relevant source material and context here.
Include: target languages to support, design aesthetic preferences (default to Linear.app/Readwise-inspired minimalism if unspecified), deployment platform (Vercel, Netlify, etc.), feature priorities, and target user skill level.
## Technical Stack
- React with TypeScript
- Zustand for state management with persistence
- Tailwind CSS for responsive design
- Framer Motion for animations
- WCAG 2.1 AA compliant accessibility
- Audio integration for pronunciation
- Full PWA configuration
- Code splitting, lazy loading, error boundaries
## Output
Deliver the complete application with:
1. **Project Architecture & TypeScript Interfaces**
Type definitions for vocabulary items, user progress, and state
2. **Core Components**
Learning interface, review cards, progress dashboard, statistics views
3. **State Management Layer**
Zustand stores with persistence, vocabulary management, progress tracking
4. **Spaced Repetition Engine**
Leitner algorithm implementation with mathematically sound interval calculations
5. **Sample Data**
50+ vocabulary entries with translations, pronunciation guides, and example sentences
6. **Styling & Animation**
Responsive layouts, micro-interactions, loading states
7. **Audio & Accessibility**
Pronunciation support, keyboard navigation, screen reader optimization
8. **Error Handling & Optimization**
Error boundary components, performance monitoring, bundle optimization
9. **Deployment Configuration**
Build scripts, environment setup, PWA manifest
Provide fully integrated, production-ready code with comprehensive comments explaining architecture decisions and implementation details.
Useful structure, room to move.
Vocabulary Learning App Builder guides the model through a defined task while preserving the source prompt's useful structure and constraints. It specifically covers Task, Context, Technical Stack. Use it when planning, writing, reviewing, or debugging software and you want a response that is easier to evaluate and act on.
The prompt establishes the job first, then supplies concrete decisions a model can act on. The variables preserve that structure while letting you change the subject, context, or output.
Related prompts
Building Plan Verification Advisor
Building Plan Verification Advisor turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
CI Pipeline Hardening and Test Flake Triage
CI Pipeline Hardening and Test Flake Triage turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
Claude Artifacts Full Stack App Scaffold
Claude Artifacts Full Stack App Scaffold turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
Claude Artifacts Refactor with Safety Plan
Claude Artifacts Refactor with Safety Plan turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini