Web & Frontend

jaballer Skill

React accessibility (WCAG 2.2 AA) — semantic HTML first, ARIA only when needed, focus management, keyboard navigation, screen reader support, color contrast, prefers-reduced-motion. Use when building any user-facing UI, forms, modals, menus, tabs, carousels, or when accessibility is in scope. Critical for Senior UX Engineer interview signal. Triggers on "a11y", "accessibility", "WCAG", "ARIA", "keyboard", "screen reader", "focus", "semantic".

jaballer Skill

Client-side routing in React with React Router v6/v7 — createBrowserRouter and the data router, route definition patterns, dynamic params, loaders + actions vs. TanStack Query (when to use which), scroll restoration, focus management on route change, route-based code splitting with lazy(), nested routes and Outlet, NavLink active states, programmatic navigation, 404 / errorElement, type-safe params, when to skip routing entirely. Use whenever a React SPA needs more than one URL. Triggers on "routing", "router", "react-router", "react-router-dom", "createBrowserRouter", "Routes", "Route", "useParams", "useNavigate", "Outlet", "NavLink", "loader", "action", "scroll restoration", "deep link", "SPA navigation", "404 page", "lazy route", "code splitting".

jaballer Skill

Testing strategy for React apps — when to reach for Playwright (E2E) vs Vitest (unit/component) vs both, the senior testing pyramid for an SPA, Playwright setup with config + webServer + per-spec project structure, Vitest setup with jsdom + Testing Library, a11y-first locators (getByRole, getByLabel, toBeFocused, toHaveAttribute), assertion patterns for aria-pressed/aria-current/role=alert/focus-on-route-change, @axe-core/playwright for automated a11y audits, running against localhost vs deployed URL via env var, what NOT to test, common flakiness sources and fixes. Use whenever the project needs tests added — interview "would you add tests?" question, real production CI, or post-build polish layer. Triggers on "test", "testing", "playwright", "vitest", "jest", "e2e", "end-to-end", "unit test", "component test", "@playwright/test", "@axe-core/playwright", "getByRole", "testing library", "rtl", "smoke test", "ci tests", "test runner".

jaballer Skill

Project scaffolding for the first 5 minutes of a React interview build — Vite + React + TypeScript + Tailwind as the primary scaffold, Next.js App Router as alternate, "they gave me a starter repo" path (most likely Netlify scenario), file structure recommendations, useful dependencies (clsx + tailwind-merge + zod), App.tsx skeleton with brief-restate header, README starter, Tailwind config, what NOT to set up. Use at the start of any interview build to skip 5–10 minutes of setup decisions. Triggers on "scaffold", "bootstrap", "project setup", "first 5 minutes", "vite", "create vite", "package.json", "tailwind config", "App.tsx", "start a project", "new project", "set up", "initial setup", "starter repo".

jaballer Skill

Curated authoritative documentation URL library for React 19, accessibility (WAI-ARIA APG, WebAIM), performance (web.dev Core Web Vitals), HTML/CSS platform (MDN), forms (Zod, react-hook-form), testing (Testing Library, Playwright), Next.js App Router, TypeScript, and tooling — indexed by problem keyword for quick lookup during interview builds. Claude can WebFetch any of these URLs for current authoritative content when inline knowledge isn't enough. Use when you need to verify a pattern, look up a spec, or pull in primary-source docs mid-build. Triggers on "where to find", "documentation for", "spec for", "look up", "research", "reference", "WAI-ARIA", "MDN", "web.dev", "React docs", "Next docs", "Tailwind docs", "what does X say about", "authoritative".

jaballer Skill

Building a React frontend against an external REST API — TanStack Query setup, the standard fetch wrapper with typed errors, loading/error/empty/refetching states, paginated lists with keepPreviousData, optimistic updates, retry policy, query keys, Vite dev proxy for CORS, normalizing third-party API quirks (boxed values, inconsistent envelopes, missing filters), the "verify the response shape with curl before typing it" rule. Use whenever a React app talks to a remote API — public REST, internal microservice, headless CMS, third-party SaaS. Triggers on "API", "REST", "fetch", "TanStack Query", "react-query", "SWR", "CORS", "headless CMS", "data fetching", "loading state", "pagination", "optimistic update", "retry", "error boundary", "stale-while-revalidate", "endpoint".

jaballer Skill

