skills.rest
rladydqls99
rladydqls99COMMUNITY
Explore all skills by this author →
GitHub

screen-analysis

Analyze planning documents to derive screens and component structures.

Updated Aug 27, 2026
Search Tags:#ui/ux#product development#requirements analysis#component architecture#fsd#screen design
One-click install
npx skills add https://github.com/rladydqls99/claude-marketplace --skill screen-analysis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screen-analysis
Source: https://github.com/rladydqls99/claude-marketplace/tree/main/plugins/frontend-develop/skills/screen-analysis
Command: npx skills add https://github.com/rladydqls99/claude-marketplace --skill screen-analysis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the initial stages of product development by automatically analyzing planning documents or requirements to define necessary screens and their component structures, ensuring no critical element is overlooked.

Core Features & Use Cases

  • Screen Identification: Extracts a comprehensive list of all required screens, including implicit ones like error or empty states.
  • Component Architecture: Designs the hierarchical structure of components within each screen using FSD principles.
  • State Management: Defines all possible states for each screen and component (loading, error, empty, etc.).
  • Use Case: Kickstart a new feature by feeding the planning document to this Skill to get a complete screen map and component breakdown, ready for design and development.

Quick Start

Analyze the provided planning document to generate a list of screens and their component structures.

Frequently Asked Questions about screen-analysis

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

FAQPage Schema
How do I identify required screens and component structures from product requirements?▼

Screen analysis automatically processes planning documents to extract a comprehensive list of required screens, map user journeys, and design hierarchical component layouts based on FSD principles.

Can I generate component architecture and state management definitions from a planning document?▼

Yes, analyzing planning documents with this approach designs hierarchical component structures using FSD principles and defines all possible states for each screen and component, including loading, error, empty, and permission-based states.

What is the best way to map user flows to specific screens during product development?▼

Mapping user flows to specific screens involves identifying user journeys within planning documents and deriving a complete screen map with hierarchical component breakdowns ready for design and development.

Does screen analysis handle implicit UI/UX states like empty and error conditions?▼

Yes, screen analysis identifies implicit screens and defines all possible states for each screen and component, ensuring critical UI/UX elements like empty, error, loading, and permission-based conditions are not overlooked.

How to start designing a new feature using FSD principles from requirements?▼

Feed your planning document into a screen analysis process to generate a complete screen map and component breakdown, applying FSD principles to structure hierarchical layouts and define component states for development.

Related Skills

Explore More Software Engineering Skills→
thepriceisrightthepriceisright

prd

Generate a structured PRD from a feature brief and save it to tasks/prd-[feature-name].md.

Community
Advanced
45black45black
1

fullstack-spec

Map feature requests into modular frontend, API, and backend specifications.

Community
Advanced
Canhada-LabsCanhada-Labs
2

UX & User Journeys

Map user journeys and audit information architecture for web applications.

Official
Advanced
Athena-Git-GroupAthena-Git-Group

athena-audit-requirement-frontend

Analyzes product requirement documents for missing frontend interaction, screen state, and navigation details.

Official
Intermediate