{
  "markdown": "# /thumbnail-qa\n\n**AI-powered thumbnail image QA for Next.js sites.** Detects poorly cropped images, computes optimal `object-position` values using focal point analysis, and auto-fixes with before/after screenshot evidence. Each fix gets its own atomic commit.\n\n## What it does\n\n1. **Scans your codebase** for Next.js `<Image fill>` components\n2. **Screenshots every thumbnail** in its container using a headless browser\n3. **Analyzes the original image** to find the focal point (faces, subjects, key content)\n4. **Compares the crop** against focal point rules (portraits keep forehead-to-chin, groups maximize visible faces, etc.)\n5. **Computes optimal `object-position`** values when the current crop is wrong\n6. **Applies fixes** with before/after screenshots and atomic commits\n7. **Generates a report** with results for every image\n\n## Install\n\nClaude Code:\n\n```\n/plugin marketplace add kaicianflone/thumbnail-qa-skill\n```\n\nOpenClaw:\n\n```\nclawhub install thumbnail-qa\n```\n\n### Prerequisites\n\n- [gstack](https://github.com/garrytan/gstack) installed (provides the `browse` headless browser binary)\n- A Next.js project with `<Image fill>` components\n- Dev server running on `localhost:3000` (or the skill starts one for you)\n\n## Usage\n\nIn Claude Code, just say:\n\n```\n/thumbnail-qa\n```\n\nOr use natural language:\n\n- \"Check my thumbnails\"\n- \"Fix image cropping\"\n- \"The team photos look cut off\"\n\nThe skill runs automatically after you upload new images to `/public`.\n\n## How it works\n\n### Image Registry\n\nGreps your codebase for `<Image fill>` components, reads the full file to resolve conditional classNames and dynamic src values, and builds a registry of every thumbnail candidate. Filters out logos, avatars, and intentionally letterboxed images.\n\n### Focal Point Analysis\n\nEach image is classified by type (portrait, group, architecture, event, landscape) and assigned focal point coordinates. The skill uses these rules:\n\n| Photo Type | Focal Point Priority |\n|------------|---------------------|\n| Portrait | Face fully visible, forehead to chin. Eyes in upper third. |\n| Group | Maximize visible faces. Favor horizontal center. |\n| Architecture | Full structure. Roofline and entryway both visible. |\n| Event | Primary action or speaker in frame. |\n| Landscape | Key subject centered; horizon depends on content. |\n\n### object-position Semantics\n\nThe skill understands how CSS `object-position` actually works:\n\n- `object-position: X Y` aligns the X% point of the image to the X% point of the container\n- `object-top` (= `50% 0%`) pins the top of the image to the top of the container\n- For tall portraits in short wide containers, low Y values (0-10%) show the top of the image\n\n### Fix Verification\n\nEvery fix is verified with a before/after screenshot comparison. If the fix makes things worse (computed position degrades framing vs. the original), it's reverted and flagged for manual review.\n\n## Output\n\nThe skill generates a structured report saved to `.gstack/thumbnail-qa/report-YYYY-MM-DD.md`:\n\n```\nTHUMBNAIL QA REPORT\n===================\nTotal candidates checked:  15\n  OK (no fix needed):       9\n  Repositioned:             4\n  Skipped (filtered):       1\n  Manual review needed:     1\n\nREPOSITIONED IMAGES\n-------------------\n| # | Image      | Page   | Before       | After             | Reason                    |\n|---|------------|--------|--------------|-------------------|---------------------------|\n| 1 | alice.jpg  | /about | object-top   | object-[50%_15%]  | Face centered with brow   |\n...\n```\n\n## License\n\nMIT\n",
  "bytes": 3548,
  "sha": "9e200af7f3214df7a815b391bc37d6114c73e5e66eb9bb333cca478ea48d073b",
  "repo_slug": "kaicianflone/thumbnail-qa-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_kaicianflone_thumbnail_qa_skill_6af62ea2/readme"
}