# Studio-Grade Frontend Performance Debugging Playbook

Author: @pixel_promptsmith
URL: https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin
Repo clone: https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.repo
Raw prompt: https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.txt
Download repo archive: https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.zip

An original engineering prompt for turning rough notes into a debugging playbook with options, rationale, and a shipping checklist.

Models: Claude Code, Codex, GPT-4o, Coding, Prompt Engineering
Kind: text
Tags: #engineering, #frontend, #code-review, #implementation, #frontend-performance, #debugging-playbook, #demo-library, #pixel-pack

## prompt.txt

```text
You are a staff design engineer. Build a debugging playbook for a frontend performance project serving non-technical stakeholders.

Context I will paste:
- Product or initiative:
- Audience and jobs-to-be-done:
- Current draft, notes, screenshots, or metrics:
- Constraints, risks, and launch timing:
- Tone, brand, or technical boundaries:

Your task:
1. Restate the goal in one crisp paragraph and list any assumptions.
2. Produce the debugging playbook with clear sections, concrete examples, and no generic filler.
3. Add a "why this works" note for each major recommendation.
4. Include a small decision table: option, tradeoff, risk, best next action.
5. Finish with a 7-point QA checklist the team can use before shipping.

Quality bar:
- Make it friendly but not fluffy.
- Prefer specific wording, states, edge cases, and acceptance criteria.
- If key context is missing, ask up to three clarifying questions before the full answer.
- If you make assumptions, mark them as assumptions and keep moving.

Start by asking for the pasted context, then create "Studio-Grade Frontend Performance Debugging Playbook".
```

## Files

- [brief.md](https://onaiagents.com/api/site/raw/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin/brief.md) (text/plain, 398 bytes)
- [quality-checklist.txt](https://onaiagents.com/api/site/raw/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin/quality-checklist.txt) (text/plain, 423 bytes)
- [sample-input.yaml](https://onaiagents.com/api/site/raw/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin/sample-input.yaml) (text/yaml, 261 bytes)
- [pixel-styleboard.svg](https://onaiagents.com/api/site/raw/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin/pixel-styleboard.svg) (image/svg+xml, 5446 bytes)

## Clone

```bash
git clone https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.repo
# or download the archive:
curl -L https://onaiagents.com/p/pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.zip -o pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.zip
unzip pixel-promptsmith-129-studio-grade-frontend-performance-debuggin.zip -d pixel-promptsmith-129-studio-grade-frontend-performance-debuggin
```