Web & Frontend

jacob-balslev Skill

Use when building or reviewing interactive UI, forms, navigation, or dynamic content. Covers semantic HTML, keyboard access, focus management, labeling, state-change announcement, and reduced-motion / high-contrast preferences. Do NOT use for color-palette creation, visual branding, feedback-state staging, or prose reading-level accessibility - those belong to `visual-design-foundations`, `interaction-feedback`, and documentation respectively. Do NOT use for rewrite this error message at a 6th-grade reading level. Do NOT use for clean up this accessibility code without changing how it behaves.

jacob-balslev Skill

Use when working with Shopify — Admin API, Storefront API, OAuth scopes, HMAC SHA-256 webhook verification, GraphQL query-cost handling, Online Store 2.0 themes (sections, blocks, Liquid), metafields and metaobjects, and App Proxy. Do NOT use for generic e-commerce design, non-Shopify storefronts, or internal event-contract design. Do NOT use for Design the event payload schema for our internal order-processing pipeline. Do NOT use for Implement Stripe Connect onboarding for a marketplace. Do NOT use for Refactor a generic shopping cart component that isn't Shopify-specific.

delorenj Bundle

Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.

delorenj Bundle

Migrates vibe-coded web applications to AWS. Handles the full workflow from analysis through migration to deployment, producing deployable AWS Blocks infrastructure code. Supports full-stack apps built with vibe-coding platforms (Lovable, Bolt.new, Replit) and frontend web applications and websites: React, Vue, Angular, Next.js, Nuxt, Astro, SvelteKit, Gatsby, Vite, Svelte, Solid, Docusaurus, and others (static sites, SPAs, and SSR frameworks with static export). Triggers on: launch with AWS, launch on AWS, deploy to AWS, migrate to AWS, host my app on AWS, move my app to AWS, transfer my app to AWS. Activates when the user wants to migrate a vibe-coded app or frontend web app to AWS, even if they don't say 'migrate' explicitly.

delorenj Bundle

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

kevinnft Bundle

Design one-off HTML artifacts (landing, deck, prototype).

delorenj Skill

Find working Deepgram integration examples with third-party platforms and frameworks. Use whenever someone wants to integrate Deepgram with Twilio, LiveKit, LangChain, Vercel AI SDK, Discord, Vonage, Pipecat, Expo, FastAPI, Cloudflare Workers, Slack, Telegram, LlamaIndex, Zoom, Next.js, Nuxt, Django, SvelteKit, NestJS, Spring Boot, CrewAI, Riverside, SignalWire, and more. Examples are full runnable integration demos, not minimal feature snippets.

jacob-balslev Skill

Use when building an artifact whose purpose is to answer a specific question — paper sketch, wireframe, clickable mockup, wizard-of-oz, role-play, service prototype, or code spike — at the lowest fidelity sufficient to produce that learning. Do NOT use for production-grade component construction, design-system contribution, or building the actual ship-ready feature — those are design-module-composition and engineering implementation. Do NOT use for Build the production React component for the new dashboard widget. Do NOT use for Add this component to the design system library. Do NOT use for Write the migration script for the production database.

jacob-balslev Skill

Use when designing or reviewing React ref usage: refs as mutable handles that survive renders without triggering them, useRef for DOM access and instance values, ref callbacks for mount/unmount hooks, forwardRef and React 19 ref-as-prop, useImperativeHandle for controlled imperative APIs, and ref forwarding through compound-component primitives such as Radix Slot. Use for focus, measurement, animation, third-party DOM integration, and sparse imperative APIs; never as a substitute for reactive state. Do NOT use for the broader hook discipline (use react-hooks-patterns), state ownership decisions (use state-management), component-layering strategy (use component-architecture), Client/Server serialization boundaries (use client-server-boundary), or form validation UX (use form-ux-architecture). Do NOT use for design the Rules of Hooks and dependency-array discipline for useEffect (use hooks-patterns).

jacob-balslev Skill

Use when reasoning about the pattern where a language model emits structured output describing UI components or a UI sub-tree that an application renders for the user. Covers the typed-schema component palette, JSON Schema/function-calling constraints, two render substrates (typed component tree vs sandboxed iframe), the app-side render pipeline, bidirectional interaction loop via postMessage/JSON-RPC, the security boundary between model author and application renderer, and distinctions from chat markdown, prebuilt-widget routing, RSC streaming, and model-emits-code patterns. Do NOT use for page-level rendering taxonomy (use rendering-models), the tool-call protocol cycle (use tool-call-flow), untrusted-content defenses (use prompt-injection-defense), or general component-library architecture (use design-system-architecture). Do NOT use for design the JSON shape of an HTTP API endpoint (use api-design).

jacob-balslev Skill

