[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-04cb98c4-a028-49e7-9a3e-35e3fdebda5e":3,"$fl3vmIQy_Fth_mHwyblLGfVCsiSFgDa33Y4LgsuTt0SI":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"04cb98c4-a028-49e7-9a3e-35e3fdebda5e","favicon","从源图像生成favicon","cat_life_career","mod_other","sickn33,other","---\nname: favicon\nargument-hint: [path to source image]\ndescription: Generate favicons from a source image\nallowed-tools: Bash(magick *), Bash(which *), Bash(cp *), Bash(mkdir *)\ncontext: fork\nrisk: unknown\nsource: community\nmetadata:\n  author: Shpigford\n  version: \"1.0\"\n---\n\nGenerate a complete set of favicons from the source image at `$1` and update the project's HTML with the appropriate link tags.\n\n## When to Use\n- You need to generate a complete favicon set from a single source image.\n- The task includes placing the assets in the correct framework-specific static directory and updating HTML link tags.\n- You want one workflow that validates the source image, detects the project type, and writes the right favicon outputs.\n\n## Prerequisites\n\nFirst, verify ImageMagick v7+ is installed by running:\n```bash\nwhich magick\n```\n\nIf not found, stop and instruct the user to install it:\n- **macOS**: `brew install imagemagick`\n- **Linux**: `sudo apt install imagemagick`\n\n## Step 1: Validate Source Image\n\n1. Verify the source image exists at the provided path: `$1`\n2. Check the file extension is a supported format (PNG, JPG, JPEG, SVG, WEBP, GIF)\n3. If the file doesn't exist or isn't a valid image format, report the error and stop\n\nNote whether the source is an SVG file - if so, it will also be copied as `favicon.svg`.\n\n## Step 2: Detect Project Type and Static Assets Directory\n\nDetect the project type and determine where static assets should be placed. Check in this order:\n\n| Framework | Detection | Static Assets Directory |\n|-----------|-----------|------------------------|\n| **Rails** | `config\u002Froutes.rb` exists | `public\u002F` |\n| **Next.js** | `next.config.*` exists | `public\u002F` |\n| **Gatsby** | `gatsby-config.*` exists | `static\u002F` |\n| **SvelteKit** | `svelte.config.*` exists | `static\u002F` |\n| **Astro** | `astro.config.*` exists | `public\u002F` |\n| **Hugo** | `hugo.toml` or `config.toml` with Hugo markers | `static\u002F` |\n| **Jekyll** | `_config.yml` with Jekyll markers | Root directory (same as `index.html`) |\n| **Vite** | `vite.config.*` exists | `public\u002F` |\n| **Create React App** | `package.json` has `react-scripts` dependency | `public\u002F` |\n| **Vue CLI** | `vue.config.*` exists | `public\u002F` |\n| **Angular** | `angular.json` exists | `src\u002Fassets\u002F` |\n| **Eleventy** | `.eleventy.js` or `eleventy.config.*` exists | Check `_site` output or root |\n| **Static HTML** | `index.html` in root | Same directory as `index.html` |\n\n**Important**: If existing favicon files are found (e.g., `favicon.ico`, `apple-touch-icon.png`), use their location as the target directory regardless of framework detection.\n\nReport the detected project type and the static assets directory that will be used.\n\n**When in doubt, ask**: If you are not 100% confident about where static assets should be placed (e.g., ambiguous project structure, multiple potential locations, unfamiliar framework), use `AskUserQuestionTool` to confirm the target directory before proceeding. It's better to ask than to put files in the wrong place.\n\n## Step 3: Determine App Name\n\nFind the app name from these sources (in priority order):\n\n1. **Existing `site.webmanifest`** - Check the detected static assets directory for an existing manifest and extract the `name` field\n2. **`package.json`** - Extract the `name` field if it exists\n3. **Rails `config\u002Fapplication.rb`** - Extract the module name (e.g., `module MyApp` → \"MyApp\")\n4. **Directory name** - Use the current working directory name as fallback\n\nConvert the name to title case if needed (e.g., \"my-app\" → \"My App\").\n\n## Step 4: Ensure Static Assets Directory Exists\n\nCheck if the detected static assets directory exists. If not, create it.\n\n## Step 5: Generate Favicon Files\n\nRun these ImageMagick commands to generate all favicon files. Replace `[STATIC_DIR]` with the detected static assets directory from Step 2.\n\n**Important**: The `-background none` flag must come BEFORE the input file to properly preserve transparency when rendering SVGs. Placing it after the input will result in a white background.\n\n### favicon.ico (multi-resolution: 16x16, 32x32, 48x48)\n```bash\nmagick -background none \"$1\" \\\n  \\( -clone 0 -resize 16x16 \\) \\\n  \\( -clone 0 -resize 32x32 \\) \\\n  \\( -clone 0 -resize 48x48 \\) \\\n  -delete 0 -alpha on \\\n  [STATIC_DIR]\u002Ffavicon.ico\n```\n\n### favicon-96x96.png\n```bash\nmagick -background none \"$1\" -resize 96x96 -alpha on [STATIC_DIR]\u002Ffavicon-96x96.png\n```\n\n### apple-touch-icon.png (180x180)\n```bash\nmagick -background none \"$1\" -resize 180x180 -alpha on [STATIC_DIR]\u002Fapple-touch-icon.png\n```\n\n### web-app-manifest-192x192.png\n```bash\nmagick -background none \"$1\" -resize 192x192 -alpha on [STATIC_DIR]\u002Fweb-app-manifest-192x192.png\n```\n\n### web-app-manifest-512x512.png\n```bash\nmagick -background none \"$1\" -resize 512x512 -alpha on [STATIC_DIR]\u002Fweb-app-manifest-512x512.png\n```\n\n### favicon.svg (only if source is SVG)\nIf the source file has a `.svg` extension, copy it:\n```bash\ncp \"$1\" [STATIC_DIR]\u002Ffavicon.svg\n```\n\n## Step 6: Create\u002FUpdate site.webmanifest\n\nCreate or update `[STATIC_DIR]\u002Fsite.webmanifest` with this content (substitute the detected app name):\n\n```json\n{\n  \"name\": \"[APP_NAME]\",\n  \"short_name\": \"[APP_NAME]\",\n  \"icons\": [\n    {\n      \"src\": \"\u002Fweb-app-manifest-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\u002Fpng\",\n      \"purpose\": \"maskable\"\n    },\n    {\n      \"src\": \"\u002Fweb-app-manifest-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\u002Fpng\",\n      \"purpose\": \"maskable\"\n    }\n  ],\n  \"theme_color\": \"#ffffff\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}\n```\n\nIf `site.webmanifest` already exists in the static directory, preserve the existing `theme_color`, `background_color`, and `display` values while updating the `name`, `short_name`, and `icons` array.\n\n## Step 7: Update HTML\u002FLayout Files\n\nBased on the detected project type, update the appropriate file. Adjust the `href` paths based on where the static assets directory is relative to the web root:\n- If static files are in `public\u002F` or `static\u002F` and served from root → use `\u002Ffavicon.ico`\n- If static files are in `src\u002Fassets\u002F` → use `\u002Fassets\u002Ffavicon.ico`\n- If static files are in the same directory as HTML → use `.\u002Ffavicon.ico` or just `favicon.ico`\n\n### For Rails Projects\n\nEdit `app\u002Fviews\u002Flayouts\u002Fapplication.html.erb`. Find the `\u003Chead>` section and add\u002Freplace favicon-related tags with:\n\n```html\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" href=\"\u002Ffavicon-96x96.png\" sizes=\"96x96\" \u002F>\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>\n\u003Clink rel=\"shortcut icon\" href=\"\u002Ffavicon.ico\" \u002F>\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n\u003Cmeta name=\"apple-mobile-web-app-title\" content=\"[APP_NAME]\" \u002F>\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\" \u002F>\n```\n\n**Important**:\n- If the source was NOT an SVG, omit the `\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>` line\n- Remove any existing `\u003Clink rel=\"icon\"`, `\u003Clink rel=\"shortcut icon\"`, `\u003Clink rel=\"apple-touch-icon\"`, or `\u003Clink rel=\"manifest\"` tags before adding the new ones\n- Place these tags near the top of the `\u003Chead>` section, after `\u003Cmeta charset>` and `\u003Cmeta name=\"viewport\">` if present\n\n### For Next.js Projects\n\nEdit the detected layout file (`app\u002Flayout.tsx` or `src\u002Fapp\u002Flayout.tsx`). Update or add the `metadata` export to include icons configuration:\n\n```typescript\nexport const metadata: Metadata = {\n  \u002F\u002F ... keep existing metadata fields\n  icons: {\n    icon: [\n      { url: '\u002Ffavicon.ico' },\n      { url: '\u002Ffavicon-96x96.png', sizes: '96x96', type: 'image\u002Fpng' },\n      { url: '\u002Ffavicon.svg', type: 'image\u002Fsvg+xml' },\n    ],\n    shortcut: '\u002Ffavicon.ico',\n    apple: '\u002Fapple-touch-icon.png',\n  },\n  manifest: '\u002Fsite.webmanifest',\n  appleWebApp: {\n    title: '[APP_NAME]',\n  },\n};\n```\n\n**Important**:\n- If the source was NOT an SVG, omit the `{ url: '\u002Ffavicon.svg', type: 'image\u002Fsvg+xml' }` entry from the icon array\n- If metadata export doesn't exist, create it with just the icons-related fields\n- If metadata export exists, merge the icons configuration with existing fields\n\n### For Static HTML Projects\n\nEdit the detected `index.html` file. Add the same HTML as Rails within the `\u003Chead>` section.\n\n### If No Project Detected\n\nSkip HTML updates and inform the user they need to manually add the following to their HTML `\u003Chead>`:\n\n```html\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" href=\"\u002Ffavicon-96x96.png\" sizes=\"96x96\" \u002F>\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>\n\u003Clink rel=\"shortcut icon\" href=\"\u002Ffavicon.ico\" \u002F>\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n\u003Cmeta name=\"apple-mobile-web-app-title\" content=\"[APP_NAME]\" \u002F>\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\" \u002F>\n```\n\n## Step 8: Summary\n\nReport completion with:\n- Detected project type and framework\n- Static assets directory used\n- List of files generated\n- App name used in manifest and HTML\n- Layout file updated (or note if manual update is needed)\n- Note if any existing files were overwritten\n\n## Error Handling\n\n- If ImageMagick is not installed, provide installation instructions and stop\n- If the source image doesn't exist, report the exact path that was tried and stop\n- If ImageMagick commands fail, report the specific error message\n- If the layout file cannot be found for HTML updates, generate files anyway and instruct on manual HTML addition\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,150,119,"2026-05-16 13:17:45",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"6fcf860c-1d42-4a6d-baf1-768c2fcbd55a","1.0.0","favicon.zip",3623,"uploads\u002Fskills\u002F04cb98c4-a028-49e7-9a3e-35e3fdebda5e\u002Ffavicon.zip","80e1c4f12896a9b4028b8973ba35a0e18673e74f92ba6d32359ae69f4c8417fd","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":9682}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]