test-ui

name	test-ui
version	1.0.0
description	[Testing] Use when you need full-site QA audit (accessibility, performance, security, SEO) with visual reports.
disable-model-invocation	false

Quick Summary

Goal: Run comprehensive UI tests on a website and generate a detailed visual report.

For individual page/component testing with Playwright scripts, use webapp-testing instead.

Workflow:

1. Discover — Browse target URL, discover all pages, components, endpoints
2. Plan Tests — Create test plan covering accessibility, responsiveness, performance, security, SEO
3. Execute — Run parallel tester subagents; capture screenshots for each test area
4. Analyze — Use visual analysis tooling to review screenshots and visual elements
5. Report — Generate Markdown report with embedded screenshots and recommendations

Key Rules:

• Test and report only — never implement fixes (this is a testing/reporting skill)
• Save all screenshots in the report directory
• Support authenticated routes via cookie/token/localStorage injection

Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).

Pre-read (design system): Load designSystem.canonicalDoc + tokenFiles from docs/project-config.json so visual/style assertions reference real token names (--brand-*, $brand-*) instead of guesses.

Activate the browser automation tooling.

Purpose

Run comprehensive UI tests on a website and generate a detailed report.

Arguments

• $1: URL - The URL of the website to test
• $2: OPTIONS - Optional test configuration (e.g., --headless, --mobile, --auth)

Testing Protected Routes (Authentication)

For testing protected routes that require authentication, follow this workflow:

Step 1: User Manual Login

Instruct the user to:

1. Open the target site in their browser
2. Log in manually with their credentials
3. Open browser DevTools (F12) → Application tab → Cookies/Storage

Step 2: Extract Auth Credentials

Ask the user to provide one of:

• Cookies: Copy cookie values (name, value, domain)
• Access Token: Copy JWT/Bearer token from localStorage or cookies
• Session Storage: Copy relevant session keys

Step 3: Inject Authentication

Use the available browser automation runner to inject credentials before testing:

# Cookies
# Add cookies before navigating to protected pages.

# Bearer token
# Set the Authorization header or localStorage token key before navigation.

# Local/session storage
# Populate the required storage keys, then reload the page.

Step 4: Run Tests

After auth injection, the browser session persists. Run tests normally with the available browser automation runner:

# Navigate and screenshot protected pages.
# Save outputs in the report directory for later analysis.

Auth Script Options

• --cookies '<json>' - Inject cookies (JSON array)
• --token '<token>' - Inject Bearer token
• --token-key '<key>' - localStorage key for token (default: access_token)
• --header '<name>' - Set HTTP header with token (e.g., Authorization)
• --local-storage '<json>' - Inject localStorage items
• --session-storage '<json>' - Inject sessionStorage items
• --reload true - Reload page after injection
• --clear true - Clear saved auth session

Workflow

• Use plan skill to organize the test plan & report in the current project directory.
• All the screenshots should be saved in the same report directory.
• Browse $URL with the specified $OPTIONS, discover all pages, components, and endpoints.
• Create a test plan based on the discovered structure
• Use multiple tester subagents or tool calls in parallel to test all pages, forms, navigation, user flows, accessibility, functionalities, usability, responsive layouts, cross-browser compatibility, performance, security, seo, etc.
• Use visual analysis tooling to analyze all screenshots and visual elements.
• Generate a comprehensive report in Markdown format, embedding all screenshots directly in the report.
• Finally respond to the user with a concise summary of findings and recommendations.
• Use AskUserQuestion tool to ask if user wants to preview the report with /preview slash command.

Output Requirements

How to write reports:

• Format: Use clear, structured Markdown with headers, lists, and code blocks where appropriate
• Include the test results summary, key findings, and screenshot references
• IMPORTANT: Ensure token efficiency while maintaining high quality.
• IMPORTANT: Sacrifice grammar for the sake of concision when writing reports.
• IMPORTANT: In reports, list any unresolved questions at the end, if any.

IMPORTANT: Stop at testing and reporting — do not start implementing the fixes. IMPORTANT: Analyze the skills catalog and activate the skills that are needed for the task during the process.

---

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ATTENTION ask user whether to skip.

• docs/project-reference/domain-entities-reference.md — Domain entity catalog, relationships, cross-service sync (read when task involves business entities/models)

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

Evidence-Based Reasoning — Speculation is FORBIDDEN. Every claim needs proof.

1. Cite file:line, grep results, or framework docs for EVERY claim
2. Declare confidence: >80% act freely, 60-80% verify first, <60% DO NOT recommend
3. Cross-service validation required for architectural changes
4. "I don't have enough evidence" is valid and expected output

BLOCKED until: - [ ] Evidence file path (file:line) - [ ] Grep search performed - [ ] 3+ similar patterns found - [ ] Confidence level stated

Forbidden without proof: "obviously", "I think", "should be", "probably", "this is because" If incomplete → output: "Insufficient evidence. Verified: [...]. Not verified: [...]."

AI Mistake Prevention — Failure modes to avoid on every task:

Re-read files after context changes. Context compaction, resume, or long-running work can make memory stale; verify current files before acting. Verify generated content against source evidence. AI hallucinates APIs, names, claims, and document facts. Check the relevant source before documenting or referencing. Check downstream references before deleting or renaming. Removing an artifact can stale docs, generated mirrors, configs, and callers; map references first. Trace the full impact chain after edits. Changing a definition can miss derived outputs and consumers. Follow the affected chain before declaring done. Verify ALL affected outputs, not just the first. One green check is not all green checks; validate every output surface the change can affect. Assume existing values are intentional — ask WHY before changing. Before changing a constant, limit, flag, wording, or pattern, read nearby context and history. Surface ambiguity before acting — don't pick silently. Multiple valid interpretations require an explicit question or stated assumption with risk. Keep shared guidance role-relevant. Universal guidance must help every receiving skill or agent; code-specific obligations belong only in code-specific protocols.

IMPORTANT MUST ATTENTION cite file:line evidence for every claim (confidence >80% to act). NEVER speculate without proof.

MUST ATTENTION apply critical + sequential thinking — every claim needs appropriate traced evidence (file:line for repo/code claims; source URL or artifact section for research, product, content, and docs claims); confidence >80% to act, <60% DO NOT recommend. Anti-hallucination: never present guess as fact, admit uncertainty freely, cross-reference independently, stay skeptical of own confidence.

MUST ATTENTION apply AI mistake prevention — verify generated content against evidence, trace downstream references before deleting or renaming, verify all affected outputs, re-read files after context loss, and surface ambiguity before acting.

Closing Reminders

IMPORTANT MUST ATTENTION — Protocols in force (concise digest of the SYNC/shared blocks this skill carries):

• Critical Thinking: apply critical + sequential thinking; traced proof, confidence >80%.
• Evidence: cite file:line for every claim; never speculate.
• AI Mistake Prevention: verify generated content against evidence, trace downstream references, verify all affected outputs, re-read after context loss, surface ambiguity.

IMPORTANT MUST ATTENTION break work into small todo tasks using TaskCreate BEFORE starting IMPORTANT MUST ATTENTION search codebase for 3+ similar patterns before creating new code IMPORTANT MUST ATTENTION cite file:line evidence for every claim (confidence >80% to act) IMPORTANT MUST ATTENTION add a final review todo task to verify work quality MANDATORY IMPORTANT MUST ATTENTION READ the following files before starting:

IMPORTANT MUST ATTENTION READ CLAUDE.md before starting

[TASK-PLANNING] Before acting, analyze task scope and systematically break it into small todo tasks and sub-tasks using TaskCreate.