frontend-testing-debugging

frontend-testing-debugging is a skill for Claude Code, Codex from fcakyon/claude-codex-settings. It costs 76 tokens per session (1,982 once invoked), scanned A, original, Apache-2.0.

A workflow for testing and debugging rendered web interfaces, including local development servers, interactions, browser-console errors, responsive layouts, and visual changes.

In plain words
What is it for?
Use it to fix or validate web pages and applications, reproduce interaction problems, inspect console errors, and check behavior across screen sizes.
Why use it?
It gives frontend changes a repeatable check in the running application instead of relying only on source-code inspection. It also helps investigate bugs that appear only when a user interacts with the page.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also agents/openai.yaml present.

Part of the frontend-design-skills plugin — 4 skills shipped together

Good fit Use it to fix or validate web pages and applications, reproduce interaction problems, inspect console errors, and check behavior across screen sizes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/fcakyon/claude-codex-settings/frontend-testing-debugging
About the project

claude-codex-settings is a collection of configurations and reusable extensions for Claude Code, OpenAI Codex, Cursor, and related coding tools. Developers use its skills, commands, hooks, agents, plugins, and MCP servers to shape coding-agent workflows and connect alternative model APIs. The catalogue entries are components of this collection that can be installed into supported coding tools.

fcakyon/claude-codex-settings · 1,181 stars · on GitHub · claudesettings.com

Install

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.

Any agent
npx skills add fcakyon/claude-codex-settings --skill frontend-testing-debugging
Clone the repo
git clone --depth 1 https://github.com/fcakyon/claude-codex-settings

Made for: Claude Code, Codex.

Or install frontend-design-skills, the plugin that ships this one along with the rest of its 4 skills.

Wrote 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.

agentmods badge for frontend-testing-debugging

README.md
[![agentmods](https://agentmods.dev/badge/skills/fcakyon/claude-codex-settings/frontend-testing-debugging/github.svg)](https://agentmods.dev/skills/fcakyon/claude-codex-settings/frontend-testing-debugging)
Your own site
<a href="https://agentmods.dev/skills/fcakyon/claude-codex-settings/frontend-testing-debugging"><img src="https://agentmods.dev/badge/skills/fcakyon/claude-codex-settings/frontend-testing-debugging/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for frontend-testing-debugging

Your own site · 80×15
<a href="https://agentmods.dev/skills/fcakyon/claude-codex-settings/frontend-testing-debugging"><img src="https://agentmods.dev/badge/skills/fcakyon/claude-codex-settings/frontend-testing-debugging.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 76 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,982 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00076 $0.01982
Opus 5.5 $0.00030 $0.00793
Sonnet 5.5 $0.00015 $0.00396
Haiku 4.5 $0.00008 $0.00198

Measured 3d ago against content hash 17846d800214, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-testing-debugging 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 3d 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.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

plugins/frontend-design-skills/skills/frontend-testing-debugging/SKILL.md · 143 lines

How it starts

The opening of the file, as written. The whole thing — 143 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Testing Debugging

Invocation Contract

This skill should work from normal user prompts. Do not require the user to spell out Browser routing, screenshots, report shape, or fallback policy.

Use this skill when the user asks to use the Frontend Design Skills plugin, web dev plugin, frontend dev plugin, or frontend testing/debugging skill for a rendered frontend change, test, or bug investigation.

Examples that should trigger this full workflow:

  • please make an improvement to the web dashboard transaction search area and use the web dev plugin
  • use the frontend dev plugin to polish this dashboard
  • debug this UI with the Frontend Design Skills plugin
  • test this localhost app and fix the broken interaction

From a brief prompt, infer the target surface from the repo, currently open app/browser URL, nearby files, or running dev server. If the target URL is unclear, inspect the repo scripts and running local ports before asking the user.

For any code change to a rendered frontend surface, do the validation loop by default:

  1. Identify the target flow.
  2. Choose the Browser path below.
  3. Make the smallest useful edit.
  4. Validate the rendered behavior.
  5. Reply with the QA final response report.

Choose The Browser Path

First classify Browser availability:

  • Available: the Browser plugin and its browser skill are listed in the session. Read and follow that skill before any browser action.
  • Absent: the Browser plugin or browser skill is not listed. Use regular Playwright and record Browser plugin not available.
  • Invocation failed: Browser appears available, but the skill/runtime, Node REPL JavaScript setup, tab acquisition, or navigation fails. Treat this as a Browser-path blocker.

Do not use regular Playwright, external Chrome, or shell open first when Browser is available.

Only switch from a failed Browser invocation to regular Playwright if the user already allowed fallback or the task explicitly permits non-Browser validation. In that case, report the exact Browser failure and the fallback decision.

Read the full file on GitHub · 143 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

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.

  1. 3d ago First seen · 143 lines · 76 tokens per session scan A 17846d800214

Subscribe to this mod's changes

frontend-testing-debugging is a skill published in the GitHub repository fcakyon/claude-codex-settings (1,181 stars, last pushed today), licensed Apache-2.0. It adds 76 tokens to every session and 1,982 once invoked, about $0.0003 per session on Opus 5.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-10-15.

Related

Other skills, from other repositories

lov-align-wechat-uiux

A WeChat compatibility guide for finding and fixing differences between your product and WeChat's messages, chats, contacts, Moments, and interactions. It traces problems from stored data and message meaning through the interface.

lovstudio/skills · 70 tokens

chisle-audit

One-shot efficiency audit of a file, diff, or whole repo across BOTH axes at once: over-engineered code (reinvented stdlib, needless abstractions, speculative config) AND bloated prose (verbose comments, padded docstrings, redundant doc sections). Neither a pure code-minimizer nor a pure prose compressor does both in…

JayPokale/Chisle · 130 tokens

Dark Mode Bug Finder

Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.

PramodDutta/qaskills · 28 tokens

lov-maintain-partners

Maintain the Skill Publisher website's partners section AND align partner logo rows on event posters / hero strips: reuse lov-find-logo for brand logo discovery, normalize collected logos to a 240px-tall content canvas (retina-ready), rasterize SVGs via rsvg-convert before normalizing (so SVG viewBox padding gets…

lovstudio/skills · 294 tokens

lov-app-professional-design

A performance architecture workflow for desktop, web, and mobile apps that examines startup, data loading, front-end and back-end responsibilities, caching, updates, and controlled parallel work. It is intended for diagnosing and repairing slow or repeatedly reloading applications.

lovstudio/skills · 79 tokens

lov-app-optimizer

An evidence-based performance investigation method for interactive apps such as Electron, Tauri, mobile apps, and Web/PWA apps. It compares a real workload before and after changes while examining delays, CPU, memory, battery use, background work, and leaks.

lovstudio/skills · 105 tokens