Screenshot Feature Complete

A multi-agent analysis skill for extracting product features, UI specifications, and implementation plans from application screenshots. Transforms visual designs into actionable development tasks with component breakdowns, interaction patterns, and accessibility requirements.

When to Use This Skill

Choose this skill when:

• Analyzing competitor app screenshots to extract feature specifications
• Converting design mockups into component hierarchies and implementation tasks
• Documenting existing UI features from screenshots for redesign projects
• Creating detailed interaction specifications from visual references
• Generating accessibility audit reports from UI screenshots

Consider alternatives when:

• Converting PSD/Figma designs to code → use a design-to-code skill
• Need OCR text extraction from images → use an OCR tool
• Building a screenshot testing tool → use a visual regression testing skill
• Working with wireframes rather than screenshots → use a wireframing skill

Quick Start

Copy
# Analyze a screenshot and extract feature specifications
# Input: screenshot file or URL
# Output: structured feature breakdown

# Using the multi-agent pipeline:
# 1. Visual Analysis Agent — identifies UI elements and layout
# 2. Feature Extraction Agent — maps elements to product features
# 3. Specification Agent — generates implementation specs

Copy
// Feature extraction output structure
interface ScreenshotAnalysis {
  layout: {
    type: 'single-column' | 'two-column' | 'dashboard' | 'form';
    sections: Section[];
  };
  components: ComponentSpec[];
  interactions: InteractionSpec[];
  accessibility: AccessibilityNote[];
  implementation: TaskBreakdown[];
}

interface ComponentSpec {
  name: string;
  type: 'navigation' | 'card' | 'form' | 'table' | 'modal' | 'chart';
  props: Record<string, string>;
  children: ComponentSpec[];
  estimatedComplexity: 'low' | 'medium' | 'high';
}

Core Concepts

Analysis Pipeline Stages

Stage	Agent	Output
Visual Scan	Layout Analyzer	Grid structure, sections, spacing
Element Detection	Component Mapper	UI elements with bounding regions
Feature Mapping	Feature Extractor	Product features with priority
Spec Generation	Specification Writer	Props, state, interactions
Task Planning	Implementation Planner	Ordered development tasks

Component Extraction Pattern

Copy
// Structured output from screenshot analysis
const analysisResult = {
  components: [
    {
      name: 'DashboardHeader',
      type: 'navigation',
      description: 'Top bar with logo, search, notifications, user menu',
      props: {
        user: 'User object with avatar and name',
        notificationCount: 'number',
        searchPlaceholder: 'string',
      },
      interactions: [
        'Search input with autocomplete dropdown',
        'Notification bell opens popover with list',
        'User avatar opens dropdown menu',
      ],
      accessibility: [
        'Search: aria-label, aria-expanded for autocomplete',
        'Notifications: aria-live region for count updates',
        'User menu: keyboard navigable with escape to close',
      ],
    },
    {
      name: 'MetricsGrid',
      type: 'card',
      description: '4-column grid of KPI cards with trend indicators',
      props: {
        metrics: 'Array of { label, value, change, trend }',
      },
      interactions: [
        'Cards are clickable, navigate to detail view',
        'Hover shows tooltip with full number',
      ],
    },
  ],
};

Feature Priority Matrix

Copy
// Prioritize extracted features for implementation
function prioritizeFeatures(features: Feature[]): PrioritizedFeature[] {
  return features
    .map(feature => ({
      ...feature,
      priority: calculatePriority(feature),
      effort: estimateEffort(feature),
      dependencies: findDependencies(feature, features),
    }))
    .sort((a, b) => {
      // High value + low effort first
      const scoreA = a.priority / Math.max(a.effort, 1);
      const scoreB = b.priority / Math.max(b.effort, 1);
      return scoreB - scoreA;
    });
}

function estimateEffort(feature: Feature): number {
  const complexity = {
    'static-display': 1,
    'interactive-element': 2,
    'form-with-validation': 3,
    'data-visualization': 4,
    'real-time-feature': 5,
  };
  return complexity[feature.type] || 3;
}

Configuration

Parameter	Type	Default	Description
analysisDepth	string	'detailed'	Analysis level: quick, standard, or detailed
componentFramework	string	'react'	Target framework for component specs
includeAccessibility	boolean	true	Include WCAG accessibility notes
includeEstimates	boolean	true	Include effort estimates per component
outputFormat	string	'structured'	Output: structured JSON, markdown, or Jira tickets
interactionDetail	string	'full'	Interaction specs: basic clicks or full state flows

Best Practices

1. Describe WHAT to build, not HOW it looks — Focus on features and interactions rather than pixel-perfect dimensions. "Search bar with autocomplete that filters by category" is more useful than "320px wide input with 12px border-radius."

2. Extract component hierarchy top-down — Start with page layout sections, then identify components within each section, then detail sub-components. This produces a natural component tree that maps to implementation order.

3. Document all interactive states — For each interactive element, specify: default, hover, active, focus, disabled, loading, error, and empty states. A single screenshot only shows one state — infer the others from the component type and context.

4. Include data requirements with each component — Every component that displays data needs a clear specification of what data it needs, the expected shape, and how it handles loading and empty states. This prevents disconnects between frontend and API development.

5. Generate implementation tasks in dependency order — Shared components (buttons, inputs, cards) before composed components (forms, dashboards). Data fetching hooks before components that use them. Authentication before protected routes.

Common Issues

Extracted components too granular or too coarse — Finding the right abstraction level is key. A button is too granular to spec individually; an entire page is too coarse. Target reusable UI patterns: cards, list items, form groups, navigation sections.

Missing interactive states from static screenshots — A single screenshot only shows one state. Explicitly enumerate all states for each interactive element: what happens on hover, click, error, loading, and empty data. Use common UI patterns to infer missing states.

Implementation estimates wildly inaccurate — Estimates from visual analysis miss backend complexity, API design, state management, and edge cases. Treat visual estimates as the frontend portion only, and note that total implementation effort is typically 2-3x the frontend estimate.