Skills
.Work. You
Rest

crit-edge-states

Community

Design resilient UI edge states

Design & Creative#error-handling#wireframes#critique#loading-states#empty-states#design-crit#edge-states
Authormetedata
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Many products treat non-happy-path scenarios as an afterthought, leaving users stranded during empty, error, loading, offline, and boundary conditions; this Skill structures and systematizes how every screen behaves when things go wrong so those experiences are deliberate, actionable, and on-brand.

Core Features & Use Cases

  • Audit the locked screen inventory to build a comprehensive edge-state coverage matrix that shows which screens need empty, loading, error, offline, and boundary treatments.
  • Generate 2–3 self-contained HTML wireframe options per round that include coverage summaries, per-screen wireframes, pattern legends, and copy samples for each applicable edge state.
  • Integrate with the crit loop by reading .design-crit state files, producing critique.md and compare.html artifacts, and recording decisions to state.json so edge-state patterns become downstream constraints.

Quick Start

Generate two edge-state wireframe options for the locked screen inventory and save them to .design-crit/facets/edge-states/.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: crit-edge-states
Download link: https://github.com/metedata/design-crit/archive/main.zip#crit-edge-states

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.