skills

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, or Apple-style presentation layouts. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export.

Clarify requirements before implementing.

Fix Cloudflare Workers Container gateway not starting automatically for Discord/Telegram bots behind Cloudflare Access. Use when: (1) /api/status returns "not_running" but /sandbox-health returns "ok", (2) Discord or Telegram bot stops responding after deploy, (3) Bot only works after visiting the web UI in browser, (4) Container is running but internal process (gateway) hasn't started. Applies to Cloudflare Sandbox containers with Durable Objects.

Fix CSS transitions that get "stuck" at their initial state (opacity: 0, transform unchanged) when toggling classes during SPA page navigation. Use when: (1) elements have CSS transition on opacity/transform but remain invisible after adding a `.visible` class, (2) even inline `style="opacity: 1 !important"` doesn't change computed opacity, (3) scroll-reveal animations work on initial page load but fail after navigating between SPA pages, (4) double requestAnimationFrame trick doesn't fix the stuck transition. Common in IntersectionObserver-based reveal systems with show/hide page sections.

Debug analytics tracking that silently fails. Use when: (1) Analytics events fire in console but data doesn't appear in dashboard, (2) sendBeacon requests invisible in Network tab, (3) API returns "Failed to record event" with no details, (4) Database insert fails silently. Covers sendBeacon debugging, schema mismatch diagnosis, and silent failure patterns.

Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks

Fix for Claude Code Edit tool failing to match strings containing Unicode characters (emojis, em-dashes, non-breaking spaces, curly quotes). Use when: (1) Edit tool returns "String to replace not found in file" but the string visually matches Read output, (2) file contains emoji characters like 🚀 👋 🎮, (3) file has em-dashes (—), non-breaking spaces (U+00A0 / c2 a0), or smart/curly quotes. Solution: use Write tool to rewrite the entire file instead of Edit for targeted replacements.

Fix Framer Motion sticky scroll sections where absolute-positioned children don't render correctly. Use when: (1) console warning "Please ensure that the container has a non-static position", (2) sticky scroll pillar/slide transitions show content at wrong positions or invisible, (3) absolute-positioned motion.div children overflow or stack incorrectly inside a sticky viewport. Solution: wrap with relative container inside the sticky element.

Fix empty LLM responses after tool use when proxying through Google Gemini 3 models (gemini-3-flash-preview, gemini-3-pro, etc). Use when: (1) bot produces empty text responses specifically after tool calls (web_fetch, exec, browser) but non-tool messages work fine, (2) Google returns 400 "Function call is missing a thought_signature" in proxy logs, (3) multi-turn function calling breaks on second request (tool result submission), (4) all providers fail after tool use causing empty fallback responses. Root cause: Gemini 3 models require opaque thought_signature tokens in tool_call responses that OpenAI-compatible clients strip from conversation history. Solution: proxy-level model routing — use gemini-2.5-flash for tool-bearing requests.

Fix for "ENOENT: no such file or directory" errors when using the html2pptx pipeline with files in directories containing non-ASCII characters (Japanese, Chinese, Korean, emoji, etc). Use when: (1) build.js fails with ENOENT on a path containing URL-encoded characters like %E7%BA%AF, (2) background images or logos fail to load in PptxGenJS, (3) html2pptx works for ASCII paths but fails for Unicode directory names. The root cause is that browsers convert file:// paths to URL-encoded form, and PptxGenJS tries to open the encoded path literally.

Dispatch subagents with automatic refinement loop until sufficient context is gathered

Canonical visual design language for Joe Speaking. Use when creating or modifying UI components, choosing colors, typography, spacing, shadows, or motion, reviewing visual consistency, or generating any visual asset in the Joe Speaking brand. Covers web (OKLCH), email (hex), and dark mode tokens.

Generate production-grade HTML emails for Joe Speaking using the brand's warm editorial luxury design system. Use when the user asks to create an email, newsletter, product announcement, feature update, or any email communication for Joe Speaking. Produces self-contained .html files with table-based layouts, inline CSS, VML Outlook fallbacks, dark mode, and mobile responsiveness.

