catalan-adobe
23 verified skills
reduce-page
Reduce a webpage to a structural skeleton with semantic tokens. Two-phase pipeline: Phase 1 injects a browser script that tokenizes content ({TEXT}, {HEADING:n}, {IMAGE:WxH}, {CTA:label}, {LINK:label}, {INPUT:type}, {VIDEO}, {ICON}). Phase 2 applies LLM structural reasoning to collapse repeated patterns ({REPEAT:N}), remove decorative wrappers, strip utility classes, and produce skeleton.html + manifest.json. Use when migrating pages to EDS, analyzing page structure, extracting page blueprints, or preparing input for GenAI block generation. Triggers on: reduce page, page skeleton, page blueprint, extract structure, tokenize page, page reduction, structural skeleton, reduce URL.
tools
ai-fluency-assessment
Assess your AI fluency using Anthropic's 4D framework (Dakan, Feller & Anthropic, 2025). Scans Claude Code sessions, runs LLM-based behavior classification on all messages, asks a self-assessment questionnaire for 6 unobservable behaviors, and generates a visual HTML report with scores and actionable feedback. Use when "assess fluency", "AI fluency", "fluency report", "fluency assessment", "4D framework", or "how AI fluent am I".
development
migrate-header
Migrate any website header to AEM Edge Delivery Services with pixel-accurate fidelity using an automated extraction + scaffold + visual polish pipeline. Takes a URL, captures a visual tree for spatial analysis, detects and dismisses overlays via LLM, identifies the header element from the spatial map, identifies visual rows, dispatches parallel LLM agents to extract content and styles per row, generates scaffold code, then launches an autonomous visual polish loop. Requires being in an EDS git repository. Works in the current directory — the caller is responsible for worktree/branch setup if isolation is needed. Triggers on: "migrate header", "header migration", "migrate-header", "/migrate-header", "convert header to EDS", "EDS header from URL".
development
brand-setup
Extract brand identity (fonts, colors, typography, spacing, favicons) from any URL and install fonts in an AEM Edge Delivery Services project via Adobe Fonts (Typekit) or Google Fonts. Detects fonts using 4 browser API layers (document.fonts, CSS import-rule walk, Performance API, computed style voting), then resolves via a 5-step cascade: system font, Typekit kit match, Adobe Fonts add-to-kit, Google Fonts fallback, or not-found. Updates head.html with font embed tags. Use when starting a site migration, setting up an EDS project, or extracting a site's visual identity. Triggers on: brand setup, brand extract, brand fonts, install fonts, configure brand.
development
cmux-demo
ESSENTIAL for cmux terminal demos and scripted workflows — contains critical CLI patterns, gotchas, and conventions beyond `cmux help`. Produces a runnable bash script and markdown playbook. Covers multi-pane IDE layouts, browser previews, yazi integration, multi-agent orchestration with signal coordination, sidebar metadata, visual effects, multi-window setups, and pane lifecycle. ALWAYS use when the user mentions cmux and wants to build a demo, script a walkthrough, orchestrate layouts, or automate cmux workflows. Triggers on: "cmux demo", "terminal demo", "demo script", "cmux layout", "cmux orchestration", "showcase", "scripted demo", "demo playbook", "cmux walkthrough", "cmux presentation", "multi-agent cmux", "cmux script".
tools
browser-universal
Detect the available browser interaction layer and load the right commands — then navigate, click, fill, and screenshot through a unified verb set. playwright-cli is the default, recommended layer; falls back to Playwright MCP, cmux-browser, or CDP when it is absent. Use before any browser interaction in skills that shouldn't hardcode a specific layer. Triggers on: browser universal, detect browser, browser layer, browser setup, which browser, browser interaction, open browser, use browser.
tools
browser-probe
Probe a URL with escalating headless browser configurations to detect CDN bot protection (Akamai, Cloudflare, DataDome, AWS WAF) and produce a browser-recipe.json that downstream playwright-cli consumers use to bypass blocking. Runs an automated escalation ladder: default headless → stealth script injection → system Chrome (TLS fingerprint fix) → persistent profile. Use BEFORE any playwright-cli interaction with an untrusted domain. Triggers on: browser probe, site blocked, headless blocked, CDN blocking, bot detection, browser recipe, can't load page, 403 error page, access denied.
tools
cdp-connect
Connect Claude Code to an existing Chrome browser via CDP (Chrome DevTools Protocol). Zero dependencies — uses Node 22 built-in WebSocket. Attach to any Chrome running with --remote-debugging-port, then navigate, click, type, screenshot, evaluate JS, read accessibility tree, and monitor console/network. Use when you need to interact with a browser the agent already started, control an existing Chrome instance, or drive browser automation without Playwright MCP. Triggers on: cdp connect, connect to browser, connect to chrome, attach to browser, interact with browser, drive browser, browser automation, control chrome, connect 9222.
tools
cdp-ext-pilot
Launch Chrome with an unpacked extension and test its UI via CDP. Auto-installs Chrome for Testing if needed. Loads the extension, opens sidepanel/popup/options page, and hands off to cdp-connect for interaction (click, type, screenshot, ax-tree). Handles Chrome 137+ branded build restrictions (Extensions.loadUnpacked via pipe), sidepanel user gesture requirements, and React input quirks. Use when you need to test a Chrome extension's UI, automate extension interactions, or validate extension behavior on a target page. Triggers on: chrome extension test, test extension, load unpacked extension, extension sidepanel, extension popup, test chrome extension, extension testing, chrome extension automation, ext pilot, cdp extension.
tools
cmux-setup
BEFORE manually calling cmux set-status or writing chpwd hooks for workspace coloring, use this skill. Manages workspace color rules that auto-apply based on directory patterns. Handles config creation, zsh hook installation, rule management, and on-demand workspace coloring via cmux set-status. Triggers on "cmux setup", "workspace colors", "color this workspace", "add color rule", "project colors", or any request to visually differentiate cmux workspaces.
tools
demo-narrate
Use when the user wants to narrate a demo, add voice-over to a screen recording, or create AI narration for a silent video. End-to-end pipeline that extracts frames, analyzes with parallel subagents, writes a word-budgeted voice-over script, generates TTS audio per act, and merges everything back.
devops
domain-mask
Mask a URL behind a custom domain for screencasts and demos. Adds a trusted HTTPS reverse proxy so the browser shows a clean display domain with a green padlock while serving content from the real target URL. Handles /etc/hosts, mkcert certificates, and cleanup automatically. Triggers on: "domain mask", "mask domain", "mock domain", "proxy URL", "demo URL", "fake domain", "screencast proxy", "mask URL for demo", "domain-mask".
development
gemini-icon-set
Generate production-quality colorful icon sets using Google Imagen 4. Use this skill when the user needs custom app icons, emoji-style icons, cartoon icons, or any colorful icon set. Takes a project description, suggests icons, generates 1024px PNGs via Imagen 4, removes backgrounds, downscales to all target sizes, and delivers a review gallery for iterative refinement. Trigger on: "icon set", "generate icons", "app icons", "custom icons", "colorful icons", "cartoon icons", "emoji icons", "make icons", "icon generation", "imagen icons", or any request for a set of colorful visual assets.
development
kite-teleport
Teleport a Kite task session to local Claude Code. Takes a teleport token generated by /kite teleport in Slack, fetches the converted session from the Kite worker, places it in the Claude Code session directory, and offers branch checkout. Use when: resuming a Kite task locally, teleporting a remote session, continuing cloud work in Claude Code. Triggers on: kite teleport, teleport session, resume kite task, kite token, kt_.
development
memory-triage
Review Claude Code auto memory accumulated during a task and promote valuable findings to shared project config (CLAUDE.md, .claude/rules/, or global CLAUDE.md). Use this skill when finishing a branch, completing a task, wrapping up work, or anytime you want to review what Claude learned and decide what the team should know. Also use when the Stop hook reminds you about pending memory entries. Triggers on "triage memory", "review memory", "promote memory", "memory triage", "what did we learn", "clean up memory", "share learnings", "anything worth keeping", or when the user asks about knowledge accumulated during a session.
development
news-digest
Fetch and digest news from Google News RSS feeds and Google Alerts by topic. Extracts full article content, images, and videos. Scans configured topics, deduplicates stories, and produces a rich markdown digest with article summaries. Use when the user wants a news summary, news digest, Google News scan, or says things like "what's in the news", "news about X", "news digest", "scan my news feeds", or "/news-digest".
development
page-collect
Extract structured resources (icons, metadata, text, forms, videos, social links) from any webpage using Playwright. Supports individual collectors via subcommands (icons, metadata, text, forms, videos, socials) or all at once. The icon collector classifies SVGs as icon/logo/image based on size and DOM context, optimizes them for EDS, and outputs to /icons/ for use with decorateIcons(). Use when migrating pages, auditing sites, or extracting assets.
development
page-prep
Prepare any webpage for clean interaction by detecting and removing disruptive overlays (cookie banners, GDPR consent, modals, popups, newsletter signups, paywalls, login walls). Uses a cached database of 300+ known CMPs (Consent-O-Matic + EasyList) combined with heuristic DOM scanning. Produces portable JS recipes for any browser tool (Playwright, CDP, cmux-browser). ALWAYS use this skill before taking screenshots, scraping content, or automating interaction on any webpage that might have overlays blocking the view or preventing interaction. Triggers on: page prep, clean page, remove overlays, dismiss cookie banner, page blocked, overlay cleanup, consent banner, prepare page, unblock page, clear popups, cookie popup.
tools
screencast
Record your screen to video from Claude Code. Guided capture setup: pick a display, window, or screen region, then start/stop recording on demand. Uses ffmpeg — cross-platform (macOS, Linux, Windows). Produces MP4 with sensible defaults. Pairs with demo-narrate for voice-over. Triggers on: screencast, record screen, screen recording, capture screen, record window, record region, start recording, screen capture video.
development
slack-cdp
Control Slack via CDP or headless API tokens. Navigate channels, read/send messages, search conversations, check unreads, and manage status. Two modes: CDP (Slack desktop with --remote-debugging-port) for full UI control, or headless (xoxp/xoxb token) for data operations without Slack running. Triggers on: slack, read slack, search slack, slack unreads, send slack message, slack status, navigate slack, check slack, slack messages, go to channel, slack DM.
development
video-digest
Summarize any video by analyzing both audio and visuals. Downloads via yt-dlp, extracts transcript (YouTube captions or Whisper), pulls scene-detected keyframes, and produces a multimodal summary with clickable timestamped YouTube links. Use this skill whenever the user wants to summarize a YouTube video, digest a talk or tutorial, get notes from a video, extract key points from a recording, or says things like "tl;dw", "summarize this video", "what's in this video", or pastes a YouTube URL and asks for a summary. Also triggers for non-YouTube URLs that yt-dlp supports.
tools
visual-tree
Capture a spatial hierarchy of rendered DOM elements from any webpage. Injects a pre-built script via playwright-cli that walks the DOM, detects layout grids, extracts backgrounds, prunes invisible nodes, promotes elements rendered outside their DOM parent (overlays, fixed navs, modals), and tags overlay nodes with occlusion metadata. Returns three outputs: LLM-friendly indented text, structured JSON tree, and a nodeMap mapping positional IDs to CSS selectors with background and overlay data. Use before page decomposition, overlay detection, brand extraction, or any workflow that needs structured page analysis. Triggers on: visual tree, capture tree, page structure, page hierarchy, DOM tree, capture visual, page analysis, extract tree.
tools
spectrum-2-web
Design and build web UIs with Adobe Spectrum 2 design system. Applies S2 layout principles, visual hierarchy, spacing, and component composition to produce accessible interfaces. Outputs vanilla CSS with Spectrum tokens (static pages) or Spectrum Web Components (interactive apps). Recommends tier based on complexity. Covers sp-theme setup, side-effect imports, overlay system, form patterns, --mod-* token customization, and 14 critical gotchas. Use for: spectrum 2 web, SWC, sp-button, sp-theme, build UI with spectrum, S2 layout, spectrum application, adobe design system, web component form, spectrum overlay.
development