Agent skill

Corgispec QA UI

by ricoyudog in ricoyudog/Coding_Corgi_flow

UI walkthrough — real user path verification with screenshots, component state checks, keyboard navigation, and cross-browser testing

MITAuto-check passedTesting & QA

Install Corgispec QA UI

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .claude/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .claude/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .agents/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .agents/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .cursor/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .cursor/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/ricoyudog/Coding_Corgi_flow.git --path .claude/skills/atoms/corgispec-qa-ui

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .gemini/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .gemini/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .github/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .github/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install ricoyudog/Coding_Corgi_flow corgispec-qa-ui --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ricoyudog/Coding_Corgi_flow.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/atoms/corgispec-qa-ui .opencode/skills/corgispec-qa-ui && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "corgispec-qa-ui" agent skill from https://github.com/ricoyudog/Coding_Corgi_flow/tree/master/.claude/skills/atoms/corgispec-qa-ui into .opencode/skills/corgispec-qa-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "corgispec-qa-ui", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: corgispec-qa-ui
GitHub stars: 104
Token cost: ~1.5k tokens
SKILL.md length: 634 words
Files: 2
Skills in repo: 18
Repo updated: Aug 19, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

UI walkthrough — real user path verification with screenshots, component state checks, keyboard navigation, and cross-browser testing

Works in 9 steps: Read test cases (if available) → Define the user path → Walk the happy path → …
Tasks that involve Accessibility
SKILL.md covers Overview, When to Use, Preconditions and Steps, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Corgispec QA UI is an agent skill from ricoyudog/Coding_Corgi_flow. UI walkthrough — real user path verification with screenshots, component state checks, keyboard navigation, and cross-browser testing

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `skill.meta.json`). Compatibility notes: Requires a running application with browser access. Works with Playwright MCP or manual browser.

It sits in Testing & QA, covering Accessibility, Browser testing and Test generation. The repository describes itself as: OpenSpec GitFlow — structured AI engineering workflows with issue tracking. The licence is MIT.

When your agent uses it

Tasks that involve Accessibility
Tasks that involve Browser testing
Tasks that involve Test generation

Example prompts

“/corgispec-qa-ui”

Requirements

Compatibility (from SKILL.md): Requires a running application with browser access. Works with Playwright MCP or manual browser.

Workflow steps

9 steps, taken from the step headings in SKILL.md.

Read test cases (if available)
Define the user path
Walk the happy path
Verify component states
Test error paths
Check responsive boundaries
Verify keyboard navigation
Cross-browser spot check
Record results

What it can do on your machine

Read from SKILL.md and the folder at commit 461555c. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Requires a running application with browser access. Works with Playwright MCP or manual browser.
From compatibility in the SKILL.md frontmatter.

Context cost

Corgispec QA UI loads about 1.5k tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 634 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~37
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ricoyudog/Coding_Corgi_flow at commit 461555c, republished under its MIT licence (© ricoyudog). 634 words, ~1,504 tokens.

Download SKILL.mdSave it as .claude/skills/corgispec-qa-ui/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: corgispec-qa-ui
description: UI walkthrough — real user path verification with screenshots, component state checks, keyboard navigation, and cross-browser testing
compatibility: Requires a running application with browser access. Works with Playwright MCP or manual browser.
license: MIT
metadata.author: corgispec
metadata.version: 1.0
metadata.generatedBy: 1.0.0

Verify UI quality by walking real user paths, checking component states, and capturing evidence.

Overview

This skill guides a systematic UI walkthrough that verifies the application works correctly from a real user's perspective. It covers:

Full user path walkthroughs (enter → interact → observe → exit)
Component state verification (loading, empty, error, edge cases)
Screenshot capture as evidence (minimum 3)
Error path testing
Responsive boundary checks
Keyboard navigation verification
Cross-browser validation

When to Use

After implementing a UI feature, before marking it complete
During /corgi-review when UI verification is required
When qa-testcases.md contains UI walkthrough test cases
Standalone QA pass on any page or flow

Do not use for API-only changes, backend logic, or pure data validation.

Preconditions

Application is running and accessible in a browser
Target pages/flows are identified
Screenshot capture is available (Playwright MCP or manual)

Steps

1. Read test cases (if available)

Check for qa-testcases.md in the change directory:

openspec/changes/<change-name>/qa-testcases.md

If it exists, read and use its UI test cases as the walkthrough guide. Each test case should map to one or more steps below. If it does not exist, derive test cases from the feature's specs and tasks.

2. Define the user path

Identify the complete user journey for the feature under test:

