What is the main purpose of crit-screen-inventory?

It is used to identify and organize the complete set of screens, states, and user transitions for an application, serving as the structural foundation for the design critique process.

What files does the skill need to function?

It relies on a design brief, a state file to track rounds, and shared reference files for design principles and critique mechanics.

How does it help with handling edge cases?

The skill uses a state enumeration checklist to ensure you define loading, error, empty, overflow, and permission-restricted states for every screen in your inventory.

Can I compare different navigation models?

Yes, the skill is designed to generate 2-4 distinct options (such as Lean vs. Comprehensive) that you can review side-by-side in a browser-based comparison view.

Does this skill create high-fidelity visual designs?

No, it focuses strictly on structural architecture. It generates flow diagrams and inventories rendered as annotated HTML, rather than specific UI components or visual styling.

Screen Inventory & User Flows

Name: Screen Inventory & User Flows
Author: metedata

bymetedata

0•

设计工具

Maps comprehensive application screen sets, states, and user flows using structured HTML diagrams for iterative design critiques.

The Screen Inventory & Flows skill acts as a structural architect for your application design process within Claude Code. It systematically extracts screens from a design brief, classifies them by priority, and maps out the 'golden path' user transitions. By generating side-by-side HTML artifacts, it allows developers and designers to compare different structural approaches—such as Minimal MVP versus Full Suite—ensuring every state, from loading to error handling, is accounted for before high-fidelity wireframing begins.

主要功能

01Visual flow mapping for happy paths, error paths, and edge cases

02Systematic state enumeration including empty, loading, and error states

030 GitHub stars

04Generation of side-by-side HTML artifacts for architectural comparison

05Automatic screen derivation and classification from project briefs

06Integrated feedback loop for iterative structural convergence

使用场景

01Defining the core navigation structure and screen set for a new MVP

02Comparing flat versus deep hierarchical structures for complex data products

03Auditing existing app flows to identify dead-ends or missing error states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-screen-inventory

For use in Claude.ai and ChatGPT

主要功能

01Visual flow mapping for happy paths, error paths, and edge cases

02Systematic state enumeration including empty, loading, and error states

030 GitHub stars

04Generation of side-by-side HTML artifacts for architectural comparison

05Automatic screen derivation and classification from project briefs

06Integrated feedback loop for iterative structural convergence

使用场景

01Defining the core navigation structure and screen set for a new MVP

02Comparing flat versus deep hierarchical structures for complex data products

03Auditing existing app flows to identify dead-ends or missing error states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-screen-inventory

For use in Claude.ai and ChatGPT