Use when reasoning about how a system, user, or designer's internal model of behavior may diverge from reality — applies across UX, distributed systems, type systems, API design, and team collaboration. Covers the three-model frame (designer / system image / user), the two gulfs (execution and evaluation), analogy and metaphor as model-seeding, the five failure modes (transfer, overgeneralization, underspecification, drift, invariant blindness), the surface/operational/architectural/domain layering, and the discipline of validating a model against the system it claims to represent. Do NOT use for the visual representation of a model (use knowledge-modeling), for the formal-domain entities-attributes-relationships of conceptual modeling (use conceptual-modeling), for cognitive biases in decision-making (out of scope), or for empirically eliciting user models via research methods (use user-research). Do NOT use for name the React hook for managing form state (tactical implementation choice).

jacob-balslev Skill

Use when auditing a route, defining a route contract, reviewing onboarding or setup flows, diagnosing why a page feels confusing, or when the user asks about top tasks, time-to-value, branching, dead ends, or task complexity. Provides goal-driven UX analysis that turns vague critique into explicit goal -> task -> subtask decomposition and a primary / secondary / supporting hierarchy contract for the first viewport. Do NOT use for control-pattern choice (use `interaction-patterns`), visual craft (use `visual-design-foundations`), responsive layout (use `layout-composition`), or accessibility-only QA (use `a11y`). Do NOT use for review this PR for code quality. Do NOT use for audit this UI for WCAG 2.2 violations. Do NOT use for decide the CSS grid layout for this hero section. Do NOT use for pick the right colors for this status badge. Do NOT use for build the navigation taxonomy for the whole product. Do NOT use for should we use a dropdown or a stepper here.

jacob-balslev Skill

Use when designing or reviewing React error boundaries: what an error boundary catches (rendering errors, lifecycle errors, constructor errors) and what it does not (event handler errors, async errors, SSR errors, errors in the boundary itself), why React still requires class components for error boundaries, how to place boundaries by granularity (page / feature / leaf), how error boundaries pair with Suspense, the reset-and-recover pattern (resetKeys, error.reset), the Next.js error.tsx route-segment convention, and how to integrate boundaries with error reporting (Sentry, observability). Covers React 18+ and Next.js App Router. Do NOT use for Suspense boundary placement (use suspense-patterns), for general error-handling discipline (try/catch in async code, validation errors), for backend error contracts (use api-design), or for observability infrastructure (use error-tracking). Do NOT use for handle a Promise rejection in an event handler (use code-review for the local try/catch pattern).

jacob-balslev Skill

Use when designing or extending an application exception-reporting pipeline: error boundary placement, tracker SDK wrappers, sanitized reporting calls, environment gating, user context without PII leaks, breadcrumbs, and verification that each layer reports correctly. Covers component, route, global, and manual capture surfaces plus central `reportError`/`reportMessage` patterns. Do NOT use for the visual error UX shown to users (use `a11y` and interaction skills), chasing one captured error (use `debugging`), or broad privacy and retention policy (use `owasp-security`). Do NOT use for design accessible error-message copy and recovery UI for the 404 page. Do NOT use for the boundary fired but the tracker shows no event — root-cause it. Do NOT use for explain our error-tracking architecture in the contributor docs. Do NOT use for review this AI-generated error handler for correctness. Do NOT use for decide if the new error path needs an integration regression test.

jacob-balslev Skill

Use when reasoning about React Hooks as a discipline: why the Rules of Hooks exist as a call-order invariant, how dependency arrays encode a contract between closure and rerender, when useEffect is the wrong primitive, the distinction between derived state and stored state, when to extract a custom hook, when memoization (useMemo, useCallback, memo) is useful or obsolete, and how React 18/19 semantics (automatic batching, concurrent rendering, Strict Mode effect checks, Effect Events, React Compiler) change the calculus. Do NOT use for general React rendering models (use rendering-models), the client/server boundary (use client-server-boundary), component API architecture (use component-architecture), Suspense boundary design (use suspense-patterns), or application-wide state location (use state-management). Do NOT use for choose between Server Components and Client Components for a new page. Do NOT use for decide where app state lives across server, client UI, URL, and persistent storage.

delorenj Bundle

Keep a per-repo CSV ledger of every billable and load-bearing component across every provider, refreshed against live provider APIs, reconciled line-by-line against the actual bill, and audited for the components nobody is watching. Use when asked to inventory infrastructure, find or explain cloud cost, work out what a project actually costs per month, reconcile a bill against what is deployed, add a newly provisioned component to the record, refresh a stale inventory, find forgotten or duplicated resources, check a free-tier window, or decide what can be torn down. Triggers - component inventory, service inventory, what does this cost, monthly cost, cloud spend, AWS bill, cost reconciliation, unused resources, forgotten resources, free tier expiry, teardown plan, what is still running, rollback-only resource. Do NOT use for provisioning, deleting or modifying infrastructure (this skill is read-only against every provider), for application performance, or for BMAD planning artifacts.

kevinnft Bundle

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

kevinnft Bundle

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

dykyi-roman Bundle

Generates Mediator pattern for PHP 8.4. Creates coordination layer for complex component interactions with event dispatching, request/response handling, and colleague classes. Reduces coupling between interacting objects. Includes unit tests.

jacob-balslev Skill

Use when reasoning about how a web UI is produced and delivered: client-side rendering, server-side rendering, static-site generation, incremental static regeneration, React Server Components, streaming SSR, edge rendering, and partial prerendering. Covers the time × place grid (build/request/stream/interaction × server/edge/client), the trade-offs between first-paint latency and time-to-interactive, the relationship between rendering and hydration, and how a route's content profile (dynamic / static / personalized) maps to a model. Do NOT use for organizing the frontend codebase (use frontend-architecture), the serialization frontier between server and client code (use client-server-boundary), the wire protocol itself (use http-semantics), or specific deploy-platform composition patterns (use vercel-composition-patterns).

jacob-balslev Skill

Use when deciding where state lives, how it propagates, and how it composes: local component state vs lifted/shared state vs application state, server state vs client state, URL as state, persistent state, derived state, and the cross-cutting decision of who owns which piece. Covers state colocation, lifting up, derivation vs duplication, single source of truth, optimistic updates, server-state cache invalidation (React Query/SWR model), URL state for deep-linking, and anti-patterns like prop-drilling, state sprawl, and global-state-by-default. Do NOT use for specific state library choice (Redux vs Zustand — tactical), data fetching mechanics (use api-design or rendering-models), client/server boundary (use client-server-boundary), distributed system state (use replication-patterns), or finite state machines (use state-machine-modeling). Do NOT use for implement a specific Redux reducer (tactical, library-specific). Do NOT use for design the JSON shape of an API response (use api-design).

delorenj Bundle

Scaffold and maintain a single-file HTML project console that replaces scattered markdown status docs with one browser-renderable control center for planning, progress tracking, artifacts, and human feedback.

delorenj Bundle

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.

delorenj Bundle

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

kevinnft Skill

Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

kevinnft Skill

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

jacob-balslev Skill

Use when deciding responsive page or screen structure: section order, scan pattern, grid/flex composition, breakpoints, viewport hierarchy, responsive media, and density. Do NOT use for user-goal decomposition (use `task-analysis`), navigation taxonomy (use `information-architecture`), visual polish (use `visual-design-foundations`), or component/token contracts (use `design-system-architecture`). Do NOT use for what is the user's top task for this route? Do NOT use for design the global navigation and sitemap. Do NOT use for pick the color palette, type scale, and visual mood. Do NOT use for define component variants and semantic tokens. Do NOT use for navigation and page grouping (use information-architecture). Do NOT use for visual craft choices (use visual-design-foundations).

jacob-balslev Skill

Use when designing or reviewing Next.js middleware: the single middleware.ts request preprocessor, Edge Runtime constraints, matcher config, NextRequest/NextResponse APIs, redirects, rewrites, pass-through responses, direct responses, auth gates, locale routing, A/B rewrites, security-header delivery, geo routing, bot blocking, and request ID injection. Use for fast cross-cutting request concerns that apply across many routes. Do NOT use for per-route API handlers, Server Actions, HTTP semantics, full security policy design, streaming logic, or webhook signature handling. Do NOT use for implement a /api/posts POST endpoint (use route-handler-design). Do NOT use for implement a delete-comment mutation triggered from a form button (use server-actions-design). Do NOT use for explain what an HTTP 308 means vs 307 (use http-semantics). Do NOT use for design the full CSP policy and the rest of the security-header strategy (use security-fundamentals).

dykyi-roman Bundle

Generates Health Check pattern for PHP 8.4. Creates application-level health endpoints with component checkers (Database, Redis, RabbitMQ), status aggregation, and RFC-compliant JSON response. Includes unit tests.

dykyi-roman Bundle

Generates Retry pattern for PHP 8.4. Creates resilience component with exponential backoff, jitter, and configurable retry strategies. Includes unit tests.

dykyi-roman Skill

Analyzes PHP code for output encoding issues. Detects XSS vulnerabilities, missing HTML encoding, raw output, template injection risks.

fusengine Bundle

Use when converting existing code to modular architecture (Laravel, Next.js, React). Triggers: "modularize", "convert to modules", "migrate to modular", "restructure modules".

fusengine Bundle

Use when building Astro 7 sites, choosing an output mode (static/server/hybrid), configuring middleware, or upgrading from Astro 5/6.

jscraik Bundle

Audit, validate, and troubleshoot Agentation integrations in frontend apps. Use when annotations, MCP registration, endpoint sync, webhook delivery, or watch mode readiness are failing.

jscraik Bundle

Audit UI implementation quality when frontend work needs accessibility, responsiveness, theming, performance, and anti-slop guardrails.

fusengine Bundle

Use when doing database operations in an Astro project via Astro DB (defineDb, defineTable, db/config.ts, Turso).