Claude Skills by Firzus

Build and update browser-based visualizations and interactive demos, including simulations, 2D or 3D scenes, games, maps, charts, and mockups. Use when the user needs to see or interact with a result rather than read an explanation.

Review a scoped diff against requirements, project standards, and correctness using independent read-only reviewers. Use for branch, PR, or uncommitted-change review, and implementation review checkpoints.

Investigate a question across sources with delegated research, adversarial verification, and a reusable evidence dossier. Use for explicit deep research, substantial comparisons, evidence accumulation, or updating a research dossier.

Gamification design for products, apps, and game meta-layers: design an engagement, habit, or retention system; choose or audit mechanics (points, badges, leaderboards, streaks, progress bars, variable rewards); diagnose mechanics that backfire (novelty decay, demotivated users, streak churn); or run an ethics / dark-pattern check.

Generates or edits raster images with AI (photos, illustrations, textures, sprites, mockups, logos, infographics), including transparent-background cutouts. Use when the task needs an AI-created or AI-edited bitmap; not for SVG/vector or code-native visuals.

Execute a published Linear issue by work type, with status tracking, test-first verification, current documentation, and a verified handoff.

Find evidenced architecture improvements and publish the approved ones as a Linear parent issue with one Task sub-issue per refactor, ready for implement.

Resolve open decisions through question rounds until the agreed scope and consequential edge cases are covered, then return accepted decisions to triage or an Interview issue run by implement.

Resolve a bounded design or feasibility question through an observable experiment. Use for authorized interface, logic, or technical exploration, including prepared Prototype issues; not settled implementation or source-only research.

Configure a reviewed Codex Operating Policy through model_instructions_file and offer low model verbosity with separate consent, backups, and verification.

Install, update, remove and author Agent Skills with the `skills` CLI (skills.sh, vercel-labs/skills). Use when adding a skill from a repo, sharing skills across agents, choosing project vs global scope, publishing a skill repo, or debugging a skill the agent never fires.

Record video evidence with FFmpeg after a visual bug fix or when asked for a recorded demo of a web page, native application, or game.

Create, update, and review AGENTS.md files, skills, and their references. Propose project-instruction changes for approval before writing.

Transcribes YouTube videos and produces evidence-backed learning reports. Use when asked to extract YouTube captions, transcribe a video's audio, or explain what a video teaches using speech and on-screen demonstrations.

Implements Figma designs (frames, components, HUD elements, menus) as Unity UI Toolkit interfaces — UXML hierarchy, USS styles mapped to design tokens, exported sprite assets, and a minimal C# controller — using the Figma MCP server (get_design_context, get_metadata, get_screenshot, get_variable_defs). Use when the user provides a Figma URL and wants it implemented in a Unity project, asks to "implement this Figma design in Unity", "build this HUD/menu/component from Figma", "convert Figma to...

Picks the Unity tool for the job and applies it. Routes each need to one chosen default — UI Toolkit, Awaitable, Addressables, Input System, URP, Netcode for GameObjects, Multiplayer Services, Dedicated Server, Unity CLI — and keeps the project CoreCLR-ready for the Mono removal in 6.8. Use when writing, reviewing, or architecting Unity code, when building a custom Editor tool or inspector, when driving the Unity Editor from an agent, when choosing between two Unity tools that do the same job...

AdSense publisher monetization — improve ad revenue on a website without risking the account. Use when the user wants to raise AdSense revenue or RPM, place ad units or choose between Auto ads and manual units, diagnose an earnings, coverage, or ads-not-showing problem, integrate or fix ad code in a React/Next.js or SPA codebase, clear an AdSense policy, consent/CMP, ads.txt, or account-approval blocker, reduce ad-caused CLS/LCP damage, or judge a move to Ad Manager or a managed ad network.

Astryx (@astryxdesign) — Meta's open-source, agent-ready React + StyleX design system. Covers setup (npm packages, npx astryx init, StyleX compiler), the agent discovery loop (astryx template/component/docs, MCP server, --dense), per-component subpath imports, the xstyle styling order, design tokens, the Theme provider and defineTheme theming, cascade-layer CSS wiring, Tailwind and library interop, layout primitives, and incremental migration. Use when the user mentions Astryx, @astryxdesign,...

Find inspected UI references for visual inspiration or interaction decisions, especially in editors and professional tools. Also use for explicit maintenance of the bundled design-reference catalog.

Create a project's design system — design read, dials, tokens, themes — recorded in DESIGN.md. Use when the user wants a design system, theme, or design tokens for a site or app, or when the frontend-design pipeline reaches phase 1.

Dokploy deployment and operations best practices. Use when the user deploys apps, databases, or Docker Compose stacks with Dokploy; configures domains, Traefik, Swarm health checks, CI/CD, backups, or webhooks; or troubleshoots Bad Gateway, 404, volume, database, or hardening issues.

Extracts the visual theme (colors, typography, radius, spacing, shadows) of a public website provided by the user and produces a shadcn/ui + Tailwind CSS v4 compatible token block, ready to paste into the project's `globals.css` (or `app.css`) inside `@theme` and `.dark`. Uses the `agent-browser` CLI to drive a real Chromium instance. Use when the user asks to "extract the theme of <url>", "reverse-engineer the design tokens of <site>", "copy the look of <site> into shadcn", "build a tailwind...