Enter — How does the user arrive at this page/feature? (URL, navigation, redirect)
Interact — What actions does the user take? (clicks, form fills, selections)
Observe — What feedback does the user see? (success states, transitions, data updates)
Exit — How does the user leave? (navigation, completion, back button)

Document the path before executing it.

3. Walk the happy path

Execute the user path end-to-end with valid inputs:

Navigate to the entry point
Perform each interaction step
Verify each expected observation
Capture screenshot after key state transitions (minimum 1 here)
Confirm the exit state is correct

4. Verify component states

For each significant UI component in the flow, verify these states:

State	What to check
Loading	Spinner/skeleton shown, no layout shift on resolve
Empty	Empty state message displayed, no broken layout
Error	Error message shown, recovery action available
Edge	Long text truncation, maximum items, boundary values

Capture screenshot of at least one non-happy state (minimum 1 here).

Show full SKILL.md (269 more words)Show less

5. Test error paths

Trigger realistic error conditions:

Submit forms with invalid data — verify inline validation
Simulate network failure (if possible) — verify error messaging
Attempt unauthorized actions — verify graceful handling
Navigate to invalid routes — verify 404/fallback behavior

Document each error path tested and its result.

6. Check responsive boundaries

Test at these viewport breakpoints (minimum):

Breakpoint	Width	What to verify
Mobile	375px	Layout stacks, touch targets ≥44px, no horizontal scroll
Tablet	768px	Grid adjusts, navigation adapts
Desktop	1280px	Full layout, no excessive whitespace

Capture screenshot at mobile or tablet width (minimum 1 here).

Without using a mouse:

Tab through all interactive elements — verify visible focus indicator
Enter/Space activates buttons and links
Escape closes modals/dropdowns
Arrow keys navigate within lists/menus (if applicable)
No keyboard traps (user can always Tab away)

Document any keyboard navigation failures.

8. Cross-browser spot check

If the project supports multiple browsers, verify the happy path in at least one additional browser beyond the primary:

Chrome (primary)
Firefox or Safari (secondary)

Note any rendering differences or functional issues.

Reporting Format

After completing the walkthrough, produce a report in this structure:

markdown

## UI Walkthrough Report

**Feature:** <feature name>
**Date:** <date>
**Browser:** <primary browser and version>

### User Path
- Entry: <how user arrives>
- Steps: <numbered interaction steps>
- Exit: <how user leaves>

### Results

| Check | Status | Notes |
|-------|--------|-------|
| Happy path | PASS/FAIL | |
| Loading state | PASS/FAIL/SKIP | |
| Empty state | PASS/FAIL/SKIP | |
| Error state | PASS/FAIL/SKIP | |
| Edge cases | PASS/FAIL/SKIP | |
| Error paths | PASS/FAIL | |
| Responsive (mobile) | PASS/FAIL | |
| Responsive (tablet) | PASS/FAIL | |
| Keyboard navigation | PASS/FAIL | |
| Cross-browser | PASS/FAIL/SKIP | |

### Screenshots
1. <description> — <path or inline>
2. <description> — <path or inline>
3. <description> — <path or inline>

### Issues Found
- [ ] <issue description> — severity: high/medium/low
- [ ] <issue description> — severity: high/medium/low

### Verdict
PASS / FAIL (with blockers listed)

9. Record results

If part of a /corgi-review, include the report in the review evidence
If standalone, save to qa-ui-report.md in the change directory
Any blocking issues become tasks or bug reports

Tips

Take screenshots at moments of state change, not static pages
Test with realistic data volumes (not just 1-2 items)
Check that loading states actually appear (throttle network if needed)
Verify error messages are user-friendly, not stack traces
Mobile testing: check that modals/popovers don't overflow viewport

Files

SKILL.md and 1 other file in .claude/skills/atoms/corgispec-qa-ui of ricoyudog/Coding_Corgi_flow.

SKILL.md
skill.meta.json

Open the folder on GitHubat commit 461555c

Compare with similar skills

Corgispec QA UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Corgispec QA UI compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Corgispec QA UI this skillricoyudog/Coding_Corgi_flow	104	—	~1.5k	Automated safety check: Pass	MIT	1 mo ago
Selector Drift Recoverypetrkindlmann/qa-skills	168	—	~5.1k	Automated safety check: Pass	MIT	4 mo ago
Expectyonatangross/orchestkit	290	—	~4.8k	Automated safety check: Notes	MIT	today
Test Scenariosborghei/Claude-Skills	886	—	~1.9k	Automated safety check: Pass	MIT	2 days ago
Playwright VerifierCommunity-Access/accessibility-agents	423	—	~1.1k	Automated safety check: Pass	MIT	16 days ago
E2E Testingericrisco/rsc-harness	174	—	~3.2k	Automated safety check: Pass	MIT	2 days ago

