Firzus

@firzus source repo

32 skills
0 followers
6 hours ago last updated

▌
Swr · firzus bundle
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.

0
installs
▌
Tauri · firzus bundle
Tauri v2+ Rust-backed desktop/mobile apps. Use when working in src-tauri, tauri.conf.json, commands/IPC, capabilities, plugins, WebviewWindow, updater/sidecars, mobile entry points, or evidence-first desktop debugging.

0
installs
▌
Unity · firzus bundle
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, or when the user mentions Unity, UI Toolkit, UGUI, Addressables, URP, HDRP, DOTS, ECS, netcode, custom inspector, SerializeReference, CoreCLR, IL2CPP, Unity CLI, Unity MCP, or Unity build and performance questions.

0
installs
▌
Astryx · firzus bundle
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, npx astryx, xstyle, defineTheme, or wants to set up, build UI with, theme, review, or migrate to the Astryx design system.

0
installs
▌
Nextjs · firzus bundle
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, or view transitions.

0
installs
▌
Adsense · firzus bundle
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.

0
installs
▌
Shaders · firzus bundle
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 / cursor-trail" hero, mentions shaders.com, the `shaders/react` package, the `<Shader>` component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.

0
installs
▌
Greyboxing · firzus bundle
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.

0
installs
▌
Payload Cms · firzus bundle
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.

0
installs
▌
Real Content · firzus
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.

0
installs
▌
Design System · firzus bundle
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.

0
installs
▌
Extract Theme · firzus bundle
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 v4 theme from <url>", or mentions extract-theme / theme extraction / design tokens from a URL.

0
installs
▌
Figma To Code · firzus bundle
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", "make it match the Figma", or mentions figma-to-code.

0
installs
▌
Web Extension · firzus bundle
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 between browsers.

0
installs
▌
Canvas · firzus bundle
Renders a standalone analytical artifact — architecture review, audit, quantitative analysis, data-heavy report, comparison, timeline, progress dashboard — as a single self-contained HTML file opened beside the chat. Works in any environment (Codex, Claude Code, Cursor, generic agents). Use when the structured output IS the deliverable and benefits from visual layout, and whenever updating an existing canvas file.

0
installs
▌
Skills · firzus
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.

0
installs
▌
Tanstack Query · firzus bundle
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.

0
installs
▌
Tanstack Start · firzus bundle
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.

0
installs
▌
Figma To Unity · firzus bundle
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 UXML/USS", or mentions figma-to-unity.

0
installs
▌
Magica Cloth 2 · firzus bundle
Author and tune cloth physics with Magica Cloth 2 in Unity, code-first via the Unity MCP (Unity_RunCommand) — BoneCloth / MeshCloth / BoneSpring setup, capsule/ sphere/plane colliders, constraint parameters, runtime build, and in-editor visual testing. Use when adding or fixing cloth/jiggle on a character (skirt, hair, cape, tail, chest, accessories), when cloth clips through the body, jitters, feels too stiff/floppy, penetrates on fast motion, or when the user mentions Magica Cloth, MagicaCloth, cloth simulation, or dynamic bones in a Unity project.

0
installs
▌
Frontend Design · firzus
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.

0
installs
▌
Tanstack Router · firzus bundle
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.

0
installs
▌
Imagegen · firzus bundle
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.

0
installs
▌
Slop Audit · firzus bundle
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.

0
installs
▌
Setup Codex · firzus bundle
Install the Codex operating policy and settings into a Codex home directory.

0
installs
▌
Gamification · firzus bundle
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.

0
installs
▌
Setup Project · firzus bundle
Configure a project's AGENTS.md and install the skills it needs. Run once when starting work in a new repository.

0
installs
▌
Dokploy Best Practices · firzus bundle
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.

0
installs
▌
Chrome Devtools · firzus bundle
Drive a live Chrome browser through the chrome-devtools-mcp server. Use to debug or automate a web page in a real browser, measure Core Web Vitals, attach to a running Chrome, or debug a Tauri app's WebView2 on Windows.

0
installs
▌
Web Assets Optimization · firzus bundle
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 when auditing asset weight, fixing LCP/CLS, compressing video, replacing GIFs, subsetting fonts, or adapting asset markup for Next.js, React, Vite, Astro, SvelteKit, or Nuxt.

0
installs
▌
Vite Plus Best Practices · firzus bundle
Vite+ (vp) unified toolchain: unified config, built-in ≠ script, vp check, pack vs build, and migrate. Covers setup (vp install, env, managed runtime), the vp command surface (dev, build, check, test, run, pack, node), vite.config.ts blocks (including check), monorepo overrides, task caching, commit hooks, library packaging, and migrating Vite/Vitest/ESLint/Prettier projects. Use when the user mentions Vite+, vite-plus, the `vp` or `vpx` CLI, Oxlint/Oxfmt in a Vite context, tsdown, Vite Task, or asks to set up, configure, migrate, scaffold, review, or upgrade a Vite+ project.

0
installs
▌
Improve Architecture · firzus
Scan a codebase for deepening opportunities, present them on a live canvas, then delegate each approved refactor to a bounded sub-agent while the canvas tracks progress.

0
installs

32 published skills