[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ADBMTBWFPZMV3GAES608GM":3,"skill-same:01M6ADBMTBWFPZMV3GAES608GM":64},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":39,"ownerHtmlUrl":40,"ownerBlogUrl":41,"ownerDescription":42,"updatedAt":43,"install":44,"resources":57},"01M6ADBMTBWFPZMV3GAES608GM","create-svg-image",null,"Wrap a raster image in an SVG and overlay a numbered red \"step\" circle for course screenshots. Use when running \u002Fcreate-svg-image, or when asked to add a numbered callout badge to an image (e.g. a red circle with a \"1\" pointing at a UI control) that must still render on a GitHub README.","github\u002Fcopilot-app-for-beginners","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6ADBDY5EBJ746TEWCCAFYY1",165,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcreate-svg-image\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,9,27,28],"create","create svg image","image","ui","screenshots","2026-11-10 10:12:30",false,"---\nname: create-svg-image\ndescription: Wrap a raster image in an SVG and overlay a numbered red \"step\" circle for course screenshots. Use when running \u002Fcreate-svg-image, or when asked to add a numbered callout badge to an image (e.g. a red circle with a \"1\" pointing at a UI control) that must still render on a GitHub README.\n---\n\n# Create SVG Image (Numbered Step Badge)\n\nUse this skill to take a screenshot or image and produce an **SVG** that shows the\nimage with a **numbered red circle** placed on top of it. This is for adding\n\"step 1 \u002F step 2\" call-out badges that point at a specific UI control in a course\nscreenshot.\n\nThe caller always provides three things:\n\n1. **The image to use** — a `.webp`, `.png`, or `.jpg` file in the repo.\n2. **The location of the numbered circle** — where on the image the circle goes,\n   in the image's native pixel coordinates (X from the left, Y from the top).\n3. **The number to apply** — the digit\u002Fshort text shown inside the circle.\n\nOptional inputs: circle `--radius`, fill `--color`, `--text-color`, and `--out`\npath.\n\n## Why This Produces an SVG (Not Inline HTML or a Plain Image Edit)\n\nGitHub renders an SVG referenced from Markdown (`![](file.svg)`) inside a\n**sandboxed `\u003Cimg>`**. In that mode GitHub:\n\n- **strips inline `\u003Csvg>`** from README HTML, so you cannot paste raw `\u003Csvg>`\n  markup into the Markdown, and\n- **refuses to fetch an external\u002Frelative** `\u003Cimage href=\"photo.webp\">`, so an SVG\n  that merely points at the raster shows a blank photo.\n\nThe reliable approach is therefore an SVG file that **embeds the raster as a\n`data:` base64 URI** and draws the `\u003Ccircle>` + `\u003Ctext>` on top. The photo renders\non GitHub and the badge stays editable as plain SVG markup. (Baking the number\ninto the PNG\u002Fwebp with an image editor also works, but then the number is no\nlonger editable text — prefer the SVG.)\n\n## Helper Script\n\n[`sample_codes\u002Fcreate-svg-badge.sh`](sample_codes\u002Fcreate-svg-badge.sh) does the\nwhole job: detects the image size and mime type, base64-encodes the raster, writes\nthe SVG, validates it with `xmllint` when available, and renders a PNG preview\nwhen a renderer is available and previews are enabled.\n\n```bash\n# Required: --image, --x, --y, --number\nbash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n  --image 02-sessions-worktrees-context\u002Fassets\u002Fapp-create-from-icon.webp \\\n  --x 710 --y 72 --number 1\n# -> writes assets\u002Fapp-create-from-icon-step1.svg and prints a PREVIEW png path\n```\n\nUseful options: `--radius` (defaults to ~2.5% of the image width so badges stay a\nconsistent on-screen size, see below), `--color \"#d1242f\"` (GitHub danger red),\n`--out PATH`, `--grid` (coordinate finder, below), `--no-preview`.\n\n## Workflow\n\n1. **Find the circle coordinates** if the caller gave an approximate spot (\"left of\n   the Create from icon\") rather than exact pixels. Run the script in `--grid`\n   mode, which overlays a labeled coordinate grid on the image and renders a\n   preview **without writing anything to the repo**:\n\n   ```bash\n   bash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n     --image \u003Cpath> --number 1 --grid\n   ```\n\n   View the printed `GRID_PREVIEW` PNG, read the green (X) and magenta (Y) labels\n   to pick the target pixel, then continue. Coordinates are in the image's native\n   pixel space (the SVG `viewBox` equals the image's pixel dimensions).\n\n2. **Generate the badged SVG** with the chosen `--x`, `--y`, and `--number`:\n\n   ```bash\n   bash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n     --image \u003Cpath> --x \u003CN> --y \u003CN> --number \u003CN>\n   ```\n\n3. **Verify by viewing the preview.** Open the printed `PREVIEW` PNG with the image\n   view tool and confirm the circle sits where the caller wanted. Note: macOS\n   `qlmanage` pads the preview to a square canvas — only the top strip (the image's\n   real height) is the actual image; the white area below is padding, not output.\n\n4. **Adjust if needed.** Nudge by re-running with new values: smaller `--x` moves\n   the circle left, larger `--x` right; `--y` moves it up\u002Fdown; `--radius` resizes\n   it (the font scales automatically). Iterate until the placement is right.\n\n5. **Wire it into the chapter** (only when the caller asks for the README change):\n   reference the new `.svg` instead of the original raster, keeping descriptive alt\n   text:\n\n   ```markdown\n   ![Create from branch](assets\u002Fapp-create-from-icon-step1.svg)\n   ```\n\n## Conventions\n\n- Default output lives **next to the source image** as\n  `\u003Cstem>-step\u003Cnumber>.svg`, matching this repo's per-chapter `assets\u002F` layout.\n- Keep the **original raster** in the repo as the editable source; it stays the\n  input even though the README now points at the `.svg`.\n- Default badge style: solid GitHub danger red `#d1242f`, white number, thin white\n  outline so it reads on light or dark screenshots.\n- **Keep the badge diameter consistent across every generated SVG.** The radius\n  defaults to **~2.5% of the image width** (the white outline and number scale with\n  it). Because GitHub scales each screenshot to the README column width, this makes\n  every badge render at the same apparent size regardless of the capture's\n  resolution. This is why a `radius 24` badge on a 936px-wide capture and a\n  `radius 56` badge on a 2240px-wide capture look identical. Only pass `--radius`\n  for a deliberate one-off; otherwise let the default keep things uniform.\n- One circle per file matches the required inputs (image + one location + one\n  number). For a multi-step figure, either generate separate `-step1`, `-step2`\n  files or hand-add extra `\u003Ccircle>`\u002F`\u003Ctext>` pairs to the SVG.\n\n## Safety and Notes\n\n- Renders previews to a temp dir (`$TMPDIR\u002Fcreate-svg-badge`), never into the repo.\n- `--grid` writes nothing to the repo; it is purely a coordinate-finding preview.\n- Screenshots may contain account names, private repo names, or paths — describe\n  the UI generically and don't surface private data when reporting placement.\n\n## Related Skills\n\n- **comic-strip-site** — builds a full webcomic-style site by wrapping\n  AI-generated character panels in inline SVG (comic frame, tailed speech\n  bubbles, terminal command bar). Shares this skill's SVG-over-raster technique\n  and the `--grid` coordinate-finding workflow, but for storytelling panels and\n  recurring cartoon characters rather than single numbered step badges.\n","# Create SVG Image (Numbered Step Badge)\n\nUse this skill to take a screenshot or image and produce an **SVG** that shows the\nimage with a **numbered red circle** placed on top of it. This is for adding\n\"step 1 \u002F step 2\" call-out badges that point at a specific UI control in a course\nscreenshot.\n\nThe caller always provides three things:\n\n1. **The image to use** — a `.webp`, `.png`, or `.jpg` file in the repo.\n2. **The location of the numbered circle** — where on the image the circle goes,\n   in the image's native pixel coordinates (X from the left, Y from the top).\n3. **The number to apply** — the digit\u002Fshort text shown inside the circle.\n\nOptional inputs: circle `--radius`, fill `--color`, `--text-color`, and `--out`\npath.\n\n## Why This Produces an SVG (Not Inline HTML or a Plain Image Edit)\n\nGitHub renders an SVG referenced from Markdown (`![](file.svg)`) inside a\n**sandboxed `\u003Cimg>`**. In that mode GitHub:\n\n- **strips inline `\u003Csvg>`** from README HTML, so you cannot paste raw `\u003Csvg>`\n  markup into the Markdown, and\n- **refuses to fetch an external\u002Frelative** `\u003Cimage href=\"photo.webp\">`, so an SVG\n  that merely points at the raster shows a blank photo.\n\nThe reliable approach is therefore an SVG file that **embeds the raster as a\n`data:` base64 URI** and draws the `\u003Ccircle>` + `\u003Ctext>` on top. The photo renders\non GitHub and the badge stays editable as plain SVG markup. (Baking the number\ninto the PNG\u002Fwebp with an image editor also works, but then the number is no\nlonger editable text — prefer the SVG.)\n\n## Helper Script\n\n[`sample_codes\u002Fcreate-svg-badge.sh`](sample_codes\u002Fcreate-svg-badge.sh) does the\nwhole job: detects the image size and mime type, base64-encodes the raster, writes\nthe SVG, validates it with `xmllint` when available, and renders a PNG preview\nwhen a renderer is available and previews are enabled.\n\n```bash\n# Required: --image, --x, --y, --number\nbash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n  --image 02-sessions-worktrees-context\u002Fassets\u002Fapp-create-from-icon.webp \\\n  --x 710 --y 72 --number 1\n# -> writes assets\u002Fapp-create-from-icon-step1.svg and prints a PREVIEW png path\n```\n\nUseful options: `--radius` (defaults to ~2.5% of the image width so badges stay a\nconsistent on-screen size, see below), `--color \"#d1242f\"` (GitHub danger red),\n`--out PATH`, `--grid` (coordinate finder, below), `--no-preview`.\n\n## Workflow\n\n1. **Find the circle coordinates** if the caller gave an approximate spot (\"left of\n   the Create from icon\") rather than exact pixels. Run the script in `--grid`\n   mode, which overlays a labeled coordinate grid on the image and renders a\n   preview **without writing anything to the repo**:\n\n   ```bash\n   bash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n     --image \u003Cpath> --number 1 --grid\n   ```\n\n   View the printed `GRID_PREVIEW` PNG, read the green (X) and magenta (Y) labels\n   to pick the target pixel, then continue. Coordinates are in the image's native\n   pixel space (the SVG `viewBox` equals the image's pixel dimensions).\n\n2. **Generate the badged SVG** with the chosen `--x`, `--y`, and `--number`:\n\n   ```bash\n   bash .github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh \\\n     --image \u003Cpath> --x \u003CN> --y \u003CN> --number \u003CN>\n   ```\n\n3. **Verify by viewing the preview.** Open the printed `PREVIEW` PNG with the image\n   view tool and confirm the circle sits where the caller wanted. Note: macOS\n   `qlmanage` pads the preview to a square canvas — only the top strip (the image's\n   real height) is the actual image; the white area below is padding, not output.\n\n4. **Adjust if needed.** Nudge by re-running with new values: smaller `--x` moves\n   the circle left, larger `--x` right; `--y` moves it up\u002Fdown; `--radius` resizes\n   it (the font scales automatically). Iterate until the placement is right.\n\n5. **Wire it into the chapter** (only when the caller asks for the README change):\n   reference the new `.svg` instead of the original raster, keeping descriptive alt\n   text:\n\n   ```markdown\n   ![Create from branch](assets\u002Fapp-create-from-icon-step1.svg)\n   ```\n\n## Conventions\n\n- Default output lives **next to the source image** as\n  `\u003Cstem>-step\u003Cnumber>.svg`, matching this repo's per-chapter `assets\u002F` layout.\n- Keep the **original raster** in the repo as the editable source; it stays the\n  input even though the README now points at the `.svg`.\n- Default badge style: solid GitHub danger red `#d1242f`, white number, thin white\n  outline so it reads on light or dark screenshots.\n- **Keep the badge diameter consistent across every generated SVG.** The radius\n  defaults to **~2.5% of the image width** (the white outline and number scale with\n  it). Because GitHub scales each screenshot to the README column width, this makes\n  every badge render at the same apparent size regardless of the capture's\n  resolution. This is why a `radius 24` badge on a 936px-wide capture and a\n  `radius 56` badge on a 2240px-wide capture look identical. Only pass `--radius`\n  for a deliberate one-off; otherwise let the default keep things uniform.\n- One circle per file matches the required inputs (image + one location + one\n  number). For a multi-step figure, either generate separate `-step1`, `-step2`\n  files or hand-add extra `\u003Ccircle>`\u002F`\u003Ctext>` pairs to the SVG.\n\n## Safety and Notes\n\n- Renders previews to a temp dir (`$TMPDIR\u002Fcreate-svg-badge`), never into the repo.\n- `--grid` writes nothing to the repo; it is purely a coordinate-finding preview.\n- Screenshots may contain account names, private repo names, or paths — describe\n  the UI generically and don't surface private data when reporting placement.\n\n## Related Skills\n\n- **comic-strip-site** — builds a full webcomic-style site by wrapping\n  AI-generated character panels in inline SVG (comic frame, tailed speech\n  bubbles, terminal command bar). Shares this skill's SVG-over-raster technique\n  and the `--grid` coordinate-finding workflow, but for storytelling panels and\n  recurring cartoon characters rather than single numbered step badges.\n",{"name":5,"description":7},"main","f4fe510c5e94fc9bbcb90d4e41a101ef8d512e84",".github\u002Fskills\u002Fcreate-svg-image",196,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners","https:\u002F\u002Fgh.io\u002Fcopilot-app-course","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-12 12:39:45",{"source":8,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add github\u002Fcopilot-app-for-beginners --skill create-svg-image",{"tool":50,"command":51},"bunx","bunx skills add github\u002Fcopilot-app-for-beginners --skill create-svg-image",{"tool":53,"command":54},"pnpm","pnpm dlx skills add github\u002Fcopilot-app-for-beginners --skill create-svg-image","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcreate-svg-image\u002FSKILL.md",true,[58],{"path":59,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":62,"sourceHtmlUrl":63},"sample_codes\u002Fcreate-svg-badge.sh","SCRIPT","脚本",9178,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcreate-svg-image\u002Fsample_codes\u002Fcreate-svg-badge.sh",[65,92,106],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":77,"publishedAt":29},"01M6ADBQXAJBTWP32YMPZJ5WRB","github-copilot-app-automation","Automate and research the GitHub Copilot app desktop experience. Use for driving Copilot App sessions, creating isolated app experiments, mapping app UI\u002Faccessibility controls, taking app screenshots, saving PNG captures, optimizing WebP images, testing prompts without submitting, using app\u002Fsession APIs, canvases, automations, macOS Accessibility, AppleScript, and safe end-to-end Copilot App workflow probes.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgithub-copilot-app-automation\u002FSKILL.md",[71,74],{"categoryNo":72,"categoryName":73,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":75,"categoryName":76,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[78,79,80,9,81,82,83,84,85,86,87,88,27,89,90,28,91],"automation","github copilot app automation","copilot","github copilot app","github copilot","accessibility","testing","safe","desktop","sessions","experiments","workflow","macos","research",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":103,"publishedAt":29},"01M6ADBJFS3ZTFFKAZGZ78P9XV","check-screenshots-content","Verify GitHub Copilot app screenshots match the course content. Use when running \u002Fcheck-screenshots-content, or when asked to confirm that app- prefixed screenshots in chapter assets folders are consistent with the README labels, button names, menu items, dialog options, and step-by-step instructions that reference them.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcheck-screenshots-content\u002FSKILL.md",[98],{"categoryNo":99,"categoryName":100,"taxonomyType":101,"taxonomyTypeDesc":102},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[28,104,105,80,9,81,82],"content","check screenshots content",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":29},"01M6ADBG6RYHZZJ3T80612P31R","book-app-reviewer","Review changes in samples\u002Fbook-app-web for accessibility, responsive layout, tests\u002Fbuild validation, and small beginner-safe changes.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fbook-app-reviewer\u002FSKILL.md",[],[113,114,83,115,85,116,117],"book app reviewer","review","validation","review changes","web"]