[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6BV1BWB2E4CCJKSAVG8TN89":3,"skill-same:01M6BV1BWB2E4CCJKSAVG8TN89":57},{"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":18,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":6,"ownerHtmlUrl":39,"ownerBlogUrl":40,"ownerDescription":41,"updatedAt":42,"install":43,"resources":56},"01M6BV1BWB2E4CCJKSAVG8TN89","logo",null,"Generate SVG logo alternatives with side-by-side comparison. Use when creating logos, branding, or project icons.","drn\u002Fdots","drn","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F885841?v=4","01M6BTZJR7B1RVQRJKP0S70DQS","Darren Cheng","01M6BTZJWXCK41P3Z50BV8KWD9",23,"MIT","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Flogo\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28],"generate","icons","use","project","SVG","branding","comparison","with","alternatives","when","2026-11-10 10:12:30",false,"---\nname: logo\ndescription: Generate SVG logo alternatives with side-by-side comparison. Use when creating logos, branding, or project icons.\n---\n# Logo Generation\n\nGenerate SVG logo alternatives for a project, then present them in a side-by-side comparison page for review.\n\n## Arguments\n\n- `$ARGUMENTS` - Description of the logo concept, style direction, or project name\n\n## Instructions\n\nYou are generating SVG logo alternatives and a visual comparison page. Your goal is to produce **6 distinct design directions** so the user can pick and refine.\n\n### Step 1: Understand the Brief\n\nDetermine what the logo should communicate:\n\n1. **Project name** — What is the logo for?\n2. **Core concept** — What metaphor or visual idea? (e.g., \"forge + AI agents\", \"speed + reliability\")\n3. **Style direction** — Modern\u002Fminimal, geometric, organic, playful, corporate?\n4. **Color palette** — Dark background? Brand colors? Warm\u002Fcool?\n5. **Shape** — Circle, rounded rect, hexagon, freeform?\n6. **Existing logo** — Is there a current logo to improve on? Read it first.\n\nIf unclear, ask the user before generating.\n\n### Step 2: Design 6 Alternatives\n\nCreate 6 **meaningfully different** SVG logo files. Each should explore a distinct visual direction:\n\n| # | Direction | Color | What to Try |\n|---|-----------|-------|-------------|\n| 1 | **Minimal** | Amber\u002FGold | Strip to the essential mark. One shape, one gradient. App icon clean. |\n| 2 | **Geometric** | Cyan\u002FTeal | Low-poly, faceted, angular. Crystal\u002Ftech aesthetic. |\n| 3 | **Organic** | Violet\u002FPurple | Flowing curves, natural forms. Warmth and craft. |\n| 4 | **Typographic** | Emerald\u002FGreen | Lettermark or monogram. The initial letter as hero. |\n| 5 | **Conceptual** | Rose\u002FPink | Symbolic\u002Fmetaphorical. Combine two ideas into one mark (e.g., flame + orbits). |\n| 6 | **Sci-fi** | Blue\u002FIndigo | Orbital, atomic, or space-inspired. Tech gravitas. |\n\n**CRITICAL: No text in logos.** Never use `\u003Ctext>` elements, letters, words, or typographic marks in the SVG logos. Every logo must be purely symbolic — shapes, icons, and abstract marks only. Text\u002Fwordmarks are added separately by the user if needed.\n\n**SVG quality standards:**\n- Always include explicit `width=\"200\" height=\"200\"` on the `\u003Csvg>` element (so the standalone file opens at full size in a browser — without it, a bare SVG defaults to 300×150)\n- **Namespace all `id` attributes per logo** (gradients, filters, clip paths): use `halo-1`, `core-grad-1` in `logo-alt-1.svg`, `halo-2` in `logo-alt-2.svg`, and so on. Rename both the `id` AND every `url(#id)` reference that points to it — renaming one but not the other breaks the fill. When the comparison page inlines every SVG into one document (Step 3), duplicate ids across files collide and marks render with the wrong fills.\n- **Style marks with presentation attributes or inline styles, not document CSS classes.** When inlined via `\u003Cuse>` (Step 3), the symbol is cloned into a shadow tree that host-document CSS rules do not reach, so a mark relying on a `\u003Cstyle>` block with class selectors renders differently inline than standalone. Inline `fill`\u002F`stroke` (or the `currentColor` trick) always render correctly in both contexts.\n- **Transparent background** — do not include a background `\u003Crect>`. The comparison page provides the dark background via the `.well` container. Logos must work on any background.\n- Use `\u003Cdefs>` for gradients, filters, and reusable elements\n- **For circular glow halos**, use `radialGradient` fills (not blur filters). Blur filters (`feGaussianBlur`) clip to a rectangular region and render as squares at small sizes. Use a `radialGradient` with opacity tapering to 0 at the edge, applied to a circle larger than the core element. Example:\n    ```xml\n    \u003CradialGradient id=\"halo\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n      \u003Cstop offset=\"0%\" stop-color=\"#COLOR\" stop-opacity=\"0.6\"\u002F>\n      \u003Cstop offset=\"40%\" stop-color=\"#COLOR\" stop-opacity=\"0.15\"\u002F>\n      \u003Cstop offset=\"100%\" stop-color=\"#COLOR\" stop-opacity=\"0\"\u002F>\n    \u003C\u002FradialGradient>\n    \u003Ccircle cx=\"X\" cy=\"Y\" r=\"20\" fill=\"url(#halo)\"\u002F>\n    \u003Ccircle cx=\"X\" cy=\"Y\" r=\"5\" fill=\"#COLOR\" opacity=\"0.9\"\u002F>\n    ```\n- Reserve `feGaussianBlur` for trail\u002Fpath effects where rectangular clipping is less visible\n- Use `linearGradient` for directional surfaces, `radialGradient` for point-light and glow\n- Layer elements: ambient light → structure → hero element → accents\n- Keep the viewBox at `0 0 200 200` for the main logo\n- **Center precisely**: Calculate the bounding box of all visible elements and ensure its center is at (100, 100). For asymmetric layouts (e.g., 3 nodes around a hub), offset the composition so the bounding box center — not just the primary element — sits at (100, 100). Verify: (minX + maxX) \u002F 2 ≈ 100, (minY + maxY) \u002F 2 ≈ 100.\n\nSave to the project's `assets\u002F` directory:\n- `assets\u002Flogo-alt-1.svg` through `assets\u002Flogo-alt-6.svg`\n- If there's an existing logo, include it as the \"Current\" option\n\n### Step 3: Generate Comparison Page\n\nCreate `assets\u002Flogo-compare.html` — a dark-themed grid page showing all options side-by-side.\n\n**CRITICAL: Inline the SVGs — do not use `\u003Cimg src=\"logo-alt-N.svg\">`.** A relative `\u003Cimg src>` renders on the local filesystem but breaks when the page is registered as an Argus artifact (Step 4b): the artifact viewer runs under a strict CSP with no network and no relative-path resolution, so every logo shows as a broken image. Inline each SVG instead so one page works in both contexts.\n\n**How to inline:** Define each logo once as a hidden `\u003Csymbol>`, then render it with `\u003Cuse>` at two sizes — the full-size well AND a small avatar (~36px round). The avatar is the real selection test: these marks become bot\u002FGitHub\u002FLinear avatars, and small-size legibility is what matters.\n\nTo turn a `logo-alt-N.svg` file into a symbol: copy everything **inside** its `\u003Csvg>` element into a `\u003Csymbol id=\"logo-N\" viewBox=\"0 0 200 200\">…\u003C\u002Fsymbol>`. Keep the same `viewBox` the file uses (`0 0 200 200`). Ensure ids inside each file are namespaced per logo (see Step 2) so inlined gradients\u002Ffilters do not collide.\n\n`\u003Csymbol>`\u002F`\u003Cuse>` is preferred over data-URIs: one definition per mark, small file, readable markup, and it renders both locally and in the artifact viewer.\n\n**Template:**\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Ctitle>[Project] Logo Alternatives\u003C\u002Ftitle>\n\u003Cstyle>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { background: #111; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; padding: 40px; }\n  h1 { text-align: center; color: #F59E0B; margin-bottom: 12px; font-size: 28px; }\n  .subtitle { text-align: center; color: #666; margin-bottom: 48px; font-size: 14px; }\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 40px;\n    max-width: 1000px;\n    margin: 0 auto;\n  }\n  .card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background: #1a1a1a;\n    border-radius: 16px;\n    padding: 32px 24px 24px;\n    border: 1px solid #2a2a2a;\n    transition: border-color 0.2s;\n  }\n  .card:hover { border-color: #F59E0B44; }\n  .well { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 auto 16px; background: #111; border-radius: 12px; }\n  .well svg { width: 140px; height: 140px; }\n  .avatar-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }\n  .avatar { width: 36px; height: 36px; border-radius: 50%; background: #111; padding: 4px; }\n  .avatar.light { background: #f5f5f5; }\n  .avatar svg { width: 100%; height: 100%; }\n  .card h3 { color: #F59E0B; font-size: 16px; margin-bottom: 6px; }\n  .card p { text-align: center; color: #888; font-size: 12px; line-height: 1.5; }\n  .label { display: inline-block; background: #F59E0B22; color: #F59E0B; padding: 2px 10px; border-radius: 12px; font-size: 11px; margin-bottom: 12px; }\n  .current .label { background: #22c55e22; color: #22c55e; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>[Project] Logo Alternatives\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">6 design directions. Full mark plus 36px avatar preview (dark + light).\u003C\u002Fp>\n\n  \u003C!-- Hidden symbol definitions: one \u003Csymbol> per logo, contents copied from each logo-alt-N.svg -->\n  \u003Csvg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\n    \u003Csymbol id=\"logo-1\" viewBox=\"0 0 200 200\">\u003C!-- inner contents of logo-alt-1.svg -->\u003C\u002Fsymbol>\n    \u003C!-- ... repeat \u003Csymbol id=\"logo-2\"> through \u003Csymbol id=\"logo-6\"> ... -->\n  \u003C\u002Fsvg>\n\n  \u003Cdiv class=\"grid\">\n    \u003C!-- If there is an existing logo, include it as the first card with class=\"card current\" and label CURRENT -->\n    \u003Cdiv class=\"card\">\n      \u003Cspan class=\"label\">ALT 1\u003C\u002Fspan>\n      \u003Cdiv class=\"well\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fdiv>\n      \u003Cdiv class=\"avatar-row\">\n        \u003Cspan class=\"avatar\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n        \u003Cspan class=\"avatar light\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Ch3>[Short Name]\u003C\u002Fh3>\n      \u003Cp>[1-line description]\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003C!-- ... repeat for ALT 2 through ALT 6, referencing #logo-2 .. #logo-6 ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Step 4: Open and Present\n\n1. Open the comparison HTML in the browser: `open assets\u002Flogo-compare.html`\n2. Present a summary table of all options with name and concept\n3. Offer to refine, mix elements, or apply the chosen design\n\n**Optional — register for mobile review (Argus):** If the `mcp__argus__artifact_register` tool is available, offer to register `assets\u002Flogo-compare.html` as an Argus artifact so the user can review the options on their phone. Pass the absolute path to the HTML file. This works only because Step 3 inlines the SVGs — a page using relative `\u003Cimg src>` renders as broken images in the artifact viewer. If the tool is not available, skip silently.\n\n### Step 4b: Refine the Winner (if requested)\n\nWhen the user wants to vary a single element (e.g., center color, accent style):\n1. Create 4-5 variants that ONLY change the requested element\n2. Name each variant file descriptively (e.g., `center-1-white.svg`, `center-2-gold.svg`), namespacing ids per variant (see Step 2)\n3. Generate a comparison page (`assets\u002F\u003Celement>-compare.html`) using the same inlined `\u003Csymbol>`\u002F`\u003Cuse>` template as Step 3 — do NOT use `\u003Cimg src>`, so the page renders if registered as an Argus artifact\n4. Open it for the user to pick\n5. Apply the chosen variant to the main logo and clean up variant files\n\n### Step 5: Apply the Winner\n\nWhen the user picks a logo:\n\n1. Copy it to `favicon.svg` in the project root\n2. Add the logo to the top of the project's README, centered at 120px width:\n   ```html\n   \u003Cp align=\"center\">\u003Cimg src=\"favicon.svg\" width=\"120\">\u003C\u002Fp>\n   ```\n   Insert this as the very first line, before any existing heading or content.\n3. If raster avatars are needed (GitHub org\u002FLinear\u002Fbot avatars often require PNG), export a size set (512, 256, 64) from `favicon.svg`. **`sips` cannot convert SVG to PNG** — it only handles raster formats. Use whichever of these is installed:\n   ```bash\n   rsvg-convert -w 512 -h 512 favicon.svg -o favicon-512.png   # librsvg, preferred\n   resvg favicon.svg favicon-512.png --width 512 --height 512   # resvg\n   convert -density 384 -background none favicon.svg -resize 512x512 favicon-512.png   # ImageMagick (high -density rasterizes with headroom before -resize downscales)\n   ```\n   Use a transparent background (`-background none` \u002F default for the others) so the mark drops onto any avatar background. Repeat per size, or export 512 once and downscale.\n4. Clean up the `logo-alt-*.svg` files and `logo-compare.html` (and any `*-compare.html` from Step 4b)\n\n## Design Principles\n\n1. **Distinct directions** — Each alternative should be recognizably different at a glance, not minor tweaks\n2. **SVG-native** — Use gradients, filters, and transforms. No raster effects.\n3. **Scale well** — Design should read clearly at 32px (favicon) and 200px (logo)\n4. **Dark-first** — Assume dark backgrounds. Light elements should glow.\n5. **Layered depth** — Background → ambient glow → structure → hero → sparkle\u002Faccent\n6. **Name each option** — Short, memorable names make discussion easier (\"Orbital Forge\" vs \"Alt 5\")\n7. **Unique palettes** — Each alternative MUST use a different color scheme. Never repeat the same palette across options.","# Logo Generation\n\nGenerate SVG logo alternatives for a project, then present them in a side-by-side comparison page for review.\n\n## Arguments\n\n- `$ARGUMENTS` - Description of the logo concept, style direction, or project name\n\n## Instructions\n\nYou are generating SVG logo alternatives and a visual comparison page. Your goal is to produce **6 distinct design directions** so the user can pick and refine.\n\n### Step 1: Understand the Brief\n\nDetermine what the logo should communicate:\n\n1. **Project name** — What is the logo for?\n2. **Core concept** — What metaphor or visual idea? (e.g., \"forge + AI agents\", \"speed + reliability\")\n3. **Style direction** — Modern\u002Fminimal, geometric, organic, playful, corporate?\n4. **Color palette** — Dark background? Brand colors? Warm\u002Fcool?\n5. **Shape** — Circle, rounded rect, hexagon, freeform?\n6. **Existing logo** — Is there a current logo to improve on? Read it first.\n\nIf unclear, ask the user before generating.\n\n### Step 2: Design 6 Alternatives\n\nCreate 6 **meaningfully different** SVG logo files. Each should explore a distinct visual direction:\n\n| # | Direction | Color | What to Try |\n|---|-----------|-------|-------------|\n| 1 | **Minimal** | Amber\u002FGold | Strip to the essential mark. One shape, one gradient. App icon clean. |\n| 2 | **Geometric** | Cyan\u002FTeal | Low-poly, faceted, angular. Crystal\u002Ftech aesthetic. |\n| 3 | **Organic** | Violet\u002FPurple | Flowing curves, natural forms. Warmth and craft. |\n| 4 | **Typographic** | Emerald\u002FGreen | Lettermark or monogram. The initial letter as hero. |\n| 5 | **Conceptual** | Rose\u002FPink | Symbolic\u002Fmetaphorical. Combine two ideas into one mark (e.g., flame + orbits). |\n| 6 | **Sci-fi** | Blue\u002FIndigo | Orbital, atomic, or space-inspired. Tech gravitas. |\n\n**CRITICAL: No text in logos.** Never use `\u003Ctext>` elements, letters, words, or typographic marks in the SVG logos. Every logo must be purely symbolic — shapes, icons, and abstract marks only. Text\u002Fwordmarks are added separately by the user if needed.\n\n**SVG quality standards:**\n- Always include explicit `width=\"200\" height=\"200\"` on the `\u003Csvg>` element (so the standalone file opens at full size in a browser — without it, a bare SVG defaults to 300×150)\n- **Namespace all `id` attributes per logo** (gradients, filters, clip paths): use `halo-1`, `core-grad-1` in `logo-alt-1.svg`, `halo-2` in `logo-alt-2.svg`, and so on. Rename both the `id` AND every `url(#id)` reference that points to it — renaming one but not the other breaks the fill. When the comparison page inlines every SVG into one document (Step 3), duplicate ids across files collide and marks render with the wrong fills.\n- **Style marks with presentation attributes or inline styles, not document CSS classes.** When inlined via `\u003Cuse>` (Step 3), the symbol is cloned into a shadow tree that host-document CSS rules do not reach, so a mark relying on a `\u003Cstyle>` block with class selectors renders differently inline than standalone. Inline `fill`\u002F`stroke` (or the `currentColor` trick) always render correctly in both contexts.\n- **Transparent background** — do not include a background `\u003Crect>`. The comparison page provides the dark background via the `.well` container. Logos must work on any background.\n- Use `\u003Cdefs>` for gradients, filters, and reusable elements\n- **For circular glow halos**, use `radialGradient` fills (not blur filters). Blur filters (`feGaussianBlur`) clip to a rectangular region and render as squares at small sizes. Use a `radialGradient` with opacity tapering to 0 at the edge, applied to a circle larger than the core element. Example:\n    ```xml\n    \u003CradialGradient id=\"halo\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n      \u003Cstop offset=\"0%\" stop-color=\"#COLOR\" stop-opacity=\"0.6\"\u002F>\n      \u003Cstop offset=\"40%\" stop-color=\"#COLOR\" stop-opacity=\"0.15\"\u002F>\n      \u003Cstop offset=\"100%\" stop-color=\"#COLOR\" stop-opacity=\"0\"\u002F>\n    \u003C\u002FradialGradient>\n    \u003Ccircle cx=\"X\" cy=\"Y\" r=\"20\" fill=\"url(#halo)\"\u002F>\n    \u003Ccircle cx=\"X\" cy=\"Y\" r=\"5\" fill=\"#COLOR\" opacity=\"0.9\"\u002F>\n    ```\n- Reserve `feGaussianBlur` for trail\u002Fpath effects where rectangular clipping is less visible\n- Use `linearGradient` for directional surfaces, `radialGradient` for point-light and glow\n- Layer elements: ambient light → structure → hero element → accents\n- Keep the viewBox at `0 0 200 200` for the main logo\n- **Center precisely**: Calculate the bounding box of all visible elements and ensure its center is at (100, 100). For asymmetric layouts (e.g., 3 nodes around a hub), offset the composition so the bounding box center — not just the primary element — sits at (100, 100). Verify: (minX + maxX) \u002F 2 ≈ 100, (minY + maxY) \u002F 2 ≈ 100.\n\nSave to the project's `assets\u002F` directory:\n- `assets\u002Flogo-alt-1.svg` through `assets\u002Flogo-alt-6.svg`\n- If there's an existing logo, include it as the \"Current\" option\n\n### Step 3: Generate Comparison Page\n\nCreate `assets\u002Flogo-compare.html` — a dark-themed grid page showing all options side-by-side.\n\n**CRITICAL: Inline the SVGs — do not use `\u003Cimg src=\"logo-alt-N.svg\">`.** A relative `\u003Cimg src>` renders on the local filesystem but breaks when the page is registered as an Argus artifact (Step 4b): the artifact viewer runs under a strict CSP with no network and no relative-path resolution, so every logo shows as a broken image. Inline each SVG instead so one page works in both contexts.\n\n**How to inline:** Define each logo once as a hidden `\u003Csymbol>`, then render it with `\u003Cuse>` at two sizes — the full-size well AND a small avatar (~36px round). The avatar is the real selection test: these marks become bot\u002FGitHub\u002FLinear avatars, and small-size legibility is what matters.\n\nTo turn a `logo-alt-N.svg` file into a symbol: copy everything **inside** its `\u003Csvg>` element into a `\u003Csymbol id=\"logo-N\" viewBox=\"0 0 200 200\">…\u003C\u002Fsymbol>`. Keep the same `viewBox` the file uses (`0 0 200 200`). Ensure ids inside each file are namespaced per logo (see Step 2) so inlined gradients\u002Ffilters do not collide.\n\n`\u003Csymbol>`\u002F`\u003Cuse>` is preferred over data-URIs: one definition per mark, small file, readable markup, and it renders both locally and in the artifact viewer.\n\n**Template:**\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Ctitle>[Project] Logo Alternatives\u003C\u002Ftitle>\n\u003Cstyle>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { background: #111; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; padding: 40px; }\n  h1 { text-align: center; color: #F59E0B; margin-bottom: 12px; font-size: 28px; }\n  .subtitle { text-align: center; color: #666; margin-bottom: 48px; font-size: 14px; }\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 40px;\n    max-width: 1000px;\n    margin: 0 auto;\n  }\n  .card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background: #1a1a1a;\n    border-radius: 16px;\n    padding: 32px 24px 24px;\n    border: 1px solid #2a2a2a;\n    transition: border-color 0.2s;\n  }\n  .card:hover { border-color: #F59E0B44; }\n  .well { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 auto 16px; background: #111; border-radius: 12px; }\n  .well svg { width: 140px; height: 140px; }\n  .avatar-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }\n  .avatar { width: 36px; height: 36px; border-radius: 50%; background: #111; padding: 4px; }\n  .avatar.light { background: #f5f5f5; }\n  .avatar svg { width: 100%; height: 100%; }\n  .card h3 { color: #F59E0B; font-size: 16px; margin-bottom: 6px; }\n  .card p { text-align: center; color: #888; font-size: 12px; line-height: 1.5; }\n  .label { display: inline-block; background: #F59E0B22; color: #F59E0B; padding: 2px 10px; border-radius: 12px; font-size: 11px; margin-bottom: 12px; }\n  .current .label { background: #22c55e22; color: #22c55e; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>[Project] Logo Alternatives\u003C\u002Fh1>\n  \u003Cp class=\"subtitle\">6 design directions. Full mark plus 36px avatar preview (dark + light).\u003C\u002Fp>\n\n  \u003C!-- Hidden symbol definitions: one \u003Csymbol> per logo, contents copied from each logo-alt-N.svg -->\n  \u003Csvg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\">\n    \u003Csymbol id=\"logo-1\" viewBox=\"0 0 200 200\">\u003C!-- inner contents of logo-alt-1.svg -->\u003C\u002Fsymbol>\n    \u003C!-- ... repeat \u003Csymbol id=\"logo-2\"> through \u003Csymbol id=\"logo-6\"> ... -->\n  \u003C\u002Fsvg>\n\n  \u003Cdiv class=\"grid\">\n    \u003C!-- If there is an existing logo, include it as the first card with class=\"card current\" and label CURRENT -->\n    \u003Cdiv class=\"card\">\n      \u003Cspan class=\"label\">ALT 1\u003C\u002Fspan>\n      \u003Cdiv class=\"well\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fdiv>\n      \u003Cdiv class=\"avatar-row\">\n        \u003Cspan class=\"avatar\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n        \u003Cspan class=\"avatar light\">\u003Csvg viewBox=\"0 0 200 200\">\u003Cuse href=\"#logo-1\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Ch3>[Short Name]\u003C\u002Fh3>\n      \u003Cp>[1-line description]\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003C!-- ... repeat for ALT 2 through ALT 6, referencing #logo-2 .. #logo-6 ... -->\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Step 4: Open and Present\n\n1. Open the comparison HTML in the browser: `open assets\u002Flogo-compare.html`\n2. Present a summary table of all options with name and concept\n3. Offer to refine, mix elements, or apply the chosen design\n\n**Optional — register for mobile review (Argus):** If the `mcp__argus__artifact_register` tool is available, offer to register `assets\u002Flogo-compare.html` as an Argus artifact so the user can review the options on their phone. Pass the absolute path to the HTML file. This works only because Step 3 inlines the SVGs — a page using relative `\u003Cimg src>` renders as broken images in the artifact viewer. If the tool is not available, skip silently.\n\n### Step 4b: Refine the Winner (if requested)\n\nWhen the user wants to vary a single element (e.g., center color, accent style):\n1. Create 4-5 variants that ONLY change the requested element\n2. Name each variant file descriptively (e.g., `center-1-white.svg`, `center-2-gold.svg`), namespacing ids per variant (see Step 2)\n3. Generate a comparison page (`assets\u002F\u003Celement>-compare.html`) using the same inlined `\u003Csymbol>`\u002F`\u003Cuse>` template as Step 3 — do NOT use `\u003Cimg src>`, so the page renders if registered as an Argus artifact\n4. Open it for the user to pick\n5. Apply the chosen variant to the main logo and clean up variant files\n\n### Step 5: Apply the Winner\n\nWhen the user picks a logo:\n\n1. Copy it to `favicon.svg` in the project root\n2. Add the logo to the top of the project's README, centered at 120px width:\n   ```html\n   \u003Cp align=\"center\">\u003Cimg src=\"favicon.svg\" width=\"120\">\u003C\u002Fp>\n   ```\n   Insert this as the very first line, before any existing heading or content.\n3. If raster avatars are needed (GitHub org\u002FLinear\u002Fbot avatars often require PNG), export a size set (512, 256, 64) from `favicon.svg`. **`sips` cannot convert SVG to PNG** — it only handles raster formats. Use whichever of these is installed:\n   ```bash\n   rsvg-convert -w 512 -h 512 favicon.svg -o favicon-512.png   # librsvg, preferred\n   resvg favicon.svg favicon-512.png --width 512 --height 512   # resvg\n   convert -density 384 -background none favicon.svg -resize 512x512 favicon-512.png   # ImageMagick (high -density rasterizes with headroom before -resize downscales)\n   ```\n   Use a transparent background (`-background none` \u002F default for the others) so the mark drops onto any avatar background. Repeat per size, or export 512 once and downscale.\n4. Clean up the `logo-alt-*.svg` files and `logo-compare.html` (and any `*-compare.html` from Step 4b)\n\n## Design Principles\n\n1. **Distinct directions** — Each alternative should be recognizably different at a glance, not minor tweaks\n2. **SVG-native** — Use gradients, filters, and transforms. No raster effects.\n3. **Scale well** — Design should read clearly at 32px (favicon) and 200px (logo)\n4. **Dark-first** — Assume dark backgrounds. Light elements should glow.\n5. **Layered depth** — Background → ambient glow → structure → hero → sparkle\u002Faccent\n6. **Name each option** — Short, memorable names make discussion easier (\"Orbital Forge\" vs \"Alt 5\")\n7. **Unique palettes** — Each alternative MUST use a different color scheme. Never repeat the same palette across options.",{"name":5,"description":7},"master","427f62a9fc82624977516767979411f885161ac5","agents\u002Fskills\u002Flogo",4,"https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots","https:\u002F\u002Fgithub.com\u002Fdrn","https:\u002F\u002Fdrn.dev","CTO & Co-Founder @thanx","2026-11-12 16:13:13",{"source":8,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add drn\u002Fdots --skill logo",{"tool":49,"command":50},"bunx","bunx skills add drn\u002Fdots --skill logo",{"tool":52,"command":53},"pnpm","pnpm dlx skills add drn\u002Fdots --skill logo","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Flogo\u002FSKILL.md",true,[],[58,89,109,121,145,163],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":69,"publishedAt":29},"01M70KJSG2P5Y3N95MGSGKJ8VA","batch-pr-review","Review a batch of pull requests together, describe every change in plain language, and build a private Claude artifact that eases human review, with a severity-tagged and verified findings list. Use when asked to review several PRs, a stack of PRs, PRs listed in a Slack thread or message, or to summarize a batch of PRs for a reviewer.","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Fbatch-pr-review\u002FSKILL.md",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000005","邮件与沟通","SCENARIO","使用场景",[70,71,72,73,74,75,28,76,77,78,79,80,81,82,83,84,85,86,87,88],"batch pr review","batch","pr","pr review","review","reviewer","parse","scripts","human","artifact","message","write","read","stack","gh pr","Bash","change","pull requests","slack",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":98,"publishedAt":29},"01M6BV2G3ZAS76C40S3YBY6R61","plannotator-setup-goal","Create reviewed Codex goal setup packages for long-running \u002Fgoal work. Use when the user wants to turn an idea, backlog, project mission, or vague objective into durable goal files under a project goals slug folder, with Plannotator review gates for brief, narrative plan with acceptance criteria, verification, blockers, and the final \u002Fgoal prompt.","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Fplannotator-setup-goal\u002FSKILL.md",[95],{"categoryNo":96,"categoryName":97,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000023","Skill与智能体开发",[99,100,101,102,103,104,105,106,107,108,74],"plannotator setup goal","setup","verification","plan","plannotator review","brief","acceptance","create","packages","codex",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":29},"01M6BV26Y6GTDMQZYXFRWKEC08","plannotator-annotate","Open Plannotator's annotation UI for a markdown file, converted HTML file, URL, or folder and then respond to the returned annotations.","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Fplannotator-annotate\u002FSKILL.md",[],[116,117,118,119,120],"plannotator annotate","markdown","open","ui","file",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":128,"publishedAt":29},"01M6BV44RGGTRRFGWMYCR3BQ1P","write-skill","Create or improve a Claude Code skill\u002Fslash command with best practices for structure, dynamic context, and safety. Use for creating new skills, improving existing ones, or learning skill authoring.","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Fwrite-skill\u002FSKILL.md",[127],{"categoryNo":96,"categoryName":97,"taxonomyType":67,"taxonomyTypeDesc":68},[81,129,26,130,131,132,133,134,135,21,136,137,138,139,140,141,142,143,144,106],"write skill","authoring","code skill","code","for","structure","claude code skill","context","command","improve","learning","Safety","best practices","Existing","new","skill authoring",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":151,"publishedAt":29},"01M6BV4390BFK30F1T51SAJPAV","wrapup","End-of-session checklist that detects loose ends — uncommitted changes, unmerged branches, learnings to capture, handoffs needed — and routes to the right skills. Use for session closeout, wrapping up, end of day, or \"anything else to capture\".","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Fwrapup\u002FSKILL.md",[],[147,152,153,154,133,155,156,157,158,159,21,160,161,162],"session closeout","up","changes","end of day","end","branches","learnings","checklist","session","closeout","capture",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":169,"publishedAt":29},"01M6BV41ZZ051JX2B3CB5WARZM","tts","Read text aloud using text-to-speech. Use when the user says \"speak to me\", \"read to me\", \"read this aloud\", \"say this\", \"speak the summary\", or asks to hear something spoken.","https:\u002F\u002Fgithub.com\u002Fdrn\u002Fdots\u002Fblob\u002Fmaster\u002Fagents\u002Fskills\u002Ftts\u002FSKILL.md",[],[165,21,170,82,171,172,173,174,28,175,176,177],"user","speak","text","speech","say","text-to-speech","me","summary"]