Documentation patterns for React take-home projects and interview builds where documentation is an explicit deliverable — README structure (Overview / Decisions / Tradeoffs / How to Run / What's Next), in-code "why" comments (sparse, surgical), the brief-restate header at the top of the entry file, DESIGN.md / decisions log format, the "considered and rejected" template, PR description writeups, what NOT to document. Use whenever the project asks for documentation, especially for take-home interviews like the Netlify Senior UX Engineer technical project. Triggers on "README", "documentation", "design doc", "decision log", "DESIGN.md", "PR description", "code comments", "explain my code", "write docs", "take-home", "project deliverable", "Netlify project", "interview docs".

jaballer Skill

React 19 features and patterns for both vanilla React (Vite, Astro, plain) and Next.js App Router — useActionState, useFormStatus, useOptimistic, useTransition, useDeferredValue, the React Compiler, Suspense + use() for promises, Error Boundaries. Vanilla React 19 features work in any project; Next-specific patterns (Server Components, Server Actions, App Router conventions, metadata API) are clearly separated. Use when working in any React 19+ project to apply current patterns over older ones. Triggers on "React 19", "useActionState", "useFormStatus", "useOptimistic", "useTransition", "useDeferredValue", "React Compiler", "Suspense", "use()", "Server Component", "Server Action", "App Router", "metadata", "modern React", "current React", "RSC".

jaballer Skill

30-second component-tree decision recipes for common interview prompts. When the brief drops, look it up here and get tree + state-ownership + must/should/won't + one "wow" detail. Covers pricing card, hero + signup, multi-step onboarding, FAQ, modal, tabs, combobox, comparison table, newsletter, sticky nav, sidebar nav, code block, dashboard card, testimonial carousel, feature grid. Load this skill FIRST when starting any interview build. Triggers on "interview build", "what should I build", "component tree", "where to start", "brief recipe", "pricing card", "hero", "build a form", "build a modal", "build tabs", "build accordion", "build navigation", "build dashboard".

jaballer Skill

React patterns for product onboarding flows and documentation sites — multi-step flows, progress indicators, empty states, contextual hints, code-block components, TOC sidebars, on-this-page nav, callouts, copy-buttons, search, syntax highlighting. Use when building onboarding UI, product tours, documentation pages, knowledge bases, or developer-facing reference sites. Triggers on "onboarding", "tour", "walkthrough", "empty state", "tooltip", "documentation", "docs site", "code block", "TOC", "table of contents", "callout".

jaballer Skill

React component architecture and API design — composition, compound components, headless patterns, prop interfaces, controlled vs uncontrolled, polymorphic components, TypeScript prop typing, slot patterns. Use when designing component APIs, building reusable components, structuring a component library, or refactoring component structure. Triggers on "component API", "reusable", "compound component", "headless", "polymorphic", "props", "design a component".

jaballer Skill

Comprehensive form patterns for React 19 / Next 15 — Zod schemas with type inference, Server Actions + useFormStatus + useActionState, useOptimistic for instant feedback, react-hook-form when Server Actions aren't on the table, multi-step forms with useReducer + persistence, async validation, file upload with progress, error messages with full a11y wiring (aria-invalid, aria-describedby, role=alert, focus management on errors). Use for any form-heavy interview build — newsletter signup, contact form, login, signup, multi-step onboarding, settings page, file upload. Triggers on "form", "validation", "zod", "react-hook-form", "Server Action", "useFormStatus", "useActionState", "useOptimistic", "controlled vs uncontrolled", "multi-step form", "file upload", "form a11y", "form errors", "newsletter signup".

jaballer Skill

Paste-ready React hooks and helpers that other react-* skills reference but don't define — cn (clsx + tailwind-merge), useMediaQuery (SSR-safe), usePrefersReducedMotion, useFocusTrap, useAnnouncer + LiveRegion, useOnClickOutside, useLocalStorage (SSR-safe), useIsomorphicLayoutEffect, useDebounce, useThrottle, useEventListener, useInterval, useId patterns. Every snippet is SSR-safe and dependency-light. Load this skill at the start of any interview build. Triggers on "useMediaQuery", "focus trap", "cn helper", "clsx", "tailwind-merge", "live region", "useAnnouncer", "useLocalStorage", "useDebounce", "useThrottle", "snippet", "utility hook", "paste-ready", "click outside", "prefers reduced motion".

jaballer Skill

Senior-engineer narration patterns for code review walkthroughs — how to articulate component design decisions, tradeoffs, accessibility choices, performance considerations, and unspoken assumptions. Use when preparing to present code to interviewers, walking through a take-home, or documenting design decisions in PR descriptions. Triggers on "interview", "walkthrough", "review", "present", "narrate", "explain my code", "PR description".

jaballer Skill

Navigate the async-with-Slack-access technical interview format (Netlify and similar). The engineers will explicitly invite frequent questions and proactively check in — but the senior calibration is to ask ORGANICALLY when it makes sense, not on a schedule and not to perform engagement. Includes the ask-vs-commit decision matrix, Slack message templates (clarifying question, idea sanity check, stuck moment, response to check-in, submission), professional async tone, what makes a question senior vs. needy, the "I'm going with X, flag if wrong" pattern. Use during any time-boxed coding interview that includes a chat channel with the hiring engineers. Triggers on "Slack interview", "async interview", "ask vs commit", "clarifying question", "interview communication", "Netlify interview", "technical project", "during the build", "Slack channel", "async build".

jpoindexter Skill

Use when typographic vocabulary or first principles are needed — what an em actually is, font vs typeface, leading vs line-height, points vs pixels, how CSS units relate, what the em square means. Also use when someone is confidently using a term incorrectly, or when an explanation needs grounding before a decision is made.

indranilbanerjee Skill

Render multi-slide carousels from HTML templates via Playwright — slide content injected, brand styling applied, assembled to platform-ready images or PDF. Triggers on "/render-carousels", "render the carousel", "carousel for P04", "build the slides", "multi-slide post", "carousel from this outline", or any calendar post whose content_type is carousel. Local rendering, no API cost.

indranilbanerjee Skill

Build the interactive HTML review gallery showing every generated post — image, copy, platform, status — for team or client review in a browser. Triggers on "/build-review-gallery", "review gallery", "show me the month", "build the gallery", "preview everything", "review page", or after a generation batch completes and someone needs to see it all in one place. Local file, no server, no API cost.

input-output-hk Skill

Create or update Storybook stories for Daedalus React components. Use this when asked to write stories, visual tests, storybook entries, or component demos for new or existing features.

irwebtools Bundle

Optional skill for API or server-side work that is not covered by the Supabase skill. Use only when the product outcome explicitly needs a backend beyond frontend mocks or Supabase.

irwebtools Bundle

Plan and record checks and acceptance journey evidence for React FSD work.

irwebtools Bundle

Build a working product prototype — usually React + TypeScript with Feature-Sliced Design. Use after product definition and UX/UI guidance when a runnable experience is required.

irwebtools Bundle

Build a React + TypeScript + FSD production-oriented POC.

irwebtools Bundle

Build or change a React interface quickly while preserving a clean path for developers to continue the same codebase. Use for React/TypeScript implementation, Feature-Sliced Design structure, forms, routing, data seams, and reusable UI composition.

irwebtools Bundle

Design React components with clear FSD ownership and public APIs.

irwebtools Bundle

Record React FSD placement and ownership before POC coding.

anton-abyzov Skill

Generate and run Playwright E2E tests traced to spec.md acceptance criteria, with an optional accessibility audit. Use when saying "e2e tests" or "a11y audit".

fortiumpartners Bundle

React Framework - Quick Reference

bolna-ai Bundle

Diagnose Bolna voice-agent issues: robotic / laggy responses, agent interrupting users or never interrupting, long silences, premature hangups, webhook misses, wrong caller context, batch failures, SIP/SRTP no-audio, agent restricted by content policy, balance-low queueing, and provider connection latency. Maps symptoms to the exact field on the agent (`task_config`, `endpointing`, `incremental_delay`, `number_of_words_for_interruption`), and uses `latency_data` from `GET /executions/{id}` + raw logs to pinpoint which pipeline component (transcriber, LLM, synthesizer) is slow.

boya357 Bundle

从预设URL列表抓取内容，筛选高质量技术信息并生成全中文每日新闻报告，支持HTML可视化预览和多格式下载。适用于需要获取每日科技新闻、AI资讯或技术信息的需求场景。

cntwdev Bundle

Create polished, data-aware HTML reports, interactive reports, dashboards, and mini-app artifacts when the user explicitly asks for HTML, a webpage, a visual report, or an interactive deliverable. Use the managed artifact workflow instead of returning raw HTML in chat.

contextosai Bundle

Restructure existing code while preserving externally observable behavior through explicit invariants, characterization evidence, small reversible steps, and continuous verification. Use when the user asks to refactor, simplify, extract, reorganize, modularize, deduplicate, split a component, improve architecture, or pay down technical debt without intentionally changing product behavior. Distinguish refactoring from feature work and stop scope drift from hiding inside structural edits.

contextosai Bundle

Create or revise ContextOS MDX documentation while preserving frontmatter, foundation templates, navigation, component registration, canonical examples, URL stability, and spec/reference alignment. Use for docs pages, not blog posts or contract implementation alone.

crissmoldovan Bundle

Render a change's blast map as diagrams — mermaid first, optionally one self-contained interactive HTML — with changed-vs-affected styling and blind spots stated on the diagram itself. Use when a blast-area map needs to be seen, shared, or dug into.

mozilla Skill

Reviews changed React/TSX code for component design, hooks misuse, performance, accessibility, and state management issues. Reports findings with severity and concrete fix recommendations. Operates on files changed vs main.

naieum Bundle

Audit whether a mobile app is ready for Apple App Store and Google Play submission — review-guideline compliance, privacy manifests and Data safety alignment, target SDK / API floors, permissions and store declarations, metadata and asset rules, monetization and billing rules, and release-track requirements — with file:line evidence for everything checkable from code and an interactive checklist for store-console items. Triggers on is my app ready for the App Store, app store readiness audit, why was my app rejected, prepare for Play Store submission, pre-submission checklist, App Review guidelines check, Play policy check, privacy nutrition labels, privacy manifest check, data safety form help, target API level check, will this pass review, App Store rejection, Google Play rejection, can I put my web app in the App Store, turn my website into an app, publish my PWA to the Play Store, Capacitor or React Native for the stores. For a web app with no native target it does not stop — it assesses store feasibility