Menu
Provides guidance on GUI testing setup, configuration, and troubleshooting. Activates when user asks about visual testing, Chrome browser testing, screenshot verification, design validation, or GUI testing configuration.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
| name | gui-testing-guide |
| description | Provides guidance on GUI testing setup, configuration, and troubleshooting. Activates when user asks about visual testing, Chrome browser testing, screenshot verification, design validation, or GUI testing configuration. |
| allowed-tools | Read, Glob, Grep |
Advisory skill for GUI testing setup, configuration, and best practices in the Delano PM system.
Activate this skill when the user:
/testing:gui commandThe GUI testing system provides automated visual verification for web applications:
| Mode | Behavior | Use Case |
|---|---|---|
mandatory | Blocks issue close if GUI tests fail | Production-critical UI, release branches |
advisory | Warns but allows close on failure | Development, iteration, experimentation |
disabled | Skips GUI testing entirely | Non-GUI projects, backend-only work |
Recommendation: Start with advisory mode during development, switch to mandatory for production-critical flows.
GUI testing is configured in .project/context/gui-testing.md.
---
created: 2026-01-02T10:00:00Z
updated: 2026-01-02T10:00:00Z
---
# GUI Testing Configuration
## Settings
type: web-application
enforcement: advisory
default_url: http://localhost:3000
---
created: 2026-01-02T10:00:00Z
updated: 2026-01-02T10:00:00Z
---
# GUI Testing Configuration
## Settings
type: web-application
enforcement: advisory
default_url: http://localhost:3000
## Smoke Routes
smoke_routes:
- path: /
name: Home Page
- path: /login
name: Login Page
- path: /dashboard
name: Dashboard
## Console Filtering
console_filters:
ignore_patterns:
- "DevTools failed to load"
- "ResizeObserver loop"
- "[HMR]"
- "Download the React DevTools"
error_threshold: 0
## AI Design Validation
design_validation:
enabled: true
pass_threshold: 7
## Screenshots
screenshots:
enabled: true
directory: .project/screenshots
| Field | Required | Description |
|---|---|---|
type | Yes | Project type: web-application or none |
enforcement | Yes | mandatory, advisory, or disabled |
default_url | Yes | Base URL for testing (usually localhost) |
smoke_routes | No | List of routes to verify on smoke tests |
console_filters.ignore_patterns | No | Console messages to ignore |
console_filters.error_threshold | No | Max allowed errors (default: 0) |
design_validation.enabled | No | Enable AI design comparison |
design_validation.pass_threshold | No | Minimum score to pass (default: 7) |
screenshots.enabled | No | Save screenshots |
screenshots.directory | No | Where to save screenshots |
Symptoms:
Solutions:
claude --chromeSymptoms:
Solutions:
default_url is correct in configSymptoms:
Solutions:
console_filters.ignore_patterns:
ignore_patterns:
- "DevTools failed to load"
- "ResizeObserver loop"
- "[HMR]"
- "third-party-lib"
error_threshold if some errors are acceptableSymptoms:
Solutions:
pass_threshold (e.g., from 7 to 6)advisory mode during developmentSymptoms:
Solutions:
screenshots.directory path is validFor better AI design validation, include in task descriptions:
Good:
Add a login form with:
- Email input field with placeholder "Enter email"
- Password input field (type=password)
- Blue "Sign In" button below the fields
- "Forgot password?" link below the button
Not as good:
Add login functionality to the page
Focus on critical user flows:
smoke_routes:
- path: /
name: Home Page
- path: /login
name: Login
- path: /dashboard
name: Main Dashboard
- path: /settings
name: User Settings
| Scenario | Recommended Mode |
|---|---|
| Active development | advisory |
| Pre-release testing | mandatory |
| Backend-only changes | disabled |
| Bug fixing UI | mandatory |
| Exploring/prototyping | advisory |
| Command | Description |
|---|---|
/testing:gui | Run GUI tests on-demand |
/testing:gui --smoke | Run smoke tests only |
/testing:gui --design "desc" | Run with design validation |
/pm:init | Configure GUI testing during project setup |
/pm:issue-close | Runs GUI tests automatically (if configured) |
/testing:gui command)For actions, use the /testing:gui command instead.
Based on SOC occupation classification
Helps query and understand JSONL change logs. Activates for activity queries, audit requests, session reviews, or questions about what changed. Read-only log analysis.
Helps gather and maintain project context. Activates for context questions, session startup help, onboarding, or detecting stale context. Read-only analysis.
Analyzes codebase structure, technology stack, and development patterns. Invokes when user asks about project structure, tech stack, onboarding, or needs agent recommendations. Read-only analysis - never modifies files.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Guides users through the spec-driven development workflow (PRD → Epic → Task). Activates when planning features, asking about workflow, or needing help with PRDs/epics/tasks. Advisory only - suggests but never creates.
