Web & Frontend

dinaf2026-web Skill

Dynamic Open Graph image generation for Next.js — @vercel/og patterns, per-page OG images, template system, and social sharing optimization for Twitter/X, LinkedIn, and Facebook.

dinaf2026-web Skill

GSAP animation patterns for modern websites — ScrollTrigger, timelines, text animations, SVG morphing, and scroll-driven storytelling. More powerful than CSS or Framer Motion for complex sequences.

cr4yfish Skill

Deep reference for the WebMCP web standard (Web Model Context Protocol). Use when implementing, reviewing, or debugging WebMCP tools in any web app or framework — imperative API (document.modelContext / navigator.modelContext, registerTool, provideContext), declarative API (toolname/tooldescription form attributes, respondWith), tool schemas, annotations, security, best practices, evals, browser support, or when integrating WebMCP into a React/Next.js app (via react-web-mcp) or vanilla JS.

enkrateialucca Bundle

decision-deck-html

enkrateialucca Bundle

Generate single-file HTML tools following Simon Willison's patterns. Creates client-side utilities with localStorage API key management, no build steps, and CDN dependencies.

enkrateialucca Bundle

Render a short MP4/GIF that takes a screenshot of a page of text (PDF screenshot, article screenshot, book scan, etc.) and animates a yellow marker-style highlight over a specific quote while blurring the surrounding text. Built on Remotion (CSS blur + mix-blend-mode multiply marker + feathered sharp reveal). Use this skill whenever the user wants to "highlight this quote in the image as a video", "make a reel that highlights this sentence", "animate a marker sweep over this passage", "blur everything except this sentence and record it", or hands over a screenshot of text along with a quote they want emphasized for social media / lecture slides. Also trigger on phrases like "highlight reel of this paragraph", "animated highlighter", "marker animation on this screenshot", or any request that combines a text-image and a target quote with the intent of producing a short video.

velimirmueller Bundle

Use when making a frontend installable and offline-capable — sets up vite-plugin-pwa (service worker precaching the app shell, web manifest, auto-update), and optionally persists the TanStack Query cache so cached data is available offline, keeping the SW out of API caching.

velimirmueller Bundle

Use when adding authentication to a frontend SPA — treats the current user as server state (TanStack Query), keeps tokens out of localStorage (httpOnly cookies or in-memory access + refresh), wires login/logout mutations, a transparent 401→refresh retry in the fetcher, and route guards that read the user query.

velimirmueller Bundle

Use when internationalizing a frontend project — sets up i18next + react-i18next (React) or vue-i18n (Vue) with typed message keys, lazy-loaded per-locale catalogs, Intl-based number/date/relative formatting, and a persisted locale choice detected from the browser.

velimirmueller Bundle

Use when setting up CI/CD for a frontend project — a GitHub Actions pipeline (install → lint → typecheck → test → build → e2e + bundle budget) that gates merges, plus Netlify preview deploys per pull request.

velimirmueller Bundle

Use when adding forms and validation to a frontend project — wires React Hook Form (React) or VeeValidate (Vue) with Zod schema-first validation, where one schema is the single source of truth for shape, rules, and inferred types, with accessible fields and submit wired to a TanStack Query mutation.

velimirmueller Bundle

Use when a frontend project reads environment variables — validates import.meta.env against a Zod schema once at startup (failing fast with a clear message), exports a typed env object the seams import instead of raw import.meta.env, and augments ImportMetaEnv for autocomplete.

velimirmueller Bundle

Use when adding a new module, utility, helper, hook, or any piece of logic to a frontend project — keeps UI components thin by routing logic into the right layer (utils / libs / hooks / composables / stores) behind a typed interface, with a barrel export and a colocated unit test.

me12free Skill

---

velimirmueller Bundle

Use when adding animation and transitions to a frontend — uses the native View Transitions API for navigation/layout changes and the Motion library (motion/react, formerly Framer Motion) for component enter/exit/gesture animation, with every animation gated behind prefers-reduced-motion.

velimirmueller Bundle

Use when adding client-side routing to a frontend SPA — wires TanStack Router (typed, file-based, React) or Vue Router (Vue) with lazy route code-splitting, loaders that prefetch into the TanStack Query cache, per-route error + pending UI, and a guard pattern for protected routes.

velimirmueller Bundle

Use when adding realtime / live server-push updates to a frontend SPA — wires a transport-agnostic WebSocket seam (reconnect with backoff, offline-aware, no-op without config) and a hook/composable that writes pushed server data into the TanStack Query cache (patch entity + invalidate lists, re-sync on reconnect), with connection status as the only UI-state store.

velimirmueller Bundle

Use when setting up linting and formatting in a frontend project — installs Biome (lint + import sorting) and Prettier (formatting with Tailwind class sorting) with Biome's formatter disabled so they don't fight, plus a lefthook pre-commit hook and a CI check.

velimirmueller Bundle

Use when adding product + performance analytics to a frontend — creates one provider-agnostic analytics seam (trackEvent/trackPageView, like the captureError seam), wires Core Web Vitals as real-user monitoring, fires page views on route change, and stays privacy-first (cookieless default, consent-gated, no PII). No-ops without config.

velimirmueller Bundle

Use when wiring up the test stack for a frontend project — sets up Vitest (unit + integration in Node, UI in real-browser mode via Playwright), Storybook stories-as-tests, Playwright e2e, and MSW network mocking, with tests under tests/{unit,ui,integration,e2e} rather than co-located.

velimirmueller Bundle

