Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sukirman1901/frontend-expert --skill frontend-testinggit clone --depth 1 https://github.com/sukirman1901/frontend-expertWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sukirman1901/frontend-expert/frontend-testing)<a href="https://agentmods.dev/skills/sukirman1901/frontend-expert/frontend-testing"><img src="https://agentmods.dev/badge/skills/sukirman1901/frontend-expert/frontend-testing.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00062 | $0.00540 |
| Opus 5 | $0.00031 | $0.00270 |
| Sonnet 5 | $0.00012 | $0.00108 |
| Haiku 4.5 | $0.00006 | $0.00054 |
Grade A, and why
frontend-testing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
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-uior explicit test requests- After
/uiwhen the user wants TDD or coverage for a component - Fixing a UI bug (regression test first)
Workflow
-
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)
-
TDD when changing behavior
- Red → Green → Refactor
- One behavior per test; name by user-visible outcome
-
Query priority (Testing Library)
- Prefer: role, label, text
- Avoid: test IDs unless no accessible name exists
-
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
-
Accessibility in tests
- axe-core (or equivalent) on critical components when tooling exists
- Assert accessible names on icon-only controls
-
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-idqueries - 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.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 63 lines · 62 tokens per session scan A 0a536e02c104
frontend-testing is a skill published in the GitHub repository sukirman1901/frontend-expert (10 stars, last pushed 4d ago), licensed MIT. It adds 62 tokens to every session and 540 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
react-web
React web development with hooks, React Query, Zustand.
review-screenshot
A standard workflow for taking screenshots to check a user interface, using a dedicated review process for different verification modes.
web-dev-standards
Use when designing software architectures ('codebase-design' Deep Modules/Design-It-Twice), writing tests ('test-driven-development' mock boundaries), creating setup scripts ('interactive-wizard'), TypeScript standards, Next.js, Expo, or Monorepos.
fec-tdd-workflow
A frontend test-driven development workflow, or TDD, describes the expected behavior with a failing test, implements the smallest change to pass it, and then refactors. It covers UI components, hooks, API clients, route guards, and user workflows.
figma-to-react-workflow
Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, component library, TDD…
tdd-from-figma
Writes failing tests FIRST from Figma structure and the design token lockfile, then implementation makes them pass. Per-component TDD cycle using exact values from design-tokens.lock.json. App-type-aware: generates Chrome extension, PWA, and web app test templates. Keywords: TDD, test-driven development, Figma tests…