screen-architect

Convert UX flows into a screen inventory with view hierarchy and responsibilities.

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/saranskumar/anti-slop --skill screen-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screen-architect
Source: https://github.com/saranskumar/anti-slop/tree/main/skills/screen-architect
Command: npx skills add https://github.com/saranskumar/anti-slop --skill screen-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert existing user flows into a concrete screen inventory with defined responsibilities and a scalable view hierarchy to guide frontend architecture.

Core Features & Use Cases

  • Screen inventory generation: break flows into named screens with intended user goals.
  • Role-specific responsibilities: assign responsibilities (data ownership, navigation, and state) for each screen.
  • View hierarchy planning: define parent-child relationships and modal or dashboard structures for consistent architecture.

Quick Start

Provide the mapped UX flow and request a screen inventory with responsibilities and a view hierarchy.

Frequently Asked Questions about screen-architect

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

FAQPage Schema
How do I convert a mapped UX user flow into a structured screen inventory?

To convert a mapped UX user flow into a screen inventory, you break the flow down into named screens, define the intended user goals for each, and establish data ownership and navigation responsibilities.

What is screen architecture in UX design and when do I need it?

Screen architecture defines the parent-child view hierarchy and structural responsibilities for pages, modals, and dashboards. You need it when mapped UX flows require a concrete frontend structure with clear data requirements and edge states.

How do I plan a view hierarchy for modals and dashboards from a user flow?

To plan a view hierarchy from a user flow, you define parent-child screen relationships and designate specific structures for modals or dashboards to ensure a consistent and scalable frontend architecture.

Can I assign role-specific responsibilities like data ownership to individual screens?

Yes, you can assign role-specific responsibilities to individual screens by capturing data requirements, navigation rules, state management, and edge conditions for each designated page or modal.

Does this approach work for capturing edge states and shared layouts across multiple pages?

Yes, this approach works for capturing edge states and shared layouts by ensuring screen designation is driven by user intent, which aligns data requirements and structural responsibilities across the application.