ClaudeSuperPower

Skills

Packaged, reusable capabilities Claude can invoke to complete specific tasks.

What are you trying to do?

139 results

impeccable

The design language that makes your AI harness better at design.

52.5KFrontend

session-report

Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.

32.8KFrontend

receipts

Generate a personal Claude Code usage & impact report ("receipts") from this machine's local session transcripts — for justifying Claude Code usage/spend to a manager, self-review, or "what have I been using this for" check-ins. Mines ~/.claude/projects locally (no extra API calls beyond one final w

32.8KFrontend

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

32.8KFrontend

playground

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

32.8KFrontend
H

huashu-design

Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic

22.3KFrontend

auth

Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.

229Frontend
A

accessibility-fix

Scan an AEM Edge Delivery Services page for WCAG 2.1 AA accessibility violations and generate specific fixes. Identifies missing alt text, heading hierarchy issues, link text problems, color contrast concerns, and EDS-specific accessibility patterns. Use when fixing accessibility issues, preparing f

151Frontend
L

link-rot-scanner

Crawl and validate all internal and external links across an AEM Edge Delivery Services site. Uses the query index or sitemap to discover pages, extracts links from .plain.html renditions, checks HTTP status codes, and produces a prioritized report of broken, redirecting, and insecure links. Use whe

151Frontend
P

page-import

Import a single webpage from any URL into canonical EDS block format — structured HTML that authors edit in DA. Scrapes the page, analyzes structure, maps to existing blocks, and generates HTML for immediate local preview. Also triggered by terms like "migrate", "migration", or "migrating". Use this

151Frontend
G

generate-import-html

Use this when the page-import pipeline needs to produce structured HTML from authoring analysis for AEM Edge Delivery Services. Covers building section structure, applying block tables, handling metadata, and managing the images folder. Do not invoke directly — called by page-import as a pipeline st

151Frontend
C

content-audit

Audit an AEM Edge Delivery Services page for content quality, SEO, accessibility, performance, and EDS best practices. Produces a prioritized fix list with specific remediation steps. Use when reviewing page quality, preparing for launch, or optimizing existing content.

151Frontend
D

da-content

Use this when generating HTML for Adobe Document Authoring (DA, da.live) upload, uploading media binaries to DA, publishing to aem.live, or driving the DA admin API (auth, source PUT, preview/publish). Covers block HTML format (canonical div-class form and accepted table alternate), section structur

151Frontend
C

cja-executive-briefing

Generates a polished, leadership-ready performance briefing with KPI tiles, executive narrative bullets, and a driver analysis — all as a print-ready HTML document. Always use this skill when someone asks for an executive summary, performance briefing, leadership readout, stakeholder update, or busi

151Frontend
P

page-langs

Detect all languages used on a webpage — both declared (html@lang, hreflang alternate links, nested lang= attributes, meta content-language) and actually present in the body text (Google CLD3 via cld3-asm WASM). Reconciles the two signal sets and flags mismatches such as undeclared languages in the

151Frontend
S

scrape-webpage

Use this when the page-import pipeline needs to fetch a source webpage and prepare it for import/migration to AEM Edge Delivery Services. Covers scraping content, extracting metadata, downloading images, and returning analysis JSON with paths, metadata, cleaned HTML, and local images. Do not invoke

151Frontend
C

content-driven-development

Apply a Content Driven Development process to AEM Edge Delivery Services development. Use for ALL code changes - new blocks, block modifications, CSS styling, bug fixes, core functionality (scripts.js, styles, etc.), or any JavaScript/CSS work that needs validation.

151Frontend
I

image-seo

Audit images across AEM Edge Delivery Services pages for SEO and performance. Checks alt text quality, missing dimensions, lazy loading on LCP images, fetch priority, file naming, and decorative image handling. Generates a per-page report with specific fix instructions for alt text (in the source do

151Frontend
R

replica

Same-design migration — re-platform a site to AEM Edge Delivery (or any clean front end) keeping its current design near pixel-perfect. Recreates key pages (one archetype per page type) as clean re-authored HTML/CSS (never DOM copies), verifies each against the live site with a measured source-fidel

151Frontend
P

prototype

Render a proposed redesign of a page on the current website as a self-contained static HTML file, then iterate via the impeccable craft loop. Per-page, idempotent, stale-aware. Use when the user asks for a redesign prototype, a before/after comparison, a design preview, a page mockup, a visual diff

151Frontend
B

building-blocks

Use this when implementing code changes in AEM Edge Delivery Services (EDS, Franklin, Helix), whether new or modified blocks, core functionality (scripts.js, styles, delayed.js, etc.), or both. Creates and modifies block folders and decorate functions, updates core scripts, scopes CSS, and wires up

151Frontend
A

analyze-and-plan

Use this when you need to define acceptance criteria, write requirements, scope work, or create a definition of done for AEM Edge Delivery Services (EDS) tasks such as new blocks, variants, behavior modifications, CSS-only changes, or bug fixes. Covers analyzing development requirements, producing t

151Frontend
Q

qa

Read-only automated QA sweep of a deployed stardust site on AEM Edge Delivery Services — validates routing, content fidelity vs the source capture, template conformance, rendered integrity (geometry, JS errors, broken images), visual regression vs baselines, metadata/SEO/JSON-LD, link integrity, acc

151Frontend
D

da-auth

Use this when another step needs to call the admin.da.live API, for example before pushing HTML content, listing documents, or triggering a DA preview, and you do not already have a valid DA_TOKEN in scope from an earlier step in the same session. Covers obtaining a valid Adobe IMS access token for

151Frontend