[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6Q2QJEGRHDX64TD48TEXRSN":3,"skill-same:01M6Q2QJEGRHDX64TD48TEXRSN":91},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":65,"commitSha":66,"skillDirectory":67,"forksCount":68,"repositoryHtmlUrl":69,"repositoryHomepageUrl":6,"ownerHtmlUrl":70,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":71,"install":72,"resources":84},"01M6Q2QJEGRHDX64TD48TEXRSN","seo-images",null,"Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, and CLS prevention. Use when user says \"image optimization\", \"alt text\", \"image SEO\", \"image size\", or \"image audit\".","ibragimov-oasis\u002Fvibe-coder","ibragimov-oasis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240665573?v=4","01M6DF78Y45R8228FHAZ7G6JXM","IBRAGIMOV MUKHAMMADJON","01M6K5ZYR8TDPAFG4R6693E2A6",3,"MIT","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-images\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"seo","seo images","images","domain","lazy","for","source\u002Fskills-seo","domain\u002Fseo","true","size","URL","loading","artifact","image","use","text","analysis","Optimization","file","performance","2026-11-10 10:12:30",false,"---\nname: seo-images\ndescription: >\n  Image optimization analysis for SEO and performance. Checks alt text, file\n  sizes, formats, responsive images, lazy loading, and CLS prevention. Use when\n  user says \"image optimization\", \"alt text\", \"image SEO\", \"image size\",\n  or \"image audit\".\nuser-invokable: true\nargument-hint: \"[url]\"\nlicense: MIT\nmetadata:\n  author: AgriciDaniel\n  version: \"1.7.0\"\n  category: seo\ntags:\n  - domain\u002Fseo\n  - artifact\u002Fskill\n  - source\u002Fskills-seo\n---\n\n# Image Optimization Analysis\n\n## Checks\n\n### Alt Text\n- Present on all `\u003Cimg>` elements (except decorative: `role=\"presentation\"`)\n- Descriptive: describes the image content, not \"image.jpg\" or \"photo\"\n- Includes relevant keywords where natural, not keyword-stuffed\n- Length: 10-125 characters\n\n**Good examples:**\n- \"Professional plumber repairing kitchen sink faucet\"\n- \"Red 2024 Toyota Camry sedan front view\"\n- \"Team meeting in modern office conference room\"\n\n**Bad examples:**\n- \"image.jpg\" (filename, not description)\n- \"plumber plumbing plumber services\" (keyword stuffing)\n- \"Click here\" (not descriptive)\n\n### File Size\n\n**Tiered thresholds by image category:**\n\n| Image Category | Target | Warning | Critical |\n|----------------|--------|---------|----------|\n| Thumbnails | \u003C 50KB | > 100KB | > 200KB |\n| Content images | \u003C 100KB | > 200KB | > 500KB |\n| Hero\u002Fbanner images | \u003C 200KB | > 300KB | > 700KB |\n\nRecommend compression to target thresholds where possible without quality loss.\n\n### Format\n| Format | Browser Support | Use Case |\n|--------|-----------------|----------|\n| WebP | 97%+ | Default recommendation |\n| AVIF | 92%+ | Best compression, newer |\n| JPEG | 100% | Fallback for photos |\n| PNG | 100% | Graphics with transparency |\n| SVG | 100% | Icons, logos, illustrations |\n\nRecommend WebP\u002FAVIF over JPEG\u002FPNG. Check for `\u003Cpicture>` element with format fallbacks.\n\n#### Recommended `\u003Cpicture>` Element Pattern\n\nUse progressive enhancement with the most efficient format first:\n\n```html\n\u003Cpicture>\n  \u003Csource srcset=\"image.avif\" type=\"image\u002Favif\">\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"Descriptive alt text\" width=\"800\" height=\"600\" loading=\"lazy\" decoding=\"async\">\n\u003C\u002Fpicture>\n```\n\nThe browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%.\n\n#### JPEG XL: Emerging Format\n\nIn November 2025, Google's Chromium team reversed its 2022 decision and announced it will restore JPEG XL support in Chrome using a Rust-based decoder. The implementation is feature-complete but not yet in Chrome stable. JPEG XL offers lossless JPEG recompression (~20% savings with zero quality loss) and competitive lossy compression. Not yet practical for web deployment, but worth monitoring for future adoption.\n\n### Responsive Images\n- `srcset` attribute for multiple sizes\n- `sizes` attribute matching layout breakpoints\n- Appropriate resolution for device pixel ratios\n\n```html\n\u003Cimg\n  src=\"image-800.jpg\"\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\n  alt=\"Description\"\n>\n```\n\n### Lazy Loading\n- `loading=\"lazy\"` on below-fold images\n- Do NOT lazy-load above-fold\u002Fhero images (hurts LCP)\n- Check for native vs JavaScript-based lazy loading\n\n```html\n\u003C!-- Below fold - lazy load -->\n\u003Cimg src=\"photo.jpg\" loading=\"lazy\" alt=\"Description\">\n\n\u003C!-- Above fold - eager load (default) -->\n\u003Cimg src=\"hero.jpg\" alt=\"Hero image\">\n```\n\n### `fetchpriority=\"high\"` for LCP Images\n\nAdd `fetchpriority=\"high\"` to your hero\u002FLCP image to prioritize its download in the browser's network queue:\n\n```html\n\u003Cimg src=\"hero.webp\" fetchpriority=\"high\" alt=\"Hero image description\" width=\"1200\" height=\"630\">\n```\n\n**Critical:** Do NOT lazy-load above-the-fold\u002FLCP images. Using `loading=\"lazy\"` on LCP images directly harms LCP scores. Reserve `loading=\"lazy\"` for below-the-fold images only.\n\n### `decoding=\"async\"` for Non-LCP Images\n\nAdd `decoding=\"async\"` to non-LCP images to prevent image decoding from blocking the main thread:\n\n```html\n\u003Cimg src=\"photo.webp\" alt=\"Description\" width=\"600\" height=\"400\" loading=\"lazy\" decoding=\"async\">\n```\n\n### CLS Prevention\n- `width` and `height` attributes set on all `\u003Cimg>` elements\n- `aspect-ratio` CSS as alternative\n- Flag images without dimensions\n\n```html\n\u003C!-- Good - dimensions set -->\n\u003Cimg src=\"photo.jpg\" width=\"800\" height=\"600\" alt=\"Description\">\n\n\u003C!-- Good - CSS aspect ratio -->\n\u003Cimg src=\"photo.jpg\" style=\"aspect-ratio: 4\u002F3\" alt=\"Description\">\n\n\u003C!-- Bad - no dimensions -->\n\u003Cimg src=\"photo.jpg\" alt=\"Description\">\n```\n\n### File Names\n- Descriptive: `blue-running-shoes.webp` not `IMG_1234.jpg`\n- Hyphenated, lowercase, no special characters\n- Include relevant keywords\n\n### CDN Usage\n- Check if images served from CDN (different domain, CDN headers)\n- Recommend CDN for image-heavy sites\n- Check for edge caching headers\n\n## Output\n\n### Image Audit Summary\n\n| Metric | Status | Count |\n|--------|--------|-------|\n| Total Images | - | XX |\n| Missing Alt Text | ❌ | XX |\n| Oversized (>200KB) | ⚠️ | XX |\n| Wrong Format | ⚠️ | XX |\n| No Dimensions | ⚠️ | XX |\n| Not Lazy Loaded | ⚠️ | XX |\n\n### Prioritized Optimization List\n\nSorted by file size impact (largest savings first):\n\n| Image | Current Size | Format | Issues | Est. Savings |\n|-------|--------------|--------|--------|--------------|\n| ... | ... | ... | ... | ... |\n\n### Recommendations\n1. Convert X images to WebP format (est. XX KB savings)\n2. Add alt text to X images\n3. Add dimensions to X images\n4. Enable lazy loading on X below-fold images\n5. Compress X oversized images\n\n## Error Handling\n\n| Scenario | Action |\n|----------|--------|\n| URL unreachable | Report connection error with status code. Suggest verifying URL and checking if site requires authentication. |\n| No images found on page | Report that no `\u003Cimg>` elements were detected. Suggest checking if images are loaded via JavaScript or CSS background-image. |\n| Images behind CDN or authentication | Note that image files could not be directly accessed for size analysis. Report available metadata (alt text, dimensions, format from markup) and flag inaccessible resources. |\n\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-seo]] — Category: skills-seo\n\n","# Image Optimization Analysis\n\n## Checks\n\n### Alt Text\n- Present on all `\u003Cimg>` elements (except decorative: `role=\"presentation\"`)\n- Descriptive: describes the image content, not \"image.jpg\" or \"photo\"\n- Includes relevant keywords where natural, not keyword-stuffed\n- Length: 10-125 characters\n\n**Good examples:**\n- \"Professional plumber repairing kitchen sink faucet\"\n- \"Red 2024 Toyota Camry sedan front view\"\n- \"Team meeting in modern office conference room\"\n\n**Bad examples:**\n- \"image.jpg\" (filename, not description)\n- \"plumber plumbing plumber services\" (keyword stuffing)\n- \"Click here\" (not descriptive)\n\n### File Size\n\n**Tiered thresholds by image category:**\n\n| Image Category | Target | Warning | Critical |\n|----------------|--------|---------|----------|\n| Thumbnails | \u003C 50KB | > 100KB | > 200KB |\n| Content images | \u003C 100KB | > 200KB | > 500KB |\n| Hero\u002Fbanner images | \u003C 200KB | > 300KB | > 700KB |\n\nRecommend compression to target thresholds where possible without quality loss.\n\n### Format\n| Format | Browser Support | Use Case |\n|--------|-----------------|----------|\n| WebP | 97%+ | Default recommendation |\n| AVIF | 92%+ | Best compression, newer |\n| JPEG | 100% | Fallback for photos |\n| PNG | 100% | Graphics with transparency |\n| SVG | 100% | Icons, logos, illustrations |\n\nRecommend WebP\u002FAVIF over JPEG\u002FPNG. Check for `\u003Cpicture>` element with format fallbacks.\n\n#### Recommended `\u003Cpicture>` Element Pattern\n\nUse progressive enhancement with the most efficient format first:\n\n```html\n\u003Cpicture>\n  \u003Csource srcset=\"image.avif\" type=\"image\u002Favif\">\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"Descriptive alt text\" width=\"800\" height=\"600\" loading=\"lazy\" decoding=\"async\">\n\u003C\u002Fpicture>\n```\n\nThe browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%.\n\n#### JPEG XL: Emerging Format\n\nIn November 2025, Google's Chromium team reversed its 2022 decision and announced it will restore JPEG XL support in Chrome using a Rust-based decoder. The implementation is feature-complete but not yet in Chrome stable. JPEG XL offers lossless JPEG recompression (~20% savings with zero quality loss) and competitive lossy compression. Not yet practical for web deployment, but worth monitoring for future adoption.\n\n### Responsive Images\n- `srcset` attribute for multiple sizes\n- `sizes` attribute matching layout breakpoints\n- Appropriate resolution for device pixel ratios\n\n```html\n\u003Cimg\n  src=\"image-800.jpg\"\n  srcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\n  alt=\"Description\"\n>\n```\n\n### Lazy Loading\n- `loading=\"lazy\"` on below-fold images\n- Do NOT lazy-load above-fold\u002Fhero images (hurts LCP)\n- Check for native vs JavaScript-based lazy loading\n\n```html\n\u003C!-- Below fold - lazy load -->\n\u003Cimg src=\"photo.jpg\" loading=\"lazy\" alt=\"Description\">\n\n\u003C!-- Above fold - eager load (default) -->\n\u003Cimg src=\"hero.jpg\" alt=\"Hero image\">\n```\n\n### `fetchpriority=\"high\"` for LCP Images\n\nAdd `fetchpriority=\"high\"` to your hero\u002FLCP image to prioritize its download in the browser's network queue:\n\n```html\n\u003Cimg src=\"hero.webp\" fetchpriority=\"high\" alt=\"Hero image description\" width=\"1200\" height=\"630\">\n```\n\n**Critical:** Do NOT lazy-load above-the-fold\u002FLCP images. Using `loading=\"lazy\"` on LCP images directly harms LCP scores. Reserve `loading=\"lazy\"` for below-the-fold images only.\n\n### `decoding=\"async\"` for Non-LCP Images\n\nAdd `decoding=\"async\"` to non-LCP images to prevent image decoding from blocking the main thread:\n\n```html\n\u003Cimg src=\"photo.webp\" alt=\"Description\" width=\"600\" height=\"400\" loading=\"lazy\" decoding=\"async\">\n```\n\n### CLS Prevention\n- `width` and `height` attributes set on all `\u003Cimg>` elements\n- `aspect-ratio` CSS as alternative\n- Flag images without dimensions\n\n```html\n\u003C!-- Good - dimensions set -->\n\u003Cimg src=\"photo.jpg\" width=\"800\" height=\"600\" alt=\"Description\">\n\n\u003C!-- Good - CSS aspect ratio -->\n\u003Cimg src=\"photo.jpg\" style=\"aspect-ratio: 4\u002F3\" alt=\"Description\">\n\n\u003C!-- Bad - no dimensions -->\n\u003Cimg src=\"photo.jpg\" alt=\"Description\">\n```\n\n### File Names\n- Descriptive: `blue-running-shoes.webp` not `IMG_1234.jpg`\n- Hyphenated, lowercase, no special characters\n- Include relevant keywords\n\n### CDN Usage\n- Check if images served from CDN (different domain, CDN headers)\n- Recommend CDN for image-heavy sites\n- Check for edge caching headers\n\n## Output\n\n### Image Audit Summary\n\n| Metric | Status | Count |\n|--------|--------|-------|\n| Total Images | - | XX |\n| Missing Alt Text | ❌ | XX |\n| Oversized (>200KB) | ⚠️ | XX |\n| Wrong Format | ⚠️ | XX |\n| No Dimensions | ⚠️ | XX |\n| Not Lazy Loaded | ⚠️ | XX |\n\n### Prioritized Optimization List\n\nSorted by file size impact (largest savings first):\n\n| Image | Current Size | Format | Issues | Est. Savings |\n|-------|--------------|--------|--------|--------------|\n| ... | ... | ... | ... | ... |\n\n### Recommendations\n1. Convert X images to WebP format (est. XX KB savings)\n2. Add alt text to X images\n3. Add dimensions to X images\n4. Enable lazy loading on X below-fold images\n5. Compress X oversized images\n\n## Error Handling\n\n| Scenario | Action |\n|----------|--------|\n| URL unreachable | Report connection error with status code. Suggest verifying URL and checking if site requires authentication. |\n| No images found on page | Report that no `\u003Cimg>` elements were detected. Suggest checking if images are loaded via JavaScript or CSS background-image. |\n| Images behind CDN or authentication | Note that image files could not be directly accessed for size analysis. Report available metadata (alt text, dimensions, format from markup) and flag inaccessible resources. |\n\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-seo]] — Category: skills-seo\n\n",{"name":5,"tags":57,"license":15,"metadata":59,"description":62,"argument-hint":63,"user-invokable":64},[39,58,38],"artifact\u002Fskill",{"author":60,"version":61,"category":32},"AgriciDaniel","1.7.0","Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, and CLS prevention. Use when user says \"image optimization\", \"alt text\", \"image SEO\", \"image size\", or \"image audit\".\n","[url]",true,"main","bdd9f958d7bb1a0f19b8ad8da020b0bab0f53eb1","vc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-images",1,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis","2026-06-24 16:31:18",{"source":8,"skillName":5,"commands":73,"prompt":83,"zipAvailable":64},[74,77,80],{"tool":75,"command":76},"npx","npx skills add ibragimov-oasis\u002Fvibe-coder --skill seo-images",{"tool":78,"command":79},"bunx","bunx skills add ibragimov-oasis\u002Fvibe-coder --skill seo-images",{"tool":81,"command":82},"pnpm","pnpm dlx skills add ibragimov-oasis\u002Fvibe-coder --skill seo-images","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-images\u002FSKILL.md",[85],{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"LICENSE.txt","LICENSE","许可证",143,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-images\u002FLICENSE.txt",[92,125,151,171,197,218],{"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":104,"publishedAt":52},"01M6Q4Q22KKKVMJJYA411DQ4ER","ckm:ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fui-styling\u002FSKILL.md",[98,101],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":102,"categoryName":103,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师",[105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124],"ui styling","ui","styling","ckm:ui styling","ckm","design","css","canvas","components","component","create","design systems","Tailwind","across","themes","utility","mode","implementing","artifact\u002Fui-component","source\u002Fui-design",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":139,"publishedAt":52},"01M6Q4PQ2NX4NDVWTEHA3MQ2R0","ckm:design","Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign\u002FSKILL.md",[131,134,135,138],{"categoryNo":132,"categoryName":133,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":136,"categoryName":137,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":102,"categoryName":103,"taxonomyType":29,"taxonomyTypeDesc":30},[110,127,109,140,114,105,141,115,142,143,144,145,146,147,148,149,44,150,123,124],"google","presentations","generate","screenshot","actions","Media","logo","ads","youtube","tiktok","chart",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":159,"publishedAt":52},"01M6Q4PJE27GEA3M0CECEBCZKS","ckm:design-system","Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing\u002Ftypography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign-system\u002FSKILL.md",[157,158],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":102,"categoryName":103,"taxonomyType":29,"taxonomyTypeDesc":30},[110,160,161,162,127,109,111,114,163,141,44,164,165,166,167,168,169,170,123,124],"design system","system","ckm:design system","architecture","token","creation","systematic","css variables","Variables","spacing","layer",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":182,"publishedAt":52},"01M6Q4P90JXFYMH2S634QM6SQJ","ckm:banner-design","Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter\u002FX, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fbanner-design\u002FSKILL.md",[177,180,181],{"categoryNo":178,"categoryName":179,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":102,"categoryName":103,"taxonomyType":29,"taxonomyTypeDesc":30},[110,183,184,185,109,186,144,145,187,188,189,190,191,192,193,194,123,124,195,196],"banner design","ckm:banner design","banner","frontend","3D","generated","Art","social","dimensions","neon","direction","display","frontend-design","hero",{"skillNo":198,"name":32,"nameZh":6,"description":199,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":200,"categories":201,"keywords":204,"publishedAt":52},"01M6Q2RZXBJ9TBE413GXCYQNDB","Comprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection\u002Fvalidation\u002Fgeneration, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: \"SEO\", \"audit\", \"schema\", \"Core Web Vitals\", \"sitemap\", \"E-E-A-T\", \"AI Overviews\", \"GEO\", \"technical SEO\", \"content quality\", \"page speed\", \"structured data\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo\u002FSKILL.md",[202,203],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[32,45,205,206,207,208,48,44,209,210,211,212,213,214,42,39,38,215,216,217],"llms","assessment","deep analysis","Citations","local","deep","crawlability","seo analysis","2025","commerce","vitals","generative","publishers",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":222,"categories":223,"keywords":226,"publishedAt":52},"01M6Q2RVE7VGFCFQKBK468NHVY","seo-technical","Technical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says \"technical SEO\", \"crawl issues\", \"robots.txt\", \"Core Web Vitals\", \"site speed\", or \"security headers\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-technical\u002FSKILL.md",[224,225],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[32,227,228,229,230,231,232,233,234,44,118,211,235,236,42,237,238,39,38,215],"technical","seo technical","issues","audit","data","mobile","crawl","structure","rendering","technical seo audit","headers","categories"]