Generate RedNote (Xiaohongshu) social media posters for Joe Speaking. Creates 3:4 (2160x2880) poster HTML files optimized for RedNote's thumbnail preview. Supports dark mode, light mode, and custom themes. Use when preparing a RedNote post, campaign, or content refresh.

Generate social media announcement posters and copy for Joe Speaking releases. Creates bilingual (English + Chinese) posters in 3:4 and 1:1 formats, plus multi-platform social media copy (LinkedIn, Instagram, X, RedNote/小红书). Use when preparing a new release, product announcement, or social media campaign. Pairs with the release-notes skill.

Fix for content below large media elements (video, image, iframe) in fixed modals being pushed off-screen and inaccessible. Use when: (1) caption, links, or buttons below a video/image in a lightbox or modal are invisible despite being in the DOM, (2) modal uses vh-based max-height on media + body scroll lock and footer content disappears, (3) elements pass accessibility tree checks but are physically unreachable because the modal can't scroll. Covers the min-h-0 + flex-shrink-0 + calc(100dvh) pattern for Tailwind CSS and plain CSS flex column modals.

Debug multi-provider LLM API proxy chains where fallback isn't working, providers return silent errors, or the bot receives error bodies instead of real responses. Use when: (1) LLM proxy fallback chain silently fails — bot gets empty/garbage responses, (2) provider-status shows requests but lastSuccess is null, (3) bot completes LLM calls impossibly fast (<500ms) suggesting it parsed an error body as the response, (4) circuit breaker shows CLOSED but provider isn't actually working, (5) API proxy returns 4xx from downstream providers. Covers: OpenAI-compatible proxy chains, Google AI Studio compatibility layer, OpenRouter, circuit breaker debugging, URL path construction for multi-provider routing, gzip error body masking.

Fix for next-intl v4 SSG pages showing wrong locale (typically English fallback) despite correct build output. Use when: (1) next-intl pages build successfully with generateStaticParams but render the default locale instead of the expected one, (2) page metadata (from getTranslations with explicit locale) shows correct locale but client components show wrong locale, (3) getMessages() returns default locale messages in [locale] layout/pages. Root cause: missing setRequestLocale() call before getMessages() in server components with static generation.

CJK (Chinese/Japanese/Korean) typography and locale-switching patterns for Next.js apps using next-intl. Use when: (1) CJK text renders visually too large compared to Latin text at the same font size, (2) CSS :lang(zh) selectors override fonts on elements that should stay Latin (e.g., signatures, brand names), (3) locale switcher with router.push() redirects back to the old locale due to stale NEXT_LOCALE cookie, (4) CJK headings wrap to multiple lines when they should fit on one, (5) environment banners or badges appear on locale-prefixed paths that should be hidden, (6) text-balance CSS causes CJK text to break unnecessarily. Covers font sizing, lang attribute escape hatch, whitespace-nowrap vs text-balance, window.location.href for locale switching, and locale-aware path matching.

Fix CSS custom property name collision between next/font and design system variables in globals.css. Use when: (1) fonts look wrong despite correct next/font configuration — falling back to Georgia, system-ui, or other fallback fonts, (2) DevTools shows --font-display or --font-body resolving to literal font names like 'Instrument Serif' instead of hashed names like '__Instrument_Serif_315a98', (3) fonts break after adding/removing next/font imports (bundle reordering), (4) @font-face uses hashed names but CSS variables hold unhashed literal names. Covers next/font variable naming, CSS cascade specificity with :root, and webpack CSS chunk ordering.

Fix "request.headers must be an instance of Headers" error when testing Next.js middleware with Vitest in jsdom environment. Use when: (1) NextResponse.next() throws "request.headers must be an instance of Headers" in vitest/jsdom, (2) middleware integration tests fail despite NextRequest being constructed correctly, (3) testing locale detection, redirect logic, or cookie handling in Next.js middleware without edge runtime. Covers mocking NextResponse.next() and NextResponse.redirect() to bypass the jsdom/edge-runtime Headers class mismatch while preserving testable .status, .headers, and .cookies.set().

