Web Application Testing
anthropics/skills
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
Guide for adding new report cards to ClaudeBar that analyze local data sources and display metrics with comparison deltas.
$ npx skills add tddworks/ClaudeBar --skill add-report -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tddworks/ClaudeBar add-report --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/add-report .claude/skills/add-report && rm -rf skills-srcUse ~/.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/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .claude/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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 install https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-reportType 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.
$ npx skills add tddworks/ClaudeBar --skill add-report -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tddworks/ClaudeBar add-report --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/add-report .agents/skills/add-report && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .agents/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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.
$ npx skills add tddworks/ClaudeBar --skill add-report -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tddworks/ClaudeBar add-report --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/add-report .cursor/skills/add-report && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .cursor/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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 https://github.com/tddworks/ClaudeBar.git --path .claude/skills/add-report--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tddworks/ClaudeBar --skill add-report -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tddworks/ClaudeBar add-report --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/add-report .gemini/skills/add-report && rm -rf skills-srcUse ~/.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/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .gemini/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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.
$ gh skill install tddworks/ClaudeBar add-reportInstalls 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).
$ npx skills add tddworks/ClaudeBar --skill add-report -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/add-report .github/skills/add-report && rm -rf skills-srcUse ~/.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/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .github/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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.
$ npx skills add tddworks/ClaudeBar --skill add-report -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tddworks/ClaudeBar add-report --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tddworks/ClaudeBar.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/add-report .opencode/skills/add-report && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "add-report" agent skill from https://github.com/tddworks/ClaudeBar/tree/main/.claude/skills/add-report into .opencode/skills/add-report/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-report", 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.
add-reportGuide for adding new report cards to ClaudeBar that analyze local data sources and display metrics with comparison deltas.
Add Report is an agent skill from tddworks/ClaudeBar. Guide for adding new report cards to ClaudeBar that analyze local data sources and display metrics with comparison deltas. Use this skill when: (1) Adding a new report/analytics card (e.g., weekly summary, model breakdown, session stats) (2) Showing usage history in a new way, or reading another tool's usage logs (3) Adding comparison cards that show "today vs previous" style deltas (4) Building any feature that follows the DailyUsage pattern (days → report value → card)
Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/daily-usage-pattern.md`).
It sits in Testing & QA. The repository describes itself as: A macOS menu bar application that monitors AI coding assistant usage quotas. Keep track of your Claude, Codex, Antigravity ,and Gemini usage at a glance. The licence is Apache-2.0.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 1dcaa62. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
xcodebuildpython3From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Add Report loads about 3.1k tokens when it runs, and up to ~4k if it reads all its reference files. Until then it costs about 122 tokens; SKILL.md has 1,064 words of instructions outside code blocks.
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.
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.
The full file from tddworks/ClaudeBar at commit 1dcaa62, republished under its Apache-2.0 licence (© tddworks). 1,064 words, ~3,085 tokens.
.claude/skills/add-report/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.Add report cards that turn a login's usage history into metrics with comparison deltas, shown in the existing card style, test first.
This skill covers report-style features — cards that:
Usage history is data now (daily-usage design). A report is almost always a new view over days the login already reads, not new reading code. Place it before anything else:
| The person wants… | It is | You write |
|---|---|---|
| a new look at usage this app already reads — this week vs last, cost per model, a 30-day chart | a report over days: the page asks account.usageHistory?.days(in: range) and a value in Quotas turns the days into the report | a Quotas value + its tests, a card. No reading code |
| the same history for another tool (its own log files) | a usageHistory block in that provider's definition | JSON (paths, where, fields, prices), its golden tests — no Swift |
| history from a log format no reader understands yet | a new reader, named for the format, in Modules/DataSources/Sources/Internal/Logs/ | the reader, test-first in DataSourcesTests, then the JSON; a row in ENGINE_DESIGN §1 |
| an answer to a different question than "how much did I use?" | a capability (CANONICAL §2.1): declared in the definition, a handle on Account that is nil when not declared | design first; a runner outside the modules is supplied by the Engine (TARGET_ARCHITECTURE §10) |
Never: a field on UsageSnapshot (the kernel is shrinking toward Usage,
CANONICAL_MODEL §6),
an XxxAnalyzer / XxxAnalyzing protocol, a parser in Sources/Infrastructure, or a
vendor-named type in a module.
Reference implementation:
references/daily-usage-pattern.md— TODAY'S USAGE: Claude's logs and prices as data,UsageLogin DataSources,account.usageHistory,DailyUsageReportin Quotas,DailyUsageCardView. The Leaderboard reads 30 days the same way (login.history.days(in:)→DailyTokens.summed).
Check the design first — the docs are the source of truth (AGENTS.md): USER_JOURNEYS, CANONICAL_MODEL, TARGET_ARCHITECTURE, then the feature's
design.md.
<id>.json "usageHistory" ──► UsageLog (DataSources) one per login, built by
reader · PriceList · ProviderFactory from the definition
DayAggregator
│
popover opens (never in the background, #204)
│ ▼
account.usageHistory?.days(in: .last(14)) ──► [DailyUsageStat] (closed days from the ledger)
│
▼
WeeklyReport(days:) a rich value in Modules/Quotas: deltas, percentages, formatting
│
▼
WeeklyCardView renders what the report says — never compares or countsPhase 0: Place it and design it (get user approval)
↓
Phase 1: The report value + tests (TDD Red→Green)
↓
Phase 2: Only if needed — the definition's usageHistory, a new reader, or a capability
↓
Phase 3: Mockup, card view, reading it on popover open
↓
Phase 4: Verify, screenshots on mock data, docsDateRange (.last(n), a week, today vs yesterday).Example: this week vs last week, per login
┌────────────────────────────────────────────────────────────────────┐
│ Providers (module) Quotas (module) App │
│ │
│ account.usageHistory ─► WeeklyReport(days:) ─► WeeklyCardView │
│ .days(in: .last(14)) thisWeek / lastWeek × 3 metrics │
│ → [DailyUsageStat] deltas, %, formatted │
│ │
│ No reading code: claude.json's usageHistory already reads the logs│
└────────────────────────────────────────────────────────────────────┘| Piece | Module | One job | Test |
|---|---|---|---|
WeeklyReport | Quotas | turns days into the comparison the card shows | Tests/DomainTests/<Feature>/ |
WeeklyCardView | App | renders it | AppTests / screenshots |
(only if needed) usageHistory block, a reader, a capability | definition / DataSources / Providers | — | golden tests / DataSourcesTests / ProvidersTests |
A UI change gets a mockup in design-concept/<feature>/ on mock data first
(AGENTS.md). Present the doc change, the diagram, the pieces and the mockup;
use AskUserQuestion and wait for approval.
Name each test should <outcome> [when <situation>], in the person's words, never a method, type or mechanism verb → Naming tests.
Location: Modules/Quotas/Sources/{Name}Report.swift (beside DailyUsageReport),
tests in Tests/DomainTests/{Feature}/{Name}ReportTests.swift (beside DailyUsageReportTests).
It is built from days — [DailyUsageStat] — so it never reads a file:
public struct {Name}Report: Sendable, Equatable {
public let current: [DailyUsageStat] // e.g. this week
public let previous: [DailyUsageStat] // e.g. last week
/// The days split at `boundary`, as the page asks for them.
public init(days: [DailyUsageStat], splitAt boundary: Date) { … }
public var cost: Decimal { current.reduce(0) { $0 + $1.totalCost } }
public var costChangePercent: Double? {
let before = previous.reduce(Decimal(0)) { $0 + $1.totalCost }
guard before > 0 else { return nil } // nil when there was nothing before
…
}
public var formattedCostDelta: String { … } // "+$5.00", "-$1.20": the sign always shown
public var costProgress: Double { … } // current / (current + previous), 0…1
}Rules:
Decimal for money, TimeInterval for durations; Locale(identifier: "en_US") for currency.nil when the previous period is zero; deltas always carry a sign.isEmpty means all zero (&&, not ||).Write the tests first (state and return values, Chicago school), then the value.
Add a usageHistory block to <id>.json — files, format, where, fields,
prices, sessionGap — the shape is in the daily-usage design §2.
Golden tests in Modules/Providers/Tests/ over fixture logs (see ClaudeUsageHistoryTests).
No Swift.
A reader named for the format (JSONLinesReader, never AcmeLogReader) in
Modules/DataSources/Sources/Internal/Logs/, test-first in
Modules/DataSources/Tests/Logs/ with neutral fixtures, yielding the one
LogRecord every reader yields. Then the JSON uses it. Add its row to
ENGINE_DESIGN §1. Only scan files changed within the range (LogFileFinder).
Design it in the docs first (CANONICAL §2.1, TARGET_ARCHITECTURE): declared in
the definition, its own types in Modules/Providers, an @Observable handle on
Account that is nil when not declared — like usageHistory and
guestPasses. ProviderFactory.make builds it from the definition; a runner
that lives outside the modules (a CLI the App runs, the Keychain) is supplied by
the Engine the App builds once. The App never passes anything per provider.
Location: Sources/App/Views/{Name}CardView.swift. Match the existing
cards; DailyUsageCardView is the reference:
struct {Name}CardView: View {
let metric: {Name}Metric // one case per card
let report: {Name}Report
let delay: Double // cascading entrance
@Environment(\.appTheme) private var theme
var body: some View {
VStack(alignment: .leading, spacing: 6) {
// header: icon + LABEL · the large value · the progress bar · the delta line
}
.padding(12)
.background(/* theme.cardGradient fill + theme.glassBorder stroke */)
}
}Card styling checklist: .padding(12) · theme.cardGradient + theme.glassBorder (1pt) ·
theme.cardCornerRadius · theme.fontDesign on text · theme.textPrimary/Secondary/Tertiary ·
theme.progressTrack · hover scale 1.015 · progress bar animated with delay.
Usage history is read when the popover opens, never in the background (#204),
and per login — the page asks the selected login, as MenuContentView does:
.task(id: login.id) {
guard let history = login.usageHistory else { return } // nil: this login offers none
let days = await history.days(in: .last(14))
report = {Name}Report(days: days, splitAt: weekStart)
}The view renders report; it never compares, counts or decides from the days itself.
ProviderFactory.make builds usageHistory from the definition, and every
provider is found by ProviderCatalog.detect() (TARGET_ARCHITECTURE §10). The
App passes nothing per provider.
tuist generatexcodebuild test -workspace ClaudeBar.xcworkspace -scheme ClaudeBar-Workspace -destination 'platform=macOS,arch=arm64' — the full run; tuist test skips cached targetsscripts/demo-screenshots.sh) — screenshots, never real names, emails or usageREADME.md / design.md, one CHANGELOG line (≤300 chars), python3 scripts/gen-docs.py && python3 scripts/check-docs.py --strictusageHistory · new reader · capabilitydesign-concept/<feature>/{Name}ReportTests written first (deltas, nil percent, signs, progress, empty){Name}Report in Modules/Quotas, built from [DailyUsageStat] — greenusageHistory block + golden tests, or a format-named reader in DataSources + its ENGINE_DESIGN row, or a declared capabilityUsageSnapshot field, no analyzer protocol, no vendor-named Swift{Name}CardView matching the card styleClaudeBarAppxcodebuild test green© tddworks, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (references) in .claude/skills/add-report of tddworks/ClaudeBar.
Open the folder on GitHubat commit 1dcaa62
Add Report 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Add Report this skilltddworks/ClaudeBar | 1.5k | — | ~3.1k | Automated safety check: Pass | Apache-2.0 | |
| Web Application Testinganthropics/skills | 180k | 51 repos | ~966 | Automated safety check: Pass | Apache-2.0 | |
| Diagnosing Bugsfossasia/eventyay-interpretation | 1.6k | 32 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| TDDpietheinstrengholt/rssmonster | 564 | 30 repos | ~906 | Automated safety check: Pass | MIT | |
| TDD WorkflowhellangleZ/burn-in-cceverywhere-ralph | 112 | 11 repos | ~2.4k | Automated safety check: Pass | None | |
| TDDsanity-io/sanity | 6.4k | 20 repos | ~1k | Automated safety check: Pass | MIT |
anthropics/skills
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
fossasia/eventyay-interpretation
Diagnosis loop for hard bugs and performance regressions. An agent skill from fossasia/eventyay-interpretation.
pietheinstrengholt/rssmonster
Test-driven development. An agent skill from pietheinstrengholt/rssmonster.
hellangleZ/burn-in-cceverywhere-ralph
A skill your agent uses when writing new features, fixing bugs, or refactoring code.
sanity-io/sanity
Test-driven development with red-green-refactor loop. An agent skill from sanity-io/sanity.
Ibrahim-3d/orchestrator-supaconductor
A skill your agent uses when working with Conductor's context-driven development methodology, managing project context artifacts, or understanding the relationship between product.md, tech-stack.md…
tddworks/ClaudeBar
Add an AI provider to ClaudeBar as a JSON definition run by the one generic Provider and DataSource.
tddworks/ClaudeBar
Manage ClaudeBar's GitHub Actions CI/CD pipelines: build, test, and release workflows.
tddworks/ClaudeBar
Guide for implementing features in ClaudeBar following architecture-first design, TDD, rich domain models, and Swift 6.2 patterns.
tddworks/ClaudeBar
Guide for fixing bugs in ClaudeBar following Chicago School TDD and rich domain design.
tddworks/ClaudeBar
Guide for making improvements to existing ClaudeBar functionality using TDD.
Categories
Guide for adding new report cards to ClaudeBar that analyze local data sources and display metrics with comparison deltas. Add Report is an agent skill from tddworks/ClaudeBar. Guide for adding new report cards to ClaudeBar that analyze local data sources and display metrics with comparison deltas.
Add Report fits situations like: adding a new report/analytics card (e.g; model breakdown; showing usage history in a new way; reading another tools usage logs.
Run `npx skills add tddworks/ClaudeBar --skill add-report -a claude-code`. Or copy the skill folder (.claude/skills/add-report in tddworks/ClaudeBar) into .claude/skills/add-report in your project. Claude Code loads it when a task matches its description.
Run `npx skills add tddworks/ClaudeBar --skill add-report -a codex`. Or copy the skill folder (.claude/skills/add-report in tddworks/ClaudeBar) into .agents/skills/add-report in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tddworks/ClaudeBar --skill add-report -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-report, .gemini/skills/add-report, .github/skills/add-report and .opencode/skills/add-report in your project.
Going by SKILL.md and its folder, Add Report needs the command-line tools its instructions call (xcodebuild and python3). Our summary lists: Python 3.
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.
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.
Add Report is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 916 tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Add Report: Web Application Testing (anthropics/skills, 180k stars), Diagnosing Bugs (fossasia/eventyay-interpretation, 1.6k stars), TDD (pietheinstrengholt/rssmonster, 564 stars) and TDD Workflow (hellangleZ/burn-in-cceverywhere-ralph, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
tddworks (a GitHub organization) maintains it in tddworks/ClaudeBar, which has 1,530 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 8, 2026.
Source: tddworks/ClaudeBar on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.