fellipeutaka
- 46 skills
- 0 followers
- 3 hours ago last updated
- ▌ AI Sdk · fellipeutaka bundleAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
- ▌ Gh Stack · fellipeutaka bundleManage 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.
- ▌ Playwright · fellipeutaka bundleWrite, 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 testing, or CI/CD integration for browser tests. Triggers: Playwright, E2E test, end-to-end, browser test, @playwright/test, playwright.config, page object model, test fixture, visual snapshot, trace viewer.
- ▌ Next Cache Components Adoption · fellipeutaka bundleTurn 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 decide between opting routes out with `export const instant = false` and fixing them in place.
- ▌ Next Cache Components Optimizer · fellipeutaka bundleOptimize 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.
- ▌ React Best Practices · fellipeutaka bundleReact 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 improvements.
- ▌ Kanpeki · fellipeutaka bundleUse 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 installation, component patterns, forms (React Hook Form, TanStack Form), theming, and dark mode.
- ▌ Bun · fellipeutaka bundleBun runtime, package manager, bundler, and test runner. Use when running scripts with bun, managing packages, serving HTTP with Bun.serve, querying databases with Bun.sql/bun:sqlite/Bun.redis, shell scripting with $, using S3/file I/O, writing tests with bun:test, bundling or compiling to executable, or using any Bun-specific API (spawn, glob, semver, FFI, workers, plugins, HTMLRewriter).
- ▌ Motion · fellipeutaka bundleBuild 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 conflicts, Next.js "use client".
- ▌ Turborepo · fellipeutaka bundleTurborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
- ▌ React Aria · fellipeutaka bundleBuild accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.
- ▌ Tanstack Form · fellipeutaka bundleTanStack Form best practices for type-safe form management, validation, field composition, and submission handling in React. Use when building forms with complex validation, integrating schema libraries (Zod/Valibot/ArkType), composing reusable form components, managing array/dynamic fields, or integrating with meta-frameworks (TanStack Start, Next.js, Remix).
- ▌ Tanstack Query · fellipeutaka bundleTanStack Query (React Query) v5 best practices for data fetching, caching, mutations, and server state management. Use when building data-driven React applications, setting up query configurations, implementing mutations/optimistic updates, configuring caching strategies, integrating with SSR, or fixing v4→v5 migration errors.
- ▌ Tanstack Start · fellipeutaka bundleTanStack Start full-stack React framework best practices for server functions, middleware, SSR/streaming, SEO, authentication, and deployment. Use when building full-stack React apps with TanStack Start, implementing server functions, configuring SSR/streaming, managing SEO and head tags, setting up authentication patterns, or deploying to Vercel/Cloudflare/Node.
- ▌ Tanstack Table · fellipeutaka bundleTanStack Table best practices for building headless, type-safe data tables in React with sorting, filtering, pagination, row selection, and column management. Use when building data grids, implementing client-side or server-side table features, defining column structures, managing table state, or optimizing table rendering performance.
- ▌ Tanstack Router · fellipeutaka bundleTanStack Router best practices for type-safe routing, file-based routing, data loading, search params, and navigation in React. Use when building React SPAs with complex routing, implementing type-safe search params, setting up route loaders, integrating with TanStack Query, or configuring code splitting and preloading.
- ▌ React Hook Form Zod · fellipeutaka bundleBuild type-safe validated forms using React Hook Form v7 and Zod v4. Single schema works on client and server with full TypeScript inference via z.infer. Use when building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues, performance problems with large forms.
- ▌ Zod · fellipeutaka bundleZod 4 — TypeScript-first schema validation with static type inference. Use when writing Zod schemas, validating data, defining types with Zod, parsing input, creating form validation schemas, defining API request/response schemas, working with z.object, z.string, z.number, z.enum, z.array, z.union, z.discriminatedUnion, z.file, z.jwt, z.email, z.uuid, z.url, z.codec, z.toJSONSchema, z.fromJSONSchema, z.int, z.stringbool, z.templateLiteral, z.record, z.partialRecord, or any other Zod API. Also use when migrating from Zod 3 to Zod 4, or when the user's package.json shows zod@^4. CRITICAL: Always use Zod 4 APIs. Never use deprecated Zod 3 patterns unless user explicitly requests Zod 3 compatibility.
- ▌ Solid · fellipeutaka bundleApply SOLID principles to write flexible, maintainable, and testable code. Use when designing classes, interfaces, and module boundaries. Covers Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion with practical TypeScript examples and detection heuristics.
- ▌ Clean Code · fellipeutaka bundleWrite clean, readable, and maintainable code following principles from Robert C. Martin's "Clean Code" and Object Calisthenics. Use when writing, reviewing, or refactoring code to improve naming, function design, formatting, error handling, and class structure. Includes code smell detection and refactoring guidance.
- ▌ Skill Creator · fellipeutaka bundleGuide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
- ▌ Tanstack Pacer · fellipeutaka bundleTanStack Pacer best practices for execution control in React — debouncing, throttling, rate limiting, queuing, and batching. Use when implementing search inputs, scroll handlers, API rate limits, task queues, bulk operations, or any scenario requiring controlled execution timing with reactive state.
- ▌ Design Patterns · fellipeutaka bundleApply Gang of Four design patterns to solve architectural problems in TypeScript. Use when refactoring code architecture, implementing extensible systems, decoupling components, or following SOLID principles. Covers all 22 GoF patterns: Creational (Factory Method, Abstract Factory, Builder, Prototype, Singleton), Structural (Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Proxy), and Behavioral (Chain of Responsibility, Command, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method, Visitor).
- ▌ Tanstack Hotkeys · fellipeutaka bundleGuide for implementing keyboard shortcuts in React using @tanstack/react-hotkeys. Use when building hotkey/shortcut features, registering keyboard shortcuts, handling key sequences, recording custom shortcuts, tracking held keys, or formatting hotkeys for display in React applications.
- ▌ Tanstack Virtual · fellipeutaka bundleTanStack Virtual headless virtualization for React. Use when rendering large lists (100+ items), implementing virtual scroll, building infinite scroll feeds, virtualizing grids or tables, using window-level scrolling, or implementing masonry/lane layouts with @tanstack/react-virtual. Triggers on: useVirtualizer, useWindowVirtualizer, virtual list, virtual scroll, list virtualization.
- ▌ Nuqs · fellipeutaka bundleImplement, 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, or TanStack Router.
- ▌ Rust Expert · fellipeutaka bundleSenior Rust engineer specialized in building memory-safe, high-performance systems and backend applications. Use this skill when writing core Rust logic, designing trait hierarchies, working with the borrow checker (lifetimes, ownership), implementing async/await with Tokio, optimizing performance, or applying modern Rust idioms and best practices.
- ▌ Denji · fellipeutaka bundleManage SVG icons as framework components using Denji CLI. Use when the user needs to add, remove, list, export, import, or manage SVG icons in React, Preact, Solid, Qwik, Vue, or Svelte projects. Triggers include requests to "add an icon", "set up icons", "manage SVG icons", "remove an icon", "list icons", "export icons", "import icons", "dry-run icon add", or any task involving Iconify icons as framework components.
- ▌ Nginx · fellipeutaka bundleNginx 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.
- ▌ Tauri · fellipeutaka bundleTauri v2 development: build cross-platform desktop/mobile apps with Rust backends and web frontends. Use when configuring tauri.conf.json, implementing Rust commands (#[tauri::command]), setting up IPC patterns (invoke, emit, channels), managing state, configuring permissions/capabilities, troubleshooting build issues, or deploying. Triggers on Tauri, src-tauri, tauri.conf.json, capabilities.
- ▌ Elysiajs · fellipeutaka bundleCreate backend with ElysiaJS, a type-safe, high-performance framework.
- ▌ Nestjs · fellipeutaka bundleNestJS 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, validation, authentication, authorization, JWT, configuration, testing, database (TypeORM/Prisma), caching, queues (BullMQ), OpenAPI/Swagger, WebSockets, GraphQL (resolvers, mutations, subscriptions, ObjectType, InputType, ArgsType, code-first, schema-first, PubSub), Helmet, CORS, CSRF, lifecycle hooks, graceful shutdown, and feature module architecture. Also use when working with @nestjs/jwt, @nestjs/throttler, @nestjs/terminus, @nestjs/config, @nestjs/swagger, @nestjs/typeorm, @nestjs/mongoose, @nestjs/graphql, @nestjs/apollo, @apollo/server, bullmq, class-validator, graphql, or graphql-ws.
- ▌ Prisma · fellipeutaka bundlePrisma 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 migrations (prisma migrate dev/deploy), configuring prisma.config.ts, using raw SQL/TypedSQL, creating client extensions, or working with PostgreSQL, MySQL, SQLite, SQL Server, MongoDB, CockroachDB.
- ▌ Zustand · fellipeutaka bundleImplement global state management for React/TypeScript applications. Use when creating, modifying, or debugging Zustand stores, implementing state management patterns (slices, persist, devtools, immer), setting up Zustand with Next.js/SSR, writing tests for Zustand stores, or working with TypeScript typing for Zustand (curried create, StateCreator, middleware mutators).
- ▌ Ask Matt · fellipeutaka bundleAsk which skill or flow fits your situation. A router over the skills in this repo.
- ▌
- ▌ To Tickets · fellipeutaka bundleBreak a plan, spec, or the current conversation into a set of tracer-bullet tickets, each declaring its blocking edges, published to the configured tracker — edges as text in one file per ticket locally, or native blocking links on a real tracker.
- ▌ Better Auth · fellipeutaka bundleBetter Auth — framework-agnostic TypeScript authentication & authorization library. Covers setup, email/password, social OAuth (40+ providers), passkeys, magic links, 2FA, organizations, sessions, plugins, admin, hooks, and security hardening. Use when implementing auth with Better Auth: configuring auth instances, adding providers, setting up database adapters (Prisma, Drizzle, PostgreSQL, MySQL, SQLite, MongoDB), integrating with frameworks (Next.js, Nuxt, SvelteKit, Astro, Hono, Express, Elysia, Fastify, Expo), managing sessions, or extending with plugins.
- ▌ Drizzle Orm · fellipeutaka bundleDrizzle ORM — type-safe, lightweight TypeScript ORM for SQL databases. Schema declaration, CRUD queries, joins, relations, migrations with Drizzle Kit, and database seeding. Use when defining database schemas, writing queries (select/insert/update/delete), setting up migrations, configuring drizzle.config.ts, establishing database connections, validating data with drizzle-zod/valibot, or working with PostgreSQL, MySQL, SQLite, Turso, Bun SQL, Neon, Supabase, PGlite, Expo SQLite, Cloudflare D1, PlanetScale, SingleStore, MSSQL, CockroachDB.
- ▌ Tanstack AI · fellipeutaka bundleBuild AI-powered chat applications with TanStack AI and React. Use when working with @tanstack/ai, @tanstack/ai-react, @tanstack/ai-client, or any TanStack AI packages. Covers useChat hook, streaming, tools (server/client/hybrid), tool approval, structured outputs, multimodal content, adapters (OpenAI, Anthropic, Gemini, Ollama, Grok), agentic cycles, devtools, and type safety patterns. Triggers on AI chat UI, function calling, LLM integration, or streaming response tasks using TanStack AI.
- ▌ Tanstack DB · fellipeutaka bundleComprehensive React-focused guide for TanStack DB and community integrations (Dexie.js, PGLite). Use when writing or debugging code that uses @tanstack/react-db for live queries, optimistic mutations, or local-first synchronization.
- ▌ Paraglide JS · fellipeutaka bundleImplement 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 multilingual rendering. Covers setup, message compilation, locale detection strategies, URL-based i18n routing, SSR/SSG middleware, variants (pluralization/gendering), formatting, markup, and integration with any framework (React, Vue, Svelte, Solid, Next.js, SvelteKit, Astro, etc.).
- ▌ AI Repo Setup · fellipeutaka bundleSet up and optimize repositories for AI coding agents. Creates minimal AGENTS.md, CLAUDE.md symlink, docs/REQUIREMENTS.md, docs/BUSINESS-RULES.md, feedback loops, and deterministic enforcement (Claude Code hooks, OpenCode plugins). Use when user wants to make a repo AI-friendly, set up AGENTS.md/CLAUDE.md, document requirements/business rules for AI, add pre-commit hooks for AI workflows, or optimize codebase structure for coding agents.
- ▌ Figma Raw Geometry · fellipeutaka bundleRaw Figma node geometry for Figma-to-code work. Use when exact local bounds, page-space bounds, transforms, rotation, visibility, or effective layer opacity are required; when reconstructing Smart Animate across component variants; or when Figma MCP output is unavailable, incomplete, or too large.
- ▌ Creating A Changeset · fellipeutaka bundleCreate and validate Changeset files for user-facing changes in repositories that use Changesets. Use when a feature, bug fix, breaking change, performance improvement, or user-facing documentation change needs a release note and semver bump.
- ▌ Tanstack React Store · fellipeutaka bundleImplement global state management in React apps using TanStack Store (@tanstack/react-store). Use when creating stores, derived state, subscriptions, batched updates, or integrating TanStack Store with React components via the useStore hook. Covers createStore, useStore, shallow comparison, batch, derived stores, atoms, and async atoms.