[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71R2Z4XVTK57CC40TPDNFG4":3,"skill-same:01M71R2Z4XVTK57CC40TPDNFG4":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":13,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M71R2Z4XVTK57CC40TPDNFG4","image-pipeline",null,"Image optimization — compress, convert WebP\u002FAVIF, resize, describe. Single-file atomic edits, batch processing, metadata extraction.","LuisAlbertoMK\u002Fgentleman-agent-gh","LuisAlbertoMK","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96153499?v=4","01M71QZX0CF9KKGQZ8ZN9BME63","01M71QZX11P5X6Z27HE1GQDF71",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fimage-pipeline\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"image pipeline","pipeline","image","compress","describe","single","image optimization","atomic","processing","single-file","webp","convert","Optimization","file","metadata","extraction","batch","docs","2026-11-10 13:02:02",false,"---\nname: image-pipeline\ndescription: \"Image optimization — compress, convert WebP\u002FAVIF, resize, describe. Single-file atomic edits, batch processing, metadata extraction.\"\ntriggers: \"compress, convert WebP\u002FAVIF, resize, describe\"\nchangelog: docs\u002Fciclos\u002Fcycle28-20260816.md\ntoken_budget: 2947\n---\n\n## When to Use\nImage optimization — compress, convert WebP\u002FAVIF, resize, describe. Single-file atomic edits, batch processing, metadata extraction.\n**NOT**: visual regression (`visual-testing`) · LLM image description of UI screens (`vision-analyze`) · page screenshot capture (`visual-testing`).\n\n## Pipeline Stages\n\n```\nInput → [Validate] → [Transform] → [Optimize] → [Verify] → Output\n```\n\n| Stage | Tools | Purpose |\n|-------|-------|---------|\n| Validate | `file`, `identify` (ImageMagick) | MIME, dimensions, corruption check |\n| Transform | `magick convert`, `cwebp`, `avifenc` | Resize, format convert, color space |\n| Optimize | `mozjpeg`, `oxipng`, `svgo` | Lossless\u002Flossy compression |\n| Verify | `compare` (SSIM\u002FPSNR), `identify` | Quality gates, regression detection |\n\n## Hard Rules\n- Match format: WebP (lossy photo) \u002F AVIF (high crunch) \u002F PNG (lossless) \u002F SVG (vector)\n- Preserve aspect ratio: no upscale beyond source\n- Strip EXIF metadata unless describe needs it\n- Responsive width units only; no hardcoded w\u002Fh px\n- Quality gate: SSIM\u002FPSNR >= 0.95 vs source; reject on regression\n\n## Output\nIMG-PIPELINE:\u003Cfile> STATUS:\u003Cok|warn|error> FORMAT:\u003Cfmt> SIZE:\u003Cbefore->after> RATIO:\u003Cpct> CHANGES:\u003Cn>\n\n## Anti-Patterns\nUpscaling beyond source | hardpx width on responsive | metadata not stripped | lossy on SVG | no SSIM gate | missing alt-text\n\n## Anti-Rationalization\n| Rationalization | Red Flag | Verification |\n|-----------------|----------|--------------|\n| \"WebP sin fallback\" | Solo WebP sin `\u003Cpicture>` srcset | `\u003Cpicture>` AVIF→WebP→PNG + srcset + fallback verify |\n| \"Describir imágenes con inventado\" | alt inventado sin metadata | Strip EXIF unless needed; describe desde metadata + SSIM≥0.95 |\n| \"Batch sin atomic edits\" | Batch sobrescribe sin verify | Single-file atomic + `compare` SSIM\u002FPSNR ≥0.95 gate |\n\n## Red Flags\n- Doing work without checking output format → STOP, re-read skill\n- Second occurrence of same rationalization → force RED zone\n\n## Verification\n- Output matches skill ## Output contract + file:line citaton\n- cross-ref-check.ps1 → SKILL.md OK\n## Cross-Refs: visual-testing | vision-analyze | web-quality-audit | performance\n\n## Verification\n- Output: response matches the ## Output contract format exactly\n- token_budget: total tokens within frontmatter token_budget\n- frontmatter: name, description, triggers, token_budget present and stable\n- cross-refs: each referenced skill exists\n- anti-patterns: none of the listed anti-patterns reintroduced\n\n---\n\n> See [reference.md](docs\u002Fskills\u002Fimage-pipeline\u002Freference.md) for extended details, examples, and detailed patterns.\n\n","## When to Use\nImage optimization — compress, convert WebP\u002FAVIF, resize, describe. Single-file atomic edits, batch processing, metadata extraction.\n**NOT**: visual regression (`visual-testing`) · LLM image description of UI screens (`vision-analyze`) · page screenshot capture (`visual-testing`).\n\n## Pipeline Stages\n\n```\nInput → [Validate] → [Transform] → [Optimize] → [Verify] → Output\n```\n\n| Stage | Tools | Purpose |\n|-------|-------|---------|\n| Validate | `file`, `identify` (ImageMagick) | MIME, dimensions, corruption check |\n| Transform | `magick convert`, `cwebp`, `avifenc` | Resize, format convert, color space |\n| Optimize | `mozjpeg`, `oxipng`, `svgo` | Lossless\u002Flossy compression |\n| Verify | `compare` (SSIM\u002FPSNR), `identify` | Quality gates, regression detection |\n\n## Hard Rules\n- Match format: WebP (lossy photo) \u002F AVIF (high crunch) \u002F PNG (lossless) \u002F SVG (vector)\n- Preserve aspect ratio: no upscale beyond source\n- Strip EXIF metadata unless describe needs it\n- Responsive width units only; no hardcoded w\u002Fh px\n- Quality gate: SSIM\u002FPSNR >= 0.95 vs source; reject on regression\n\n## Output\nIMG-PIPELINE:\u003Cfile> STATUS:\u003Cok|warn|error> FORMAT:\u003Cfmt> SIZE:\u003Cbefore->after> RATIO:\u003Cpct> CHANGES:\u003Cn>\n\n## Anti-Patterns\nUpscaling beyond source | hardpx width on responsive | metadata not stripped | lossy on SVG | no SSIM gate | missing alt-text\n\n## Anti-Rationalization\n| Rationalization | Red Flag | Verification |\n|-----------------|----------|--------------|\n| \"WebP sin fallback\" | Solo WebP sin `\u003Cpicture>` srcset | `\u003Cpicture>` AVIF→WebP→PNG + srcset + fallback verify |\n| \"Describir imágenes con inventado\" | alt inventado sin metadata | Strip EXIF unless needed; describe desde metadata + SSIM≥0.95 |\n| \"Batch sin atomic edits\" | Batch sobrescribe sin verify | Single-file atomic + `compare` SSIM\u002FPSNR ≥0.95 gate |\n\n## Red Flags\n- Doing work without checking output format → STOP, re-read skill\n- Second occurrence of same rationalization → force RED zone\n\n## Verification\n- Output matches skill ## Output contract + file:line citaton\n- cross-ref-check.ps1 → SKILL.md OK\n## Cross-Refs: visual-testing | vision-analyze | web-quality-audit | performance\n\n## Verification\n- Output: response matches the ## Output contract format exactly\n- token_budget: total tokens within frontmatter token_budget\n- frontmatter: name, description, triggers, token_budget present and stable\n- cross-refs: each referenced skill exists\n- anti-patterns: none of the listed anti-patterns reintroduced\n\n---\n\n> See [reference.md](docs\u002Fskills\u002Fimage-pipeline\u002Freference.md) for extended details, examples, and detailed patterns.\n\n",{"name":5,"triggers":46,"changelog":47,"description":7,"token_budget":48},"compress, convert WebP\u002FAVIF, resize, describe","docs\u002Fciclos\u002Fcycle28-20260816.md",2947,"main","4af6946b30783e2c8f9182082324d530fc28f838",".agents\u002Fskills\u002Fimage-pipeline","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK","2026-11-10 18:34:27",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill image-pipeline",{"tool":61,"command":62},"bunx","bunx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill image-pipeline",{"tool":64,"command":65},"pnpm","pnpm dlx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill image-pipeline","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fimage-pipeline\u002FSKILL.md",true,[],[70,111,134,154,179,205],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":90,"publishedAt":41},"01M71R7K35P668DYEPYGDQP2QA","web-quality-audit","Comprehensive web audit: performance, a11y, SEO, responsive, animation, design tokens.","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fweb-quality-audit\u002FSKILL.md",[76,79,82,87],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":80,"categoryName":81,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":88,"categoryName":89,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000035","市场营销",[91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110],"quality","quality audit","web quality audit","audit","web","Animation","design audit","design","website","ui","responsive","seo","tokens","ui audit","Lighthouse","performance","review","optimize","a11y","page",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":118,"publishedAt":41},"01M71R7H1RA7CQ568DHRK37PE2","ui-engine","UI system — Grid\u002FFlexbox\u002F@layer\u002F:has(), container queries, compositor-only animation, OKLCH tokens, component patterns","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fui-engine\u002FSKILL.md",[117],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},[119,120,100,96,121,122,123,110,124,103,125,126,127,98,128,129,130,131,132,133],"ui engine","engine","compositor","css","dark","system","mode","hooks","container","only","query","components","dark mode","grid","queries",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":142,"publishedAt":41},"01M71R7EPMZFKB833WE4B3GTHC","baseline-ui","Anti-slop UI — layout, typography, responsive, animation, tokens. Use for cleanup or polish.","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fbaseline-ui\u002FSKILL.md",[140,141],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},[143,144,100,96,145,146,147,148,103,149,127,98,150,151,152,104,153,129,132,107],"baseline ui","baseline","generic","slop","for","anti-slop","fix","interface","cleanup","design review","use",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":163,"publishedAt":41},"01M71R7CWK3FBW77Z8WD9GXQFE","skill-creator","Create new AI agent skills following Agent Skills spec -- auto-bootstrap unknown tasks, define structure, register in AGENTS.md","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fskill-creator\u002FSKILL.md",[160],{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[164,165,166,167,168,169,170,171,172,173,174,175,176,177,178],"skill creator","creator","create","structure","register","2026","spec","new","ai skill","auto","define","ai agent","unknown","tasks","bootstrap",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":187,"publishedAt":41},"01M71R78DZM1GA16F1KN8ND926","senior-engineer","Apply senior engineering competencies — system design, trade-off analysis, delegation, mentoring, and tech debt strategy","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fsenior-engineer\u002FSKILL.md",[185,186],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},[188,189,190,191,192,193,194,98,195,196,169,197,198,199,124,200,201,202,203,204],"engineer","senior","senior engineer","system design","trade-offs","senior engineering","delegation","senior architect","analysis","debt","architect","tech","strategy","apply","trade","tech debt","engineering",{"skillNo":206,"name":207,"nameZh":6,"description":208,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":209,"categories":210,"keywords":215,"publishedAt":41},"01M71R74WQTXZMG3219RND96CE","prompt-engineering","Design effective prompts using SPEARS framework — scope, principles, examples, assertions, refinements, with ReAct and multi-agent patterns","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fprompt-engineering\u002FSKILL.md",[211,214],{"categoryNo":212,"categoryName":213,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},[216,217,204,218,219,98,220,169,221,222,223,224,225,226,227,228,229,230,231,232],"prompt","prompt engineering","scope","improve","react","security","patterns","multi-agent","framework","agent patterns","assertions","examples","with","multi","principles","improve prompt","prompts"]