Implement layered timeouts (connect, TTFB, overall) in Node.js HTTP proxy/reverse-proxy code. Use when: (1) a proxy forwards requests through Cloudflare Tunnels or similar CDN-tunneled origins where TCP connects succeed but the origin is unreachable (e.g. Mac sleeping), (2) socket.once('connect') handlers silently fail on keep-alive reused sockets, (3) adding a TTFB (time-to-first-byte) timeout to detect dead tunnel backends, (4) building health probe intervals with fetch() that leak connections. Covers socket.connecting check, TTFB timer pattern, response body drain for fetch(), and intervalId.unref().

Fix HTTP proxy requests hanging forever on keep-alive connections in Node.js. Use when: (1) First request works but second request hangs indefinitely, (2) socket.setTimeout or manual timer on 'socket' event doesn't fire for reused connections, (3) Proxy sits in front of a tunnel/origin that may go down (e.g., laptop sleeping), (4) Need reliable TTFB (time-to-first-byte) timeout that works for both fresh and keep-alive connections. Applies to http.request, https.request, and reverse proxy implementations.

Update peon-ping configuration — volume, pack rotation, categories, active pack, and other settings. Use when user wants to change peon-ping settings like volume, enable round-robin, add packs to rotation, toggle sound categories, or adjust any config.

Fix invisible/blank sections in Playwright full-page screenshots when using Framer Motion whileInView animations. Use when: (1) Playwright fullPage screenshots show blank areas where content should be, (2) sections render with opacity:0 because IntersectionObserver never fires, (3) motion elements with initial="hidden" appear missing in automated screenshots. Solution: scroll through the page programmatically before capturing. Covers Framer Motion, GSAP ScrollTrigger, and any IntersectionObserver-based reveal animations.

Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks

Fix for python-docx paragraphs silently falling back to "Normal" style when creating paragraphs via OxmlElement. Use when: (1) paragraphs created with OxmlElement have wrong style despite setting w:pStyle, (2) headings render as body text with no error, (3) style.name returns correct display name but XML uses different ID. The root cause is that python-docx display names (e.g., "Heading 2", "List Bullet") differ from XML style IDs (e.g., "Heading2", "ListBullet"). Also covers section breaks being lost during paragraph removal operations.

Fix state regression bugs caused by React Strict Mode double-execution racing with async operations (API fetches, WebSocket connections). Use when: (1) UI gets stuck in a loading/connecting state in dev but works in production, (2) a state setter overwrites a more advanced state with a stale value, (3) an effect consumes a one-time resource (memory store, one-time token) on first mount leaving the second mount to fall through to a slower async path. The fix uses React functional state updaters to prevent phase/state regression.

Fetch content from Reddit using Gemini CLI when WebFetch is blocked. Use when accessing Reddit URLs, researching topics on Reddit, or when Reddit returns 403/blocked errors. (user)

Automate the staging-to-production release workflow. Analyzes commits between main and staging, classifies user-facing changes, suggests a semver bump, and generates a Release object for lib/releases/releases-data.ts. Guides through PR creation, tagging, and post-deploy verification.

Fix for responsive video source selection failing in Chrome and Firefox when using <source media="..."> inside <video>. Use when: (1) building a video player that needs different sources for mobile vs desktop (portrait vs landscape), (2) <source media> attribute is ignored and wrong video loads, (3) need cross-browser responsive video without HLS/DASH streaming. Covers the matchMedia JS workaround pattern for React components with poster frame selection.

Syncs skills across AI CLI tools from a single source of truth. Global (~/.config/skillshare/) or project (.skillshare/) mode. Install from any Git host. Use when: "skillshare" CLI, skill management, or troubleshooting.

Fix unscannable QR codes in HTML posters, marketing assets, and static pages. Use when: (1) a custom inline JavaScript QR generator produces codes that won't scan, (2) you need a QR code for a fixed/known URL in a static HTML file, (3) debugging Reed-Solomon or masking bugs in hand-rolled QR generators. Solution: replace runtime JS generation with a pre-generated static SVG from the `qrcode` npm library, then verify with `zbarimg`.

Fix back button navigating to Stripe checkout after payment completion. Use when: (1) User completes Stripe payment and clicks back button, but returns to Stripe instead of the app, (2) document.referrer check for external sites doesn't work with Stripe, (3) router.back() goes to payment provider instead of previous app page. Covers Next.js, React Router, and any SPA with external payment redirects. Solution uses sessionStorage to track external returns reliably.