skills.rest
ThorStarlord
ThorStarlordCOMMUNITY
Explore all skills by this author →
GitHub

ui-surface-inventory

Classify product UI scopes into App Shell, Journey, Route, and Sub-surface.

1|Updated May 6, 2026
Search Tags:#product design#documentation routing#interface inventory#spec recovery#ui scope#component candidates#stateful ui
One-click install
npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-surface-inventory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-surface-inventory
Source: https://github.com/ThorStarlord/interface-skills/tree/main/skills/ui-surface-inventory
Command: npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-surface-inventory

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

UI scope bloat and spec drift happen when teams try to recover or write interface specs without first clarifying the smallest coherent UI Scope and the right order to specify it.

Core Features & Use Cases

  • UI Scope Discovery & Classification: Scans a product interface and classifies UI Scopes by type (App Shell, Journey, Route, Sub-surface).
  • Component Candidate Identification: Notes reusable UI component candidates inside each Sub-surface to guide downstream spec work.
  • Prioritized Recovery Order: Recommends a practical specification sequence (frame, journeys, primary routes, then sub-surfaces) to support retrospective specification recovery.

Quick Start

Use the ui-surface-inventory skill to map the UI Scopes for an existing app from screenshots or DOM evidence and produce surface-inventory.md as the starting spec.

Frequently Asked Questions about ui-surface-inventory

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

FAQPage Schema
How do I prevent UI spec drift and scope bloat when recovering interface specifications?▼

A practical specification recovery sequence starts by framing the app shell, then mapping user journeys, followed by primary routes, and finally detailing sub-surfaces. This ordered approach ensures foundational structure is documented before granular component specifics.

How do I identify reusable component candidates when mapping an existing product interface?▼

When mapping a product interface, reusable component candidates are identified inside each Sub-surface layer. Noting these candidates during UI scope discovery guides downstream specification work and ensures structural consistency across the interface inventory.

Can I use screenshots as input evidence to map UI scopes for an existing app?▼

Screenshots serve as valid DOM evidence to map UI scopes for an existing app. Analyzing these visual inputs allows you to classify interface boundaries and produce a multi-surface-map inventory artifact as the starting specification.

What is the smallest coherent UI scope criteria for evaluating a multi-surface-map inventory?▼

The smallest coherent UI scope criteria evaluates each mapped layer to ensure specifications capture only the minimal necessary interface boundaries. This evaluation prevents scope bloat by isolating discrete functional areas within the multi-surface-map inventory artifact.

Related Skills

Explore More Design & Creative Skills→
winstonkoh87winstonkoh87
558

visual-verify-ui

Capture multi-viewport screenshots and compare DOM states for visual regression testing.

Community
Intermediate
mysticfallmysticfall
1

spec-authoring

Document user and technical requirements in feature and umbrella specs.

Community
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
codesour-designcodesour-design

layers-conceptual-model

Model product objects, relationships, states, and vocabulary before interface design.

Community
Advanced