skills.rest
AndrejKiri
AndrejKiriCOMMUNITY
Explore all skills by this author →
GitHub

design-system-extraction-cowork

Audit web application UIs by browsing pages and cataloging UI patterns.

1|Updated Mar 30, 2026
Search Tags:#browser automation#design review#web application#UI patterns#visual audit#UI inconsistencies
One-click install
npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-cowork
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-extraction-cowork
Source: https://github.com/AndrejKiri/prometheus-design-system/tree/main/.claude/skills/design-system-extraction-cowork
Command: npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-cowork

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, node, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill facilitates visual auditing of web application UIs, enabling teams to systematically identify inconsistencies, document UI patterns, and prepare handoff assets for development and design teams.

Core Features & Use Cases

  • Interactive UI Browsing: Navigates through all scoped pages, capturing layout and style observations.
  • Pattern Cataloging: Enumerates and classifies recurring UI components and patterns across pages.
  • Inconsistency Detection: Highlights stylistic and implementation variances for correction before release.
  • Use Case: A developer auditing a new product dashboard can document standard components, detect deviations, and generate comprehensive reports for consistent UI implementation.

Quick Start

Run this skill after authenticating to your application, then browse pages to generate audit data for engineering review.

Frequently Asked Questions about design-system-extraction-cowork

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

FAQPage Schema
How do I perform a visual audit of a web application to find UI inconsistencies?▼

This Skill requires Node.js and Playwright for browser automation and DOM analysis. You must authenticate into your web application first, then execute the Skill to browse pages and generate structural audit data for UI consistency review.

What is the best way to catalog UI patterns across multiple web pages?▼

The best way to catalog UI patterns is using browser automation to interact with and analyze the DOM of each scoped page. This Skill enumerates and classifies recurring components systematically, preparing handoff assets for development and design teams.

Can I use Playwright to detect UI inconsistencies in a web application?▼

Yes, this Skill uses Playwright for browser automation to detect UI inconsistencies. It navigates through your web application, performs a detailed structural audit of the DOM, and highlights implementation variances for correction before release.

What do I need to prepare before running a web application visual audit?▼

You need Node.js and Playwright installed for browser automation and DOM analysis. You must authenticate into your web application first, then execute the Skill to browse pages and generate structural audit data for UI consistency review.

Does this visual audit tool work with authenticated web applications?▼

Yes, this visual audit tool works with authenticated web applications. You authenticate to your application first, then run the Skill to browse scoped pages, capture layout observations, and generate comprehensive UI discrepancy reports.

Related Skills

Explore More Design & Creative Skills→
appautomatonappautomaton
18

playwright-cli

Automate complex web interactions and stateful sessions via a Playwright-backed shell interface.

Official
Advanced
mixomatmixomat

brainstorm-ideas

Convert rough ideas into validated design specifications with iterative sections.

Community
Advanced
fajshahfajshah
1

browsing-with-playwright

Automate browser navigation, form interactions, and data extraction via Playwright MCP.

Community
Intermediate
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced