skills.rest
nghyane
nghyaneCOMMUNITY
Explore all skills by this author →
Website𝕏@nghyaneGitHub

mobile-practice-flow

Implements React Native practice session flows for Listening, Reading, Writing, and Speaking exercises.

3|1|Updated Jan 12, 2026
Search Tags:#language learning#mobile#react native#expo#mcq#expo-av#practice flow
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill mobile-practice-flow-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-practice-flow
Source: https://github.com/nghyane/VSTEP/tree/main/apps/mobile-v2/.agents/skills/mobile-practice-flow
Command: npx skills add https://github.com/nghyane/VSTEP --skill mobile-practice-flow-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expo-av, expo-speech, expo-image-picker.

What problem does it solve? Building consistent practice session flows for a language learning mobile app requires coordinating audio playback, voice recording, MCQ interactions, and AI grading submissions across four distinct skill types, each with different UX rules. ## Core Features & Use Cases - Listening & Reading Practice: Implements one-time audio playback with expo-av, scrollable passages, and MCQ questions with immediate color-coded feedback. - Writing & Speaking Practice: Provides multiline text input with real-time word counting and audio record/review/submit flows that post to AI grading endpoints. - Practice Hub & Session State: Defines a skill-selection grid with per-skill colors and icons, plus useReducer-based session state for answers and revealed results. - Use Case: When adding a new Listening exercise screen to the Expo Router app, follow the prescribed pattern of a readiness modal with countdown, hidden audio element, and MCQ components with revealed-state feedback. ## Quick Start Implement a new listening practice screen following the mobile practice flow patterns with one-time audio playback and MCQ feedback.

Frequently Asked Questions about mobile-practice-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a listening practice screen in React Native with expo-av?▼

Use Audio.Sound.createAsync from expo-av to load and play the audio file once, with no seek or replay controls. Pair it with a hidden audio element, custom progress bar, and a readiness modal with a 3-second countdown before playback starts.

How to implement MCQ questions with immediate feedback in a practice app?▼

Render an MCQQuestion component with four options, dispatch the selected index into a useReducer session state, and pass a revealed flag to color-code correct and incorrect answers after submission.

Can I record and review audio before submitting in Expo?▼

Yes, use Audio.Recording.createAsync with HIGH_QUALITY presets from expo-av, then stopAndUnloadAsync to get the recording URI. Let the user play back the recording for review before submitting to the grading endpoint.

How do I manage practice session state across multiple questions?▼

Use useReducer to track the current question index, collected answers, and revealed state. This pattern applies consistently across listening, reading, grammar, and vocabulary exercise flows.

What are the limitations of one-time audio playback in listening exams?▼

One-time playback means no seek, replay, or native controls during the exam, which requires careful handling of audio loading errors and readiness confirmation before starting. Users cannot pause once the countdown finishes.

Related Skills

Explore More Software Engineering Skills→
JubaKitiashviliJubaKitiashvili
41

navigate

Design Expo Router navigation architectures with file structures and layout templates.

Community
Intermediate
OnClickListener2048OnClickListener2048

chinese-code-review

Convert Chinese code review critiques into constructive suggestions with graded tags.

Community
Advanced
jackjin1997jackjin1997
11

language-learning

Teach any language through adaptive conversational lessons and vocabulary drills.

Community
Advanced
alixexalixex
4

vercel-react-native-skills

Apply React Native and Expo best practices for mobile performance optimization.

Official
Intermediate