Skill Claude CodeCodex
Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that…
Skill Claude CodeCodex
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
Skill Claude CodeCodex
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Skill Claude CodeCodex
Manage stacked branches and pull requests with the gh-stack GitHub CLI extension. Use when the user wants to create, push, rebase, sync, navigate, or view stacks of dependent PRs. Triggers on tasks involving stacked diffs, dependent pull requests, branch chains, or incremental code review workflows.
Skill Claude CodeCodex
Use when building Hono web applications or when the user asks about Hono APIs, routing, middleware, JSX, validation, testing, or streaming. TRIGGER when code imports from 'hono' or 'hono/', or user mentions Hono. Use npx hono request to test endpoints.
Skill Claude CodeCodex
Implement a piece of work based on a spec or set of tickets.
Skill Claude CodeCodex
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Skill Claude CodeCodex
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter.…
Skill Claude CodeCodex
Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/). Triggers: shadcn CLI, copy-paste components, Field.Root, composeRenderProps, /components/ui/, React Aria Components + Tailwind CSS 4.1 + CVA. Covers…
Plugin Claude Code
Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind…
Skill Claude CodeCodex
Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind…
Skill Claude CodeCodex
NestJS best practices for building production-ready REST APIs, GraphQL APIs, and microservices with TypeScript. Use when writing, reviewing, or refactoring NestJS code: controllers, modules, providers, dependency injection, guards, interceptors, pipes, exception filters, middlewares, custom decorators, DTOs…
Skill Claude CodeCodex
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling.
Skill Claude CodeCodex
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
Skill Claude CodeCodex
Optimize a Next.js app that has cacheComponents: true — either the static shell on first paint, or the in-app navigation between routes. Picks the matching diagnostic loop and runs it.
Skill Claude CodeCodex
Upgrade Next.js to the latest version following official migration guides and codemods.
Skill Claude CodeCodex
Nginx web server and reverse proxy expert: configuration, reverse proxying, load balancing, SSL/TLS termination, rate limiting, caching, gzip compression, WebSocket proxying, and security hardening. Use for nginx.conf creation/review, performance tuning, HTTPS setup, upstream configuration, and troubleshooting.
Skill Claude CodeCodex
Implement, review, debug, or test type-safe URL query state with nuqs 2.x. Use when selecting a NuqsAdapter, choosing parsers and useQueryState/useQueryStates, defining URL update semantics, sharing state with server loaders or caches, serializing links, or testing query state in Next.js, React, Remix, React Router…
Skill Claude CodeCodex
Implement internationalization (i18n) with Paraglide JS — a compiler-based i18n library that compiles translation files into tree-shakable JavaScript functions. Use when working with Paraglide JS, @inlang/paraglide-js, or any i18n task involving compiled message functions, locale strategies, i18n routing, or…
Skill Claude CodeCodex
Write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with Playwright test files, configuring playwright.config.ts, writing browser automation, debugging flaky E2E tests, setting up authentication for tests, API mocking/interception, visual regression testing, accessibility…
Skill Claude CodeCodex
Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml, or managing dependencies with catalogs, patches, overrides, config dependencies, or the global virtual store.
Skill Claude CodeCodex
Prisma ORM — type-safe database toolkit for TypeScript/Node.js. Schema-first approach with Prisma Schema Language, auto-generated type-safe client, migrations via Prisma Migrate. Use when defining database models in schema.prisma, writing CRUD queries with Prisma Client, setting up relations (1-1, 1-n, m-n), running…
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Skill Claude CodeCodex
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and…