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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Recreating existing screens often leads to missed features, subtle bugs, and incomplete functionality. This Skill eliminates the risk of oversight by systematically extracting every detail from an existing React Native screen, ensuring 100% feature parity for recreation.

Core Features & Use Cases

  • Comprehensive Feature Inventory: Generates a detailed report covering UI sections, data sources, navigation flows, state management, business logic, user interactions, and conditional rendering.
  • Issue Identification: Automatically flags critical issues like mock data usage, performance bottlenecks, missing error handling, and accessibility gaps.
  • Recreation Blueprint: Provides a structured checklist and dependency list, serving as a precise blueprint for rebuilding screens without missing any functionality.
  • Use Case: Before embarking on a screen recreation project, use this Skill to generate a complete, exhaustive analysis report. This ensures the new screen perfectly mirrors the old one's functionality and avoids costly rework.

Quick Start

Analyze EnhancedParentDashboardScreen.tsx to prepare for recreation.

Frequently Asked Questions about Screen Analyzer

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

FAQPage Schema
How do I extract all features from a React Native screen before recreating it?

Screen analysis systematically captures every UI section, component, data source, navigation flow, state, styling, business logic, and user interactions from an existing screen. This comprehensive extraction ensures your recreation achieves 100% feature parity and eliminates missed functionality.

What details should I document when analyzing a React Native screen?

Document imports, type definitions, props, route parameters, state management, data sources, computed values, layout structure, conditional rendering, and edge cases. This exhaustive inventory becomes your blueprint for accurate screen recreation.

Can screen analysis identify technical debt and performance issues?

Yes. The analysis flags critical issues including mock data usage, performance bottlenecks, missing error handling, and accessibility gaps, helping you avoid propagating problems into the recreated screen.

Why does systematic feature extraction reduce rework when rebuilding screens?

Incomplete analysis leads to subtle bugs and missing functionality that emerge after recreation. Exhaustive extraction upfront creates a precise checklist and dependency map, preventing costly rework cycles.

What's included in the analysis output for screen recreation projects?

The analysis generates a detailed report covering UI sections, data sources, navigation flows, state management, business logic, user interactions, conditional rendering, and a structured checklist serving as your recreation blueprint.

Does screen analysis work with complex state management and nested components?

Yes. The analysis handles complete file reads and comprehensive documentation of all state, props, computations, and component hierarchies, including nested structures and complex data flows.