Does it require existing designs to work?

Yes, it relies on a locked screen inventory from the design-crit plugin to ensure every screen in your project receives appropriate edge state coverage.

What kind of wireframes does it produce?

It produces low-to-medium fidelity HTML artifacts that focus on structure, copy, and interaction patterns rather than high-fidelity visual styling.

What are edge states in UI design?

Edge states are 'non-happy path' scenarios such as empty screens, error messages, loading indicators, and offline modes that occur when the application isn't in its ideal state.

How does this skill help with design reviews?

It generates 2-3 distinct HTML wireframe options for edge states, allowing teams to compare different design personalities (e.g., Minimal vs. Helpful) side-by-side.

Can it help with app performance perception?

Yes, it includes specific patterns for skeleton screens and optimistic UI to make applications feel faster and more responsive during data fetches.

Edge State Designer

Name: Edge State Designer
Author: metedata

bymetedata

0•

Design Tools

Automates the design of empty states, error handling, and loading screens to ensure comprehensive UI/UX coverage for every application screen.

The Edge State Designer skill helps developers and designers master the 'non-happy path' by systematically addressing how an application behaves when data is missing, connections fail, or processes are slow. It analyzes your existing screen inventory to generate structured HTML wireframes covering empty states, skeleton loaders, error recovery, and offline behaviors. By presenting multiple design directions—ranging from minimal and functional to guided and helpful—it ensures that edge cases feel like intentional parts of the user experience rather than afterthoughts.

Key Features

01Standardized vocabulary for loading skeletons, optimistic UI, and error recovery

02Automated state matrix generation to track coverage across all screens

03Multi-option wireframe generation for side-by-side design comparison

04Contextual empty state patterns including first-use, cleared, and no-results

050 GitHub stars

06Offline and boundary condition planning for robust application behavior

Use Cases

01Designing resilient onboarding flows and instructional empty states for new users

02Improving perceived performance by planning skeleton screens and loading indicators

03Standardizing error handling and recovery actions across complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-edge-states

For use in Claude.ai and ChatGPT

Download Skill