[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71AHBB8GVN8RGJZFR1DC8AD":3,"skill-same:01M71AHBB8GVN8RGJZFR1DC8AD":63},{"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":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":42,"repositoryHtmlUrl":43,"repositoryHomepageUrl":44,"ownerHtmlUrl":45,"ownerBlogUrl":46,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M71AHBB8GVN8RGJZFR1DC8AD","carousel",null,"When the user wants to design, optimize, or audit carousel\u002Fslider layouts for content display. Also use when the user mentions \"carousel\", \"slider\", \"carousel layout\" or \"testimonial carousel\". For hero-area patterns, use hero-generator.","ariadoss\u002Fsuperskills","ariadoss","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F414341?v=4","01M71AC7383PT6JCRZSQJ4AVTM","Danilo Stern-Sapad","01M71AC73Y7NTBTJ9KQYNENRRE",12,"MIT","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fmarketing-skills\u002Fcomponents\u002Flayout\u002Fcarousel\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31],"optimize","layout","audit","for","design","use","when","patterns","hero","generator","content","user","display","2026-11-10 10:12:30",false,"---\nname: carousel\ndescription: When the user wants to design, optimize, or audit carousel\u002Fslider layouts for content display. Also use when the user mentions \"carousel\", \"slider\", \"carousel layout\" or \"testimonial carousel\". For hero-area patterns, use hero-generator.\nmetadata:\n  version: 1.1.0\n---\n\n# Components: Carousel Layout\n\nGuides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.\n\n**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.\n\n## When to Use Carousel\n\n| Use carousel when | Use grid\u002Flist when |\n|-------------------|---------------------|\n| **Limited space** | Full catalog visible |\n| One focus at a time; rotation desired | Browse, compare many items |\n| Testimonials, quotes, logos, featured gallery | Products, templates, blog index |\n| Above fold; hero or section highlight | Full listing; discovery |\n\nSee **grid** for equal-hierarchy display; **list** for text-heavy scan; **masonry** for varying-height gallery.\n\n## Carousel vs Grid vs List vs Masonry\n\n| Layout | Structure | Best for |\n|--------|-----------|----------|\n| **Grid** | Equal rows and columns; all visible | Products, templates, features |\n| **List** | Single column; stacked | Blog index, docs, search results |\n| **Masonry** | Columns; varying heights | Pinterest-style gallery |\n| **Carousel** | Slides; one\u002Ffew visible; swipe\u002Fclick | Testimonials, logos, featured items |\n\n## Best Practices\n\n### Accessibility\n\n- **Keyboard navigation**: Arrow keys to move; Enter\u002FSpace to activate; focus visible\n- **User control**: Don't auto-advance too fast; allow pause; avoid auto-advance if `prefers-reduced-motion` is set\n- **Announcements**: Screen reader users need to know current slide and total (e.g., \"Slide 2 of 5\")\n- **Touch targets**: ≥44×44px for prev\u002Fnext buttons on mobile\n\n### Performance\n\n- **Lazy load**: Load off-screen slides on demand; avoid loading all images upfront\n- **Reserve space**: Reserve space for slides to avoid layout shift (CLS)\n\n### SEO\n\n- **Content in DOM**: All carousel content must be in the initial HTML at page load. Google does not simulate clicks; content loaded via AJAX on slide change is not discoverable. Same as **tab-accordion**.\n- **Recommendation**: Server-render all slides in HTML; use CSS\u002FJS only to show\u002Fhide. See **rendering-strategies**.\n\n## Use Cases\n\n| Use case | Format | Page Skill |\n|----------|--------|------------|\n| **Testimonials** | Quote carousel; multiple testimonials | **testimonials-generator** |\n| **Showcase \u002F Gallery** | Featured items; rotation | **showcase-page-generator** |\n| **Press logos** | \"As Seen In\" logo strip or quote carousel | **press-coverage-page-generator** |\n| **Community** | Banner carousel below hero | **community-forum** |\n\n## Related Skills\n\n- **grid**: Grid for full catalog; when carousel is too restrictive\n- **list**: List for text-heavy scan\n- **masonry**: Masonry for varying-height gallery\n- **card**: Card structure within carousel slides\n- **testimonials-generator**: Testimonial carousel; testimonials as content\n- **showcase-page-generator**: Gallery format options (grid, masonry, carousel)\n- **tab-accordion**: Similar SEO requirement—content in DOM at load\n- **rendering-strategies**: SSR, SSG; content in initial HTML for crawlers\n","# Components: Carousel Layout\n\nGuides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.\n\n**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.\n\n## When to Use Carousel\n\n| Use carousel when | Use grid\u002Flist when |\n|-------------------|---------------------|\n| **Limited space** | Full catalog visible |\n| One focus at a time; rotation desired | Browse, compare many items |\n| Testimonials, quotes, logos, featured gallery | Products, templates, blog index |\n| Above fold; hero or section highlight | Full listing; discovery |\n\nSee **grid** for equal-hierarchy display; **list** for text-heavy scan; **masonry** for varying-height gallery.\n\n## Carousel vs Grid vs List vs Masonry\n\n| Layout | Structure | Best for |\n|--------|-----------|----------|\n| **Grid** | Equal rows and columns; all visible | Products, templates, features |\n| **List** | Single column; stacked | Blog index, docs, search results |\n| **Masonry** | Columns; varying heights | Pinterest-style gallery |\n| **Carousel** | Slides; one\u002Ffew visible; swipe\u002Fclick | Testimonials, logos, featured items |\n\n## Best Practices\n\n### Accessibility\n\n- **Keyboard navigation**: Arrow keys to move; Enter\u002FSpace to activate; focus visible\n- **User control**: Don't auto-advance too fast; allow pause; avoid auto-advance if `prefers-reduced-motion` is set\n- **Announcements**: Screen reader users need to know current slide and total (e.g., \"Slide 2 of 5\")\n- **Touch targets**: ≥44×44px for prev\u002Fnext buttons on mobile\n\n### Performance\n\n- **Lazy load**: Load off-screen slides on demand; avoid loading all images upfront\n- **Reserve space**: Reserve space for slides to avoid layout shift (CLS)\n\n### SEO\n\n- **Content in DOM**: All carousel content must be in the initial HTML at page load. Google does not simulate clicks; content loaded via AJAX on slide change is not discoverable. Same as **tab-accordion**.\n- **Recommendation**: Server-render all slides in HTML; use CSS\u002FJS only to show\u002Fhide. See **rendering-strategies**.\n\n## Use Cases\n\n| Use case | Format | Page Skill |\n|----------|--------|------------|\n| **Testimonials** | Quote carousel; multiple testimonials | **testimonials-generator** |\n| **Showcase \u002F Gallery** | Featured items; rotation | **showcase-page-generator** |\n| **Press logos** | \"As Seen In\" logo strip or quote carousel | **press-coverage-page-generator** |\n| **Community** | Banner carousel below hero | **community-forum** |\n\n## Related Skills\n\n- **grid**: Grid for full catalog; when carousel is too restrictive\n- **list**: List for text-heavy scan\n- **masonry**: Masonry for varying-height gallery\n- **card**: Card structure within carousel slides\n- **testimonials-generator**: Testimonial carousel; testimonials as content\n- **showcase-page-generator**: Gallery format options (grid, masonry, carousel)\n- **tab-accordion**: Similar SEO requirement—content in DOM at load\n- **rendering-strategies**: SSR, SSG; content in initial HTML for crawlers\n",{"name":5,"metadata":37,"description":7},{"version":38},"1.1.0","main","c7ec8d78e5dc37484c2cfe90ab04de163d97dd41","marketing-skills\u002Fcomponents\u002Flayout\u002Fcarousel",0,"https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills","https:\u002F\u002Fhyperion360.com\u002Fblog\u002Fparallel-ai-agents-engineering-workflow\u002F","https:\u002F\u002Fgithub.com\u002Fariadoss","https:\u002F\u002Fdanilosapad.com\u002F","CEO & Founder of @Hyperion360","2026-11-13 04:11:07",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add ariadoss\u002Fsuperskills --skill carousel",{"tool":55,"command":56},"bunx","bunx skills add ariadoss\u002Fsuperskills --skill carousel",{"tool":58,"command":59},"pnpm","pnpm dlx skills add ariadoss\u002Fsuperskills --skill carousel","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fmarketing-skills\u002Fcomponents\u002Flayout\u002Fcarousel\u002FSKILL.md",true,[],[64,90,114,133,160,176],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":75,"publishedAt":32},"01M71AZE3MPF891RM354EMRYA1","youtube","Download YouTube video transcripts when user provides a YouTube URL or asks to download\u002Fget\u002Ffetch a transcript from YouTube. Also use when user wants to transcribe or get captions\u002Fsubtitles from a YouTube video.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[70],{"categoryNo":71,"categoryName":72,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[66,30,76,77,78,79,80,81,82,25,83,84,85,86,87,24,88,89],"download","transcribe","write","transcript","video transcripts","Bash","URL","Captions","get","fetch","Video","read","subtitles","transcripts",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":32},"01M71AZAYR85PW6BJGSQXS4BN2","write-plan","Use when you have a spec or requirements for a multi-step task, before touching code. Produces an engineering plan complete with TDD tasks, DRY\u002FSOLID\u002FYAGNI principles, a required Test Plan & Verification section, and a coverage target — then auto-runs \u002Fplan-eng-review as an independent double-check before execution.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-plan\u002FSKILL.md",[],[97,98,78,99,100,101,102,103,104,25,105,106,107,108,109,22,110,111,112,113],"write plan","plan","dry","verification","review","tasks","code","you","auto","eng","coverage","complete","section","test plan","target","as","yagni",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":32},"01M71AZ8NDDP5ZMGEE6FSC4FKR","worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fworktrees\u002FSKILL.md",[],[116,121,122,123,24,124,125,126,127,128,129,100,130,25,131,132],"implementation","workspace","with","plans","feature","isolation","git","directory","work","git worktrees","selection","Safety",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":142,"publishedAt":32},"01M71AZ4ZQHTNWFRZVYHKQFP08","web-perf","Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fweb-perf\u002FSKILL.md",[139],{"categoryNo":140,"categoryName":141,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000023","Skill与智能体开发",[143,144,145,146,147,20,19,148,149,25,150,151,152,153,154,155,156,157,158,159],"web","perf","web perf","resources","MCP","documentation","caching","qa","knowledge","devtools","issues","render","re","performance","chrome devtools","vitals","never",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":166,"publishedAt":32},"01M71AZ2KZNWYEGKKRMJH8PYG2","verify","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fverify\u002FSKILL.md",[],[162,108,167,168,129,100,169,170,25,171,24,172,173,174,175],"commands","about","claims","output","assertions","claim","prs","evidence","running",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":182,"publishedAt":32},"01M71AZ0ACCK7N1QMWQK1FV2HJ","validate-idea","Validate a business idea using the minimalist entrepreneur framework. Use when someone has a business idea and wants to test if it's worth pursuing before building anything.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fvalidate-idea\u002FSKILL.md",[],[183,184,185,186,187,188,189,25,190,24,191],"validate","idea","validate idea","framework","it","minimalist","test","business","before building"]