---
title: "Analyze Frontend"
description: "This workflow will: 1. Analyze frontend component architecture and structure 2. Document UI frameworks and libraries in use 3. Understand state management patterns and data flow 4. Identify styling methodologies and design systems 5. Document routing and navigation patterns"
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/analyze-frontend-1
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:07:31.978Z
license: CC-BY-4.0
attribution: "Analyze Frontend — Claudary (https://claudary.paisolsolutions.com/skills/analyze-frontend-1)"
---

# Analyze Frontend
This workflow will: 1. Analyze frontend component architecture and structure 2. Document UI frameworks and libraries in use 3. Understand state management patterns and data flow 4. Identify styling methodologies and design systems 5. Document routing and navigation patterns

## Overview

# Analyze Frontend

## Description
Analyze frontend architecture and components to understand UI patterns, state management, and client-side structure.

## Usage
```
/analyze-frontend
```

## Behavior
Loads and executes the analyze-frontend workflow from `.ab-method/core/analyze-frontend.md`

This workflow will:
1. Analyze frontend component architecture and structure
2. Document UI frameworks and libraries in use
3. Understand state management patterns and data flow
4. Identify styling methodologies and design systems
5. Document routing and navigation patterns

## Workflow Details
The analyze-frontend workflow examines:
- **Component Architecture** - Understanding component structure and hierarchy
- **State Management** - Documenting data flow and state patterns
- **UI Frameworks** - Cataloging frontend frameworks and UI libraries
- **Styling Systems** - Understanding CSS methodologies and design tokens
- **Routing Patterns** - Documenting navigation and route structure

## Examples
```
/analyze-frontend
# Analyzes frontend architecture and component patterns
# Documents UI frameworks, state management, and styling approaches
# Creates frontend-specific technical documentation
```

## Alternative Usage
You can also use the traditional AB Method master controller:
```
/ab-master analyze-frontend
```

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/analyze-frontend-1) · https://claudary.paisolsolutions.com