sg-visual-discover

What problem does it solve?

Rapidly creating and maintaining visual test manifests for web projects is time-consuming and error-prone when done manually; this Skill automates discovery of routes, interactive components, and test data to produce consistent YAML test manifests that mirror the UI navigation tree.

Core Features & Use Cases

• Framework-aware route discovery: Detects Next.js (app/pages), React Router, Vue, Angular routes, or falls back to static HTML scanning.
• Interactive element detection: Identifies forms, modals, uploads, tabs, media, and pre-fills test steps and data fixtures.
• Config and shared bricks generation: Creates visual-tests/_config.yaml, _shared/login.yaml, and organized manifest directories without overwriting existing files unless explicitly requested.
• Diff and scope modes: Supports --diff to limit generation to impacted routes, --all for full discovery, and --refresh-existing to update manifests safely.
• Dev server and credentials detection: Attempts to auto-detect build/dev server commands, dev credentials, and test assets for richer manifests.

Quick Start

Run /sg-visual-discover on your project path to scan routes, detect interactive components, and generate visual-tests YAML manifests with optional --diff or --all flags.