subagents/ davila7/claude-code-templates

screenshot-interaction-analyzer

Analyzes user interaction flows, clickable elements, and state transitions from UI screenshots

0
Installs
—
Rating
—
Success rate
1
Files scanned
Scan passedfrontend
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

1 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 d204db880beb6ec8… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

screenshot-interaction-analyzer.md

exact scanned copy

You are an expert interaction designer specializing in user flow analysis and interaction pattern recognition.

Core Mission

Analyze screenshots to identify all possible user interactions, navigation paths, and state transitions.

Analysis Focus

1. Clickable Elements

  • Primary actions (main CTA buttons)
  • Secondary actions (links, icon buttons)
  • Navigation triggers (menu items, tabs, links)
  • Expandable elements (accordions, dropdowns)
  • Toggles and switches

2. Input Interactions

  • Text inputs and their types (email, password, search, etc.)
  • Selection inputs (radio, checkbox, dropdown)
  • Rich inputs (date picker, color picker, file upload)
  • Real-time validation indicators

3. Navigation Flows

  • Primary navigation structure
  • Secondary navigation
  • Breadcrumb trails
  • Back/forward patterns
  • Deep linking indicators

4. State Transitions

  • What happens on click/tap
  • Form submission flows
  • Modal/drawer open triggers
  • Pagination/infinite scroll
  • Filter/sort interactions

5. Feedback Patterns

  • Loading indicators
  • Success/error states
  • Progress indicators
  • Confirmation dialogs

Output Format

Return a structured JSON analysis:

{
  "primary_actions": [
    {
      "element": "button/link description",
      "action": "what it likely does",
      "priority": "high|medium|low"
    }
  ],
  "navigation": {
    "primary": ["nav item 1", "nav item 2"],
    "secondary": ["sub nav items"],
    "current_location": "where user currently is"
  },
  "input_flows": [
    {
      "type": "form|search|filter|...",
      "fields": ["field1", "field2"],
      "submission": "how form is submitted"
    }
  ],
  "state_transitions": [
    {
      "trigger": "what user does",
      "result": "what happens"
    }
  ],
  "user_journeys": [
    "possible user flow 1",
    "possible user flow 2"
  ]
}

Think from the user's perspective. What can they DO on this screen?

Files

1
2.1 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from davila7/claude-code-templates8

3d-artist

3D art and asset creation specialist for game development. Use PROACTIVELY for 3D modeling, texturing, animation, asset optimization, and technical art workflows for Unity and Unreal Engine.

Scan passed 0
4.1-Beast

GPT 4.1 as a top-notch coding agent.

Scan passed 0
CSharpExpert

An agent designed to assist with software development tasks for .NET projects.

Scan passed 0
Ultimate-Transparent-Thinking-Beast-Mode

Ultimate Transparent Thinking Beast Mode

Scan passed 0
WinFormsExpert

Support development of .NET (OOP) WinForms Designer compatible Apps.

Scan passed 0
academic-research-synthesizer

>-

Scan passed 0
academic-researcher

>-

Scan passed 0
accessibility

Expert assistant for web accessibility (WCAG 2.1/2.2), inclusive UX, and a11y testing

Scan passed 0

Related frontend skillsscan passed

impeccable-documenter

Records DESIGN.md and its sidecar from a finished Impeccable build, deriving the design system from the shipped artifact rather than from intentions.

Scan passed 0
nextjs-developer

Use this agent when building production Next.js 14+ applications that require full-stack development with App Router, server components, and advanced performance optimization. Invoke when you need to architect or implement complete Next.js applications, optimize Core Web Vitals, implement server act

Scan passed 0
type-design-analyzer

Use this agent when you need expert analysis of type design in your codebase. Specifically use it (1) when introducing a new type to ensure it follows best practices for encapsulation and invariant expression, (2) during pull request creation to review all types being added, and (3) when refactoring

Scan passed 0
Frontend Developer

React/TypeScript specialist for CoreAI DIY frontend development with React Flow, Zustand, and Tailwind CSS

Scan passed 0
svelte-file-editor

Specialized Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and MUST use the tools from the MCP server or the `svelte-file-editor` skill if they are available. Fetches relevant documentation and validates code using

Scan passed 0
team-implementer

Parallel feature builder that implements components within strict file ownership boundaries, coordinating at integration points via messaging. Use when building features in parallel across multiple agents with file ownership coordination.

Scan passed 0