Use when setting up or hardening TypeScript in a frontend project — applies strict mode, additional safety flags (noUncheckedIndexedAccess, noImplicitOverride), and consistent path aliases (@/*) across tsconfig, vite, vitest, playwright, and storybook configs.

velimirmueller Bundle

Use when tuning frontend performance — enables the React Compiler, splits code by route and lazy-loads heavy chunks, adds bundle analysis with a size budget, measures Core Web Vitals (LCP/INP/CLS) with web-vitals, and applies image/CLS best practices. Measure first, then optimize.

velimirmueller Bundle

Use when adding feature flags to a frontend — wires the vendor-agnostic OpenFeature SDK (a useFlag hook in React, a composable in Vue) with safe defaults, an evaluation context for user targeting, a dev override, and a pattern for gating routes behind flags. Swap providers (PostHog/GrowthBook/LaunchDarkly/…) in one line.

velimirmueller Bundle

Use when making a frontend accessible — turns on a11y linting (Biome a11y rules for React/JSX, eslint-plugin-vuejs-accessibility for Vue templates), establishes semantic-HTML/focus/reduced-motion conventions, and adds axe checks to the test stack so accessibility regressions fail CI.

velimirmueller Bundle

Use when adding error boundaries to a frontend project — wires up an app-shell boundary, page-level boundaries, and a reusable component-level boundary with user-friendly fallback UIs and a logging-hook seam (Sentry/LogRocket-ready, but not installed).

velimirmueller Bundle

Use when hardening a frontend SPA's delivery — defines a Content-Security-Policy and standard security headers delivered at the edge via Netlify, dependency hygiene via Dependabot, and an honest note on the XSS surface.

velimirmueller Bundle

Use when adding state management to a frontend project — wires server-state (TanStack Query) and UI-state (Zustand for React / Pinia for Vue) with a hard boundary between them, a typed query-key factory, a fetch seam, and example query/mutation hooks plus a small UI store.

velimirmueller Bundle

Use when wiring production error tracking — points the existing captureError seam at Sentry (init with tracing + masked session replay, sampled in prod), uploads hidden source maps via @sentry/vite-plugin, and tags release + environment. No-ops without a DSN so local dev is unaffected.

velimirmueller Bundle

Use when starting a brand-new frontend project from an empty directory — scaffolds a Vite + TypeScript app (React 19 or Vue 3), pins pnpm and the active Node LTS, and installs + wires Tailwind v4, leaving a running base for the other frontend skills to build on.

velimirmueller Bundle

Use when laying down folder structure for a frontend project — creates atomic-design component layout (atoms / molecules / organisms / templates / pages) plus hooks-or-composables, libs, and utils folders, with index.ts barrels and one example component (with a story) per atomic layer to document the pattern.

velimirmueller Bundle

Use when cleaning up a freshly scaffolded frontend project — purges default boilerplate (demo components, default styles, placeholder routes, sample assets) before laying down real structure.

the-notorious-avengers Bundle

Preact 11 specialist skill — signals-based reactivity (v2 API with createModel/useModel), preact/compat migration from React, third-party embed widgets (shadow DOM isolation, IIFE bundles), Astro island integration (client:* directives, >= 5.0.1 useId fix), and Fresh 2.x framework (Deno-native, islands + serializable props). Use when building Preact components, evaluating Preact vs React, migrating from React to Preact, embedding a widget on third-party pages, or working with Astro or Fresh projects. Do NOT use for React architecture in general (react-guardian), Next.js App Router configuration (react-guardian), or Deno infrastructure beyond Fresh (devops-guardian).

the-notorious-avengers Bundle

Reviews, refactors, and authors modern Python codebases (Django, FastAPI, Celery, Channels, scripting, packaging, data) using a canonical opinionated stack — Django Ninja over DRF, Celery + Redis for jobs, Channels for realtime, pytest + factory_boy for tests, uv for packaging, Pydantic v2 at boundaries, Ruff and pyright for quality. Use when the user says "review this Python code", "Django app review", "audit this Django app", "ORM audit", "fix N+1", "DRF to Ninja migration", "Celery refactor", "Channels enablement", "pytest setup", "type-adoption plan", "Ruff config", "uv migration", "settings split", "async refactor", "Django + React audit", "Python scripting / packaging help", or when `python-guardian` is invoked. Do NOT use for React component shape (react-guardian), DB schema design / indexing / partitioning (db-guardian), security audit (security-guardian), auth provider choice / OAuth flow (auth-guardian), Stripe SDK design (payments-guardian), AI cognitive infra / RAG / coaches / evals (mind-guardian

rloisell Skill

BC Government Identity and Access Management — DIAM/Keycloak OIDC PKCE integration, realm selection, React oidc-client-ts setup, token lifecycle, backchannel logout, Common SSO vs DIAM comparison, and user attribute mapping. Use when implementing authentication, configuring an OIDC client, troubleshooting token refresh, or choosing between identity providers.

the-notorious-avengers Bundle

API documentation authority — Swagger UI / Redoc / Scalar / Mintlify / Stoplight / Bump.sh tool selection, OpenAPI spec enrichment with JSON examples, self-hosted and managed hosting, SDK generation (TypeScript / Python / Go via openapi-generator-cli and Fern/Speakeasy), and changelog discipline. Invoke when the user says "set up API docs", "which docs renderer should I use", "generate an SDK from my spec", "deploy my OpenAPI docs", "write an API changelog", "compare Redoc vs Scalar", or "publish API reference to GitHub Pages". Do NOT invoke for general documentation sites (library-guardian), API security scheme audits (security-guardian), or backend route design (python-guardian / react-guardian).

rloisell Skill

Structured logging, metrics, and tracing for BC Gov .NET / React / OpenShift projects — Serilog JSON configuration, log level standards, PII-free logging rules, Prometheus pod annotations, OpenTelemetry .NET SDK setup, health check endpoints, and alert baseline. Use when configuring logging, adding metrics instrumentation, setting up health checks, or diagnosing production issues.