Screen Recreator

Generate React Native screens from prompts using Supabase queries and BaseScreen patterns.

Updated Oct 25, 2025
One-click install
npx skills add https://github.com/singhaldeoli104-bit/manushi-coaching-latest-working- --skill screen-recreator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Screen Recreator
Source: https://github.com/singhaldeoli104-bit/manushi-coaching-latest-working-/tree/main/.claude/skills/screen-recreator
Command: npx skills add https://github.com/singhaldeoli104-bit/manushi-coaching-latest-working- --skill screen-recreator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually building React Native screens is time-consuming, prone to inconsistencies, and often fails to adhere to all project best practices. This Skill automates the creation of production-ready screens, ensuring they are built quickly, correctly, and in full compliance with established project patterns.

Core Features & Use Cases

  • Automated Screen Generation: Creates full React Native screen code, including imports, state management, data fetching, and UI structure, based on project templates.
  • Best Practice Enforcement: Automatically applies critical project rules like using real Supabase data (no mock data), safe navigation, analytics tracking, and the BaseScreen wrapper.
  • Database Integration: Can design and create Supabase tables, apply migrations, and insert sample data, streamlining the full-stack development process.
  • Use Case: After analyzing an existing screen with the Screen Analyzer Skill, use Screen Recreator to automatically generate a new, production-grade version that adheres to all project standards, saving significant development time and reducing errors.

Quick Start

Create a MessagesListScreen to show parent-teacher messages.

Frequently Asked Questions about Screen Recreator

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

FAQPage Schema
How do I automatically generate production-ready React Native screens from scratch?

Screen Recreator converts screen requests into production-ready React Native code by automatically generating imports, state management, real Supabase data fetching, and UI structure while enforcing project patterns like BaseScreen integration, safe navigation, and analytics tracking—eliminating manual coding and inconsistencies.

Can I use Supabase with React Native screen generation without writing mock data?

Yes. Screen Recreator integrates real Supabase queries directly into generated screens, avoiding mock data entirely and ensuring live data connections from the start, plus it can design and migrate Supabase tables and insert sample data as part of the full-stack workflow.

What's the fastest way to build React Native screens that follow project best practices?

Screen Recreator automates best practice enforcement by applying real-time Supabase integration, BaseScreen wrapping, error handling, navigation safety, and analytics to every generated screen, reducing development time and eliminating manual compliance checks.

How do I convert an existing screen design into production code with database integration?

Pair Screen Analyzer to examine an existing screen, then use Screen Recreator to automatically regenerate it as production-grade code with enforced patterns, real Supabase queries, and full-stack database setup—eliminating manual rewrites and inconsistencies.

Does screen generation work with React Native project constraints and memory-guided workflows?

Yes. Screen Recreator operates within your project's documented constraints and workflows by reading PROJECT_MEMORY.md, FEATURES_ADDED.md, USAGE_GUIDE.md, and other project documents to enforce accepted patterns, preventing drift from established standards.

What happens if my React Native screen needs error handling and analytics automatically included?

Screen Recreator embeds error handling and analytics into every generated screen by default, applying project-standard logging and tracking patterns without requiring manual configuration or post-generation edits.