원클릭으로 Manus에서 모든 스킬 실행

bug-recording

스타21

포크9

업데이트2026년 6월 6일 03:58

Detect whether a target web project is a React app on Node or Bun, run it, hunt for CSS / functional / render bugs with Playwright, and record an optimized video of each bug. Use when the user runs /bug-recording or asks to find and record UI bugs in an app.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

diegopacheco

diegopacheco/ai-playground

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

bug-recording

Find bugs in a running React app and record a Playwright video of each one.

Inputs

Target app directory. Default: current project root.
Output directory. Default: <target>/bug-recording-output.

Preconditions

Verify these are on PATH and stop loudly if any is missing:

node (or bun) to run the target app.
ffmpeg for video encoding and the size-reduction pass.
This skill's own dependencies. If node_modules/playwright is absent in the skill directory, run npm install here, then npx playwright install chromium.

Run

From the skill directory:

node record.mjs <target-app-dir> [output-dir]

The script:

Detects the stack from package.json and lockfiles (React + Node/Bun, the package manager, the dev script).
Starts the dev server and waits until it reports a URL and is reachable.
Discovers routes by crawling in-app links from the root page.
Per route, captures console errors and runs three detectors:
- render: a console/page error on load or an error-boundary fallback,
- css: text clipped under overflow:hidden with no ellipsis,
- functional: an "increase"/"+"/"add" control that moves a numeric readout the wrong way.
Records a narrated Playwright walkthrough per confirmed bug: starts on the home page, moves a visible cursor to the matching nav link and clicks through to the bug page, captions each reproduction step on screen, performs the triggering click, and dwells on the result with the broken element highlighted. Then converts it to H.264 .mp4, runs reduce-size.sh to shrink it, and samples keyframes.
Writes findings.json plus videos/, frames/, screenshots/.

After running

Report the bug count and where artifacts landed.
The bugs, evidence, and per-step action logs are in findings.json. You may read the sampled frames/*.png to enrich each bug's reproduction steps before handing off to /bug-report.

Honest limits

The detectors target broad bug classes, not every possible bug. Report the captured evidence, not a verdict beyond it. The agent cannot watch the .mp4 as motion; reproduction narrative comes from the action log and sampled frames.

이 저장소의 다른 Skills

같은 저장소

effort-map

diegopacheco/ai-playground

Read the current project's current and prior Claude Code or Codex sessions, extract every prompt, score five effort metrics 0-100 with reasons, estimate average tokens and time per session, and render a self-contained light-theme HTML report. Use when the user runs /effort-map or asks how much effort, thought, bug-fixing, UX tuning, architecture care, or copy-paste slop went into a project.

2026-07-0621

bug-cataloger

diegopacheco/ai-playground

Find bugs that were encountered and solved in prior Claude Code or Codex sessions for the current project, then generate a self-contained searchable light-theme HTML bug report. Use when the user asks for a bug catalog, solved-problem history, prior-session bug report, recurring failure inventory, or a BUG to Solution report for the current repository.

2026-07-0621

hats

diegopacheco/ai-playground

Analyze a prompt with Edward de Bono's Six Thinking Hats and produce a polished, self-contained HTML report. Use when the user invokes /hats or $hats, requests Six Thinking Hats analysis, wants a decision reviewed from factual, emotional, cautious, optimistic, creative, and process perspectives, or asks for an illustrated HTML decision report.

2026-07-0521

habit-tracker

diegopacheco/ai-playground

Reads every Claude Code session in the user's config directory and renders a self-contained light-theme website with a GitHub-style contribution grid, visual metrics, and 5-10 written insights about the user's agent coding habits and what they are building. Use when the user runs /habit-tracker or asks about their coding habits, activity streak, contribution graph, what they have been building, or a recap of their Claude Code usage.

2026-06-2021

fix-git-history

diegopacheco/ai-playground

Rewrite poor git commit messages into a clear conventional-commit history. Reads the last N commits with their diffs, proposes a clean conventional message for each by reading what the code actually changed, then opens a light-theme review UI where the user approves all or each message individually before the history is rewritten. Use when the user runs /fix-git-history or asks to clean up, rewrite, normalize, or fix commit messages or git history into a conventional-commit format.

2026-06-1721

accessibility-auditor

diegopacheco/ai-playground

Audits a running web page for WCAG accessibility issues, captures a screenshot and annotates it with a numbered box over every problem, then renders a self-contained light-theme website with the score, the annotated screenshot, and a fix for each finding. Use when the user runs /accessibility-auditor or asks to audit, check, or report a site's accessibility, WCAG compliance, alt text, color contrast, labels, or screen-reader support.

2026-06-1621

name	bug-recording
description	Detect whether a target web project is a React app on Node or Bun, run it, hunt for CSS / functional / render bugs with Playwright, and record an optimized video of each bug. Use when the user runs /bug-recording or asks to find and record UI bugs in an app.

bug-recording

Find bugs in a running React app and record a Playwright video of each one.

Inputs

Target app directory. Default: current project root.
Output directory. Default: <target>/bug-recording-output.

Preconditions

Verify these are on PATH and stop loudly if any is missing:

node (or bun) to run the target app.
ffmpeg for video encoding and the size-reduction pass.
This skill's own dependencies. If node_modules/playwright is absent in the skill directory, run npm install here, then npx playwright install chromium.

Run

From the skill directory:

node record.mjs <target-app-dir> [output-dir]

The script:

Detects the stack from package.json and lockfiles (React + Node/Bun, the package manager, the dev script).
Starts the dev server and waits until it reports a URL and is reachable.
Discovers routes by crawling in-app links from the root page.
Per route, captures console errors and runs three detectors:
- render: a console/page error on load or an error-boundary fallback,
- css: text clipped under overflow:hidden with no ellipsis,
- functional: an "increase"/"+"/"add" control that moves a numeric readout the wrong way.
Records a narrated Playwright walkthrough per confirmed bug: starts on the home page, moves a visible cursor to the matching nav link and clicks through to the bug page, captions each reproduction step on screen, performs the triggering click, and dwells on the result with the broken element highlighted. Then converts it to H.264 .mp4, runs reduce-size.sh to shrink it, and samples keyframes.
Writes findings.json plus videos/, frames/, screenshots/.

After running

Report the bug count and where artifacts landed.
The bugs, evidence, and per-step action logs are in findings.json. You may read the sampled frames/*.png to enrich each bug's reproduction steps before handing off to /bug-report.