Block Collection And Party
Discover and reuse approved Adobe Franklin / AEM Edge Delivery blocks, snippets, and Sidekick plugins from the block collection catalog.
Overview
Block Collection and Party is an agent skill for the Build phase that helps solo builders find and apply Adobe Franklin block collection snippets, demos, and Sidekick plugins.
Install
npx skills add https://github.com/adobe/skills --skill block-collection-and-partyWhat is this skill?
- Structured catalog payload (92 entries in sample) with title, category, GitHub URL, showcase URL, and approval flags
- Mix of Code snippet entries (e.g. native dialog modals, cross-browser video autoplay) and Sidekick plugin listings
- Each item links githubProfile, permission, highlight, and approved metadata for vetting before copy-paste
- Documents Franklin/HLX live demos such as modal-demo on hlx.live
- Captures edge-case implementation notes (e.g. videoTag.muted assignment vs setAttribute for Chrome autoplay)
- Sample catalog slice lists 92 data entries with offset 0 and limit 92
Adoption & trust: 588 installs on skills.sh; 122 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building on Franklin/EDS but do not know which community blocks exist, where the GitHub source lives, or which autoplay or modal patterns actually work in Chrome.
Who is it for?
Indie developers and small teams on Adobe Franklin, HLX, or AEM Edge Delivery who need vetted UI blocks without building from scratch.
Skip if: Pure React/Vite SPAs with no Franklin pipeline, or teams forbidden from importing third-party EDS snippets without legal review.
When should I use this skill?
Implementing Franklin/HLX pages and need vetted blocks, gists, or Sidekick plugins from the collection API shape.
What do I get? / Deliverables
You shortlist approved collection entries with showcase URLs and implementation notes, then paste adapted snippets into your Franklin page or Sidekick setup.
- Selected block URLs and GitHub sources
- Adapted snippet integration notes
- Showcase links for QA on hlx.live
Recommended Skills
Journey fit
The skill surfaces pre-built web fragments for Franklin sites, which is core frontend assembly during product build. Blocks, modals, video autoplay snippets, and Sidekick plugins land in the same layer as page scripts and EDS authoring—not DevOps or growth analytics.
How it compares
Curated Franklin block index with live demo links—not a generic shadcn component gallery or an MCP content server.
Common Questions / FAQ
Who is block-collection-and-party for?
Builders maintaining Adobe Franklin or AEM Edge Delivery sites who want agent help navigating the official-style block collection catalog.
When should I use block-collection-and-party?
During Build → frontend when adding modals, media blocks, or Sidekick plugins to an HLX page before author handoff.
Is block-collection-and-party safe to install?
Snippet safety depends on each linked GitHub repo; use the Security Audits panel on this Prism page and verify permission flags in the catalog before importing code.
SKILL.md
READMESKILL.md - Block Collection And Party
{ "total": 92, "offset": 0, "limit": 92, "data": [ { "githubProfile": "https://github.com/hannessolo", "permission": "on", "category": "Code snippet", "title": "Modal", "description": "Script to add modals to your franklin page. This uses the new(ish) native <dialog> element. \n\nYou can see it in action here: https://github.com/hannessolo/modal-demo/blob/373797463c0804c654e921d74d1f3d0d15845f64/scripts/scripts.js#L44", "githubUrl": "https://github.com/hannessolo/modal-demo/", "showcaseUrl": "https://main--modal-demo--hannessolo.hlx.live/", "highlight": "", "approved": "true" }, { "githubProfile": "https://github.com/msagolj", "permission": "on", "category": "Code snippet", "title": "Video autoplay", "description": "To autoplay videos across different browsers, a set of attributes need to be set.\nIt is important to set videoTag.muted = true exactly this way otherwise it won't play in chrome. Eg. setAttribute('muted', true) doesn't work.", "githubUrl": "https://gist.github.com/amol-anand/f797e6ab9513898e132987dabcaca262", "showcaseUrl": "", "highlight": "", "approved": "true" }, { "githubProfile": "https://github.com/dylandepass", "permission": "on", "category": "Sidekick plugin", "title": "Sidekick Library", "description": "The Sidekick Library is an extension for the AEM Sidekick that enables developers to create UI-driven tooling for content authors. It includes a built-in blocks plugin that can display a list of all blocks to authors in an intuitive manner, removing the need for authors to remember or search for every variation of a block. Developers can also write their own plugins for the sidekick library.", "githubUrl": "https://github.com/adobe/franklin-sidekick-library", "showcaseUrl": "https://main--rosalind-boilerplate--dylandepass.hlx.live/tools/sidekick/library.html", "highlight": "x", "approved": "true" }, { "githubProfile": "https://github.com/davidnuescheler", "permission": "on", "category": "Code snippet", "title": "Metatag / JSON based CSP", "description": "This approach is setting a CSP in a way that is only transported over the wire once and then cached on the client.\nAllows to manage the CSP in an easy to read JSON file", "githubUrl": "https://github.com/adobe/helix-project-boilerplate/pull/228", "showcaseUrl": "", "highlight": "", "approved": "true" }, { "githubProfile": "https://github.com/sachioross", "permission": "on", "category": "Build tooling", "title": "SASS + AEM", "description": "SASS compile for your CSS while locally developing in AEM", "githubUrl": "https://github.com/sachioross/helix-project-boilerplate-sass", "showcaseUrl": "", "highlight": "", "approved": "true" }, { "githubProfile": "https://github.com/Buuhuu", "permission": "on", "category": "Code snippet", "title": "ffetch", "description": "ffetch is a small wrapper around the JavaScript fetch function that helps you deal with the AEM Content API when building a composable application. It makes it easy to fetch content from a AEM Index, apply lazy pagination, follow links to pages, and even pull page metadata. With ffetch you get all the ease of creating a headless application without the peformance baggage of headless SDKs and the complexity of headless APIs.", "githubUrl": "https://github.com/Buuhuu/ffetch", "showcaseUrl": "", "highlight": "", "approved": "true" }, { "githubProfile": "https://github.com/shsteimer", "permission": "on", "category": "Code snippet", "title": "Dynamically loaded Templates", "description": "Load CSS and JS specific to a template, allowing for template specific styling and auto-blocking, without inter