- Home
- Skills
- Frontend & Web Apps
- Learning Experience UX — K-12 & eLearning
Learning Experience UX — K-12 & eLearning
Lesson screens, practice loops, educational games and teacher dashboards designed for real learners by age band.
$9
Works with the AI tools you already use
Learning Experience UX — K-12 & eLearning
Example session with this skill installed
Design a practice screen for 4th graders learning long division. They are using iPads. Include a hint system and feedback for common mistakes.
- Read your context and instructions
- Compiled the learning experience ux
- Generated the UI component
I have designed a practice screen for 4th grade long division optimized for iPad interaction. The focus is on reducing cognitive load by chunking the steps of the algorithm.
Long Division Practice Screen Spec (Grade 4)
| Component | Specification |
|---|---|
| Learning Objective | Student can execute the divide-multiply-subtract-bring down sequence for 3-digit by 1-digit problems. |
| Interaction Model | Tap-to-input (Large 44pt touch targets). No drag-and-drop to avoid motor fatigue on vertical tablet stands. |
| Instructional Scaffolding | Guided steps: The UI highlights the current active number in the dividend to focus attention. |
| Hint System | Level 1: "How many times does [x] fit into [y]?" <br> Level 2: Multiplication table snippet for the divisor. <br> Level 3: Worked example of the current step. |
| Feedback Logic | Correct: Brief green highlight, auto-advance to next digit. <br> Mistake (Subtraction): "Check your subtraction here" with the relevant numbers pulsed. <br> Mistake (Remainder): "Is your remainder smaller than your divisor?" |
| Accessibility | Text-to-speech button for the word problem. High-contrast input boxes. Dyslexic-friendly font (OpenDyslexic). |
UI Layout
- Header: Progress mastery bar (stars earned) and "Ask for Help" button.
- Center: Large workspace with the long division bracket. Active step is outlined in blue.
- Footer: Numerical keypad (large buttons) and a toggle for the "Multiplication Helper" tool.
Next steps
- Review the feedback triggers with the curriculum team to ensure they align with the "Standard Algorithm" teaching method.
- Test the 44pt touch targets on a physical iPad to ensure 9-year-old motor precision is supported.
- Define the "Mastery" threshold (e.g., 5 correct in a row) to trigger the level completion animation.
learning-experience-ux-k-12-elearning.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
EdTech UIs often fail because they focus on generic engagement instead of instructional goals. Developers struggle to balance age-appropriate accessibility with complex learning objectives, leading to products that distract learners or talk down to them.
What it does
- Generates full screen specifications for lesson UIs, practice activities, and assessments.
- Audits existing EdTech interfaces for cognitive load, instructional alignment, and age-band suitability.
- Designs feedback loops and scaffolding systems that fade as learners gain mastery.
- Builds teacher dashboards focused on actionable intervention data rather than raw metrics.
Why this beats prompting it yourself
General-purpose LLMs lack the specific instructional design frameworks needed for K-12 products. This skill applies structured patterns like worked examples, formative check logic, and age-specific text density rules that standard prompts miss.
Use cases
- Designing a math practice activity for Grade 3 students using Chromebook trackpads.
- Reviewing a high school science simulation for WCAG compliance and instructional clarity.
- Creating a mastery-based dashboard for teachers to identify students needing immediate help.
- Drafting dyslexia-friendly hint systems and feedback loops for a literacy app.
Known limitations
Does not provide legal certification for COPPA or FERPA compliance. Design recommendations assume a baseline of web-standard interaction unless specific hardware constraints are provided.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 8 days ago
- Passed all security checks, Safe to install