basilic

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

Build and distribute Expo development clients locally or via TestFlight

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Guidelines for upgrading Expo SDK versions and fixing dependency issues

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

Next.js v16 best practices - proxy.ts, file conventions, RSC boundaries, Cache Components, async APIs, route handlers, image/font optimization

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.

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 conflicts, Next.js "use client".

Utility hooks for React state management - grouped state and localStorage persistence. Use when: managing grouped state that changes together, persisting state to localStorage, or coordinating state between URL and storage.

TanStack Query (React Query) for async operations, data fetching, caching, and state management. Use when: fetching server data, managing async operations, caching responses, handling mutations, or any operation that benefits from automatic state management and caching.

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 improvements.

Drizzle ORM for TypeScript - type-safe SQL queries, schema definitions, migrations, and relations. Use when: building database layers in TypeScript applications.

Build backend AI with Vercel AI SDK v5/v6. Agent abstraction, tool approval, error solutions. Use when: implementing AI SDK v5/v6 or troubleshooting AI errors.

Build React chat interfaces with Vercel AI SDK v5/v6. Agent integration, tool approval, auto-submit. Use when: implementing AI SDK v5/v6 chat UIs or troubleshooting "useChat failed to parse stream", "useChat no response", or "stale body values" errors.

TypeBox schemas with Fastify routes for type-safe API development. Native JSON Schema, automatic OpenAPI generation. Use when: building Fastify REST APIs with schema validation and OpenAPI generation.

Generate TypeScript clients from OpenAPI specs using @hey-api/openapi-ts. Type-safe API clients with Zod schemas. Use when: generating TypeScript clients from OpenAPI specifications for frontend or API consumers.

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Includes component composition patterns, accessibility guidelines, and React Hook Form integration. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui dark mode, composing/extending components, implementing forms, ensuring accessibility, or fixing colors not working, theme not applying, CSS variables broken, tw-animate-css errors, or migrating from v3.

Advanced TypeScript patterns for type-safe, maintainable code using sophisticated type system features. Use when building type-safe APIs, implementing complex domain models, or leveraging TypeScript's advanced type capabilities.