# Frontend Testing

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-sukirman1901-frontend-expert-frontend-testing`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sukirman1901](https://agentstack.voostack.com/s/sukirman1901)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** https://github.com/sukirman1901/frontend-expert/tree/main/skills/frontend-testing
- **Website:** https://github.com/sukirman1901/frontend-expert

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-frontend-testing
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend Testing

## Overview

Prove UI behavior with a lean pyramid: mostly unit/component tests, some integration, few E2E. Prefer Testing Library queries that mirror how users interact. Include accessibility checks for interactive UI.

## When to Use

- `/test-ui` or explicit test requests
- After `/ui` when the user wants TDD or coverage for a component
- Fixing a UI bug (regression test first)

## Workflow

1. **Choose level**
   - Unit/component (~80%): render, props, states (loading/error/empty)
   - Integration (~15%): user flows across a few components
   - E2E (~5%): critical paths only (Playwright/Cypress)

2. **TDD when changing behavior**
   - Red → Green → Refactor
   - One behavior per test; name by user-visible outcome

3. **Query priority (Testing Library)**
   - Prefer: role, label, text
   - Avoid: test IDs unless no accessible name exists

4. **Must cover for interactive UI**
   - Default render
   - Loading / error / empty when those states exist
   - Primary user action (click/submit)
   - Keyboard path for custom controls when non-native
   - **Robustness (when risk is real):** double-submit / spam click, interrupt open→close mid-animation, slow network loading UI

5. **Accessibility in tests**
   - axe-core (or equivalent) on critical components when tooling exists
   - Assert accessible names on icon-only controls

6. **Visual regression (optional)**
   - Storybook + Chromatic/Percy when the project already uses them
   - Do not introduce a visual stack just for this skill

## Checklist

- [ ] Tests describe user-visible behavior
- [ ] Loading / error / empty covered when applicable
- [ ] Double-submit / interrupt paths covered when destructive or async
- [ ] No unnecessary `test-id` queries
- [ ] Regression test for bugs fixed
- [ ] A11y assertion or axe run for interactive surfaces (when tooling available)

## Depth

Full guide: `references/testing.md`. Robustness ideas also in `references/anti-patterns.md`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sukirman1901-frontend-expert-frontend-testing
- Seller: https://agentstack.voostack.com/s/sukirman1901
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.