Skills
.Work. You
Rest

ui-pattern-analysis

Community

Analyze UIs from code and screenshots

Design & Creative#visual-qa#design-systems#component-library#ui-analysis#screenshot-review#css-inspection
AuthorTitoPrausee
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you understand, document, and compare web UI patterns without guesswork by combining code inspection with visual review.

Core Features & Use Cases

  • Design System Discovery: Identify layout, typography, color, spacing, shadows, motion, and component patterns from a live interface.
  • Visual and Code Correlation: Merge DOM structure, computed styles, and screenshots to produce a high-confidence pattern inventory.
  • Use Cases: Reverse-engineer a reference site, compare implementation against a design, or build a reusable personal library of interface patterns over time.

Quick Start

Analyze the attached website or URL and produce a structured UI pattern report with layout, colors, typography, components, and unique design signatures.

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: ui-pattern-analysis
Download link: https://github.com/TitoPrausee/nexus-toti/archive/main.zip#ui-pattern-analysis

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 536,000+ vetted skills library on demand.