Similar skills

Selector Drift Recovery
petrkindlmann/qa-skills
Bulk-regenerate broken test selectors after a UI refactor or redesign.
168 GitHub stars~5.1k tokensUpdated 4 mo ago
Testing & QAAuto-check passed
Expect
yonatangross/orchestkit
Diff-aware AI browser testing — reads the git diff, maps changes to affected pages via the route map, generates a targeted test plan, and executes it via agent-browser (Rust daemon + CDP…
290 GitHub stars~4.8k tokensUpdated today
Testing & QAAuto-check: notes
Test Scenarios
borghei/Claude-Skills
Generate test scenario coverage from a feature spec — happy paths, edge cases, error handling, accessibility, security, and performance — with a coverage analyzer that flags gaps.
886 GitHub stars~1.9k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Playwright Verifier
Community-Access/accessibility-agents
Internal helper: re-run targeted scans to confirm a fix works at runtime.
423 GitHub stars~1.1k tokensUpdated 16 days ago
Testing & QAAuto-check passed
E2E Testing
ericrisco/rsc-harness
A skill your agent uses when writing or stabilizing Playwright tests that drive a real browser through multi-step journeys — durable locators, web-first assertions, storageState auth, trace/retries…
174 GitHub stars~3.2k tokensUpdated 2 days ago
Testing & QAAuto-check passed
Playwright Scanner
Community-Access/accessibility-agents
Internal helper: behavioral scans via Playwright for keyboard and state.
423 GitHub stars~911 tokensUpdated 16 days ago
Testing & QAAuto-check passed

Questions about Corgispec QA UI

What does Corgispec QA UI do?

UI walkthrough — real user path verification with screenshots, component state checks, keyboard navigation, and cross-browser testing. Corgispec QA UI is an agent skill from ricoyudog/Coding_Corgi_flow.

When should I use Corgispec QA UI?

Corgispec QA UI fits situations like: tasks that involve Accessibility; tasks that involve Browser testing; tasks that involve Test generation.

How do I install Corgispec QA UI in Claude Code?

Run `npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a claude-code`. Or copy the skill folder (.claude/skills/atoms/corgispec-qa-ui in ricoyudog/Coding_Corgi_flow) into .claude/skills/corgispec-qa-ui in your project. Claude Code loads it when a task matches its description.

How do I install Corgispec QA UI in Codex?

Run `npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a codex`. Or copy the skill folder (.claude/skills/atoms/corgispec-qa-ui in ricoyudog/Coding_Corgi_flow) into .agents/skills/corgispec-qa-ui in your project. Codex loads it when a task matches its description.

Can I use Corgispec QA UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ricoyudog/Coding_Corgi_flow --skill corgispec-qa-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/corgispec-qa-ui, .gemini/skills/corgispec-qa-ui, .github/skills/corgispec-qa-ui and .opencode/skills/corgispec-qa-ui in your project.

What does Corgispec QA UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Corgispec QA UI is instructions for the agent only. Compatibility (from SKILL.md): Requires a running application with browser access. Works with Playwright MCP or manual browser..

Does Corgispec QA UI access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Corgispec QA UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Corgispec QA UI use?

Corgispec QA UI is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Corgispec QA UI use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Corgispec QA UI?

Skills that share tags, products or a category with Corgispec QA UI: Selector Drift Recovery (petrkindlmann/qa-skills, 168 stars), Expect (yonatangross/orchestkit, 290 stars), Test Scenarios (borghei/Claude-Skills, 886 stars) and Playwright Verifier (Community-Access/accessibility-agents, 423 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Corgispec QA UI?

ricoyudog (a GitHub user) maintains it in ricoyudog/Coding_Corgi_flow, which has 104 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on August 19, 2026.

Source: ricoyudog/Coding_Corgi_flow on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Corgispec QA UI

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Compatibility

Context cost

Safety

SKILL.md

Overview

When to Use

Preconditions

Steps

1. Read test cases (if available)

2. Define the user path

3. Walk the happy path

4. Verify component states

5. Test error paths

6. Check responsive boundaries

7. Verify keyboard navigation

8. Cross-browser spot check

Reporting Format

9. Record results

Tips

Files

Compare with similar skills

Similar skills

More from ricoyudog/Coding_Corgi_flow

Related

Questions about Corgispec QA UI