Implements a Figma design from a Figma URL, using the Figma MCP server: extracts design context, tokens (colors, typography, spacing), and assets (SVG, PNG), builds the UI in the project's stack — or as a standalone page for design review — then iterates until the render matches the node geometry Figma reports, to the pixel, and the reference screenshot. Use when the user provides a Figma link and wants it implemented, asks to "implement this Figma design", "build this screen from Figma", "ma...

Design a site's whole frontend — design system, greyboxing, real content. Use when the user wants to design or redesign a site's frontend, or to build all the pages of a new site.

Greybox a site's pages — layout, UX, motion on placeholder content — from an existing DESIGN.md. Use when the user wants to greybox, lay out, or build the pages of a site whose design system exists, or when the frontend-design pipeline reaches phase 2.

Next.js 16+ App Router with React Server Components and TypeScript. Use when working in app/, layouts, pages, route handlers, proxy.ts, Server Actions, "use client"/"use server"/"use cache" boundaries, caching and revalidation, typed routes, view transitions, Cache Components adoption, instant navigation optimization, runtime verification, or Partial Prefetching adoption.

Payload CMS 3.x, the Next.js-native TypeScript headless CMS. Use when working in payload.config.ts, collections, fields, access control, hooks, the Local API, versions and drafts, database or storage adapters, plugin authoring, or the official MCP plugin.

Replace a greyboxed site's placeholders with real content — copy, imagery, data. Use when the user wants to fill a site with final content, write its copy, or source its imagery, or when the frontend-design pipeline reaches phase 3.

Guides building GPU-accelerated visual effects in React / Next.js with the `shaders` npm package from shaders.com — declarative `<Shader>` component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (`auto-animate`, `mouse-position`, `map`), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cur...

SWR v2 (stale-while-revalidate) data fetching for React and Next.js. Use when implementing or reviewing code that uses the `swr` package — useSWR hooks, cache keys, revalidation, mutations, pagination, or SWRConfig.

TanStack Query v5 (React Query) async state management for React. Use when implementing or reviewing code that uses `@tanstack/react-query` — query keys, queryOptions, useQuery/useSuspenseQuery, mutations and invalidation, QueryClient defaults, SSR hydration, or infinite queries.

TanStack Router v1 for React — file-based routing, type-safe navigation, validated search params, loaders and router context. Use when working in a project that uses `@tanstack/react-router` — routeTree.gen.ts, createFileRoute, Link/useNavigate, validateSearch, loaderDeps, route masking, or code splitting.

TanStack Start, the full-stack React framework built on TanStack Router with Vite or Rsbuild. Use when setting up or reviewing a `@tanstack/react-start` project — the build-tool plugin, SSR and selective SSR, server functions (`createServerFn`), server routes, middleware, prerendering, SPA mode, environment variables, or deployment targets.

TanStack Store client-state management. Use when implementing or reviewing @tanstack/store or its framework adapters, immutable updates, derived stores, selectors, subscriptions, batching, scoped SSR state, or migrations from legacy Store/Derived/Effect APIs.

Tauri 2 development and validation. Use for src-tauri, Rust/frontend IPC, capabilities and plugins, windows, mobile entry points, packaging, or inspecting a running Tauri app with tauri-agent-kit.

Vite+ projects using vite-plus and the vp CLI. Use when setting up or migrating to Vite+, configuring its checks, tests or library builds, debugging built-in versus script execution, or configuring workspace tasks and caching. Applies to Vite+ integrations, not every standalone Vite project.

Audits and optimizes all web-app assets for performance: images (Sharp AVIF/WebP variants, responsive `img`/`picture`/`srcset`/`sizes`), video (ffmpeg H.264/VP9/AV1 encoding, posters, lazy loading), animated GIF replacement with video or animated WebP/AVIF, web fonts (WOFF2 subsetting, font-display, preload), and SVG (SVGO, sprites, currentColor). Builds a per-asset delivery strategy from importance, viewport placement, and LCP status (fetchpriority, lazy loading, preload, caching, CLS). Use ...

Design, build, port, debug, test, or prepare browser extensions for Chromium, Firefox, and Safari using the WebExtensions model. Use when work involves manifest.json, Manifest V3, extension service workers or background scripts, content scripts, extension messaging, browser permissions, toolbar actions, options pages, sidebars, cross-browser extension compatibility, store-ready packages, Chrome Web Store, Firefox Add-ons, or Safari Web Extensions. Also use when migrating an existing extension...

Zod schema validation. Use when writing or reviewing Zod schemas, parsing untrusted data, handling coercion, refinements, transforms or validation errors, integrating forms or APIs, exporting JSON Schema, or migrating Zod versions.

Investigate bugs, failing tests, crashes, unexpected behavior, and performance regressions through reproducible evidence and hypothesis testing. Use when asked to debug or diagnose; apply and verify a fix only when authorized.

Perform source-only security audits of codebases, APIs, services, and applications. Use for security questions, focused vulnerability reviews, or explicitly requested full audits.

Audit a codebase for dead code and AI slop, clear each suspect against the legitimate reason it exists, and remove only what the evidence carries.

Turn a new request, a Need triage issue, or a Linear project to continue into approved Linear work by finding existing records, choosing the work type and structure, settling open decisions through interview, drafting with strict templates, and publishing in Backlog.

Set up, evolve, and troubleshoot multi-project repositories. Use for workspace structure, cross-package dependencies, task graphs, build caching, affected CI, package contracts, releases, or an explicitly requested monorepo migration. Not for ordinary feature work confined to one project.