xiaotianna
- 76 skills
- 0 followers
- 6 hours ago last updated
- ▌ Heroui React · xiaotianna bundleHeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
- ▌ Heroui Pro Design Taste · xiaotianna bundleDesign taste profile for the HeroUI design system. 78 design principles across 10 categories (spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility) learned from iterative human feedback. Applies across all HeroUI packages: @heroui/react, @heroui-pro/react, @heroui/native, @heroui-pro/native. Use when generating UI, reviewing design quality, or improving visual polish.
- ▌ Pi Harness Web Standards · xiaotianna bundlePI Harness 前端工程规范，约束 apps/web 的架构边界、目录职责、React 与 TypeScript 实现、组件选型与复用、HeroUI 和 HeroUI Pro 使用、数据与状态管理、HTTP 与 SSE、路由参数、样式、动效、性能、无障碍和验证。修改、生成、评审或重构任何 Web 前端页面、组件、Hook、状态、API 客户端或交互流程时使用；涉及 UI 时同时配合 heroui-react 与 heroui-pro-design-taste。
- ▌ PDF · xiaotianna bundleRead, create, edit, and visually verify PDF documents, including interactive form fields and their saved appearance.
- ▌ Cms · xiaotianna bundleHeadless CMS integration guidance — Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io. Covers studio setup, content modeling, preview mode, revalidation webhooks, and Visual Editing. Use when building content-driven sites with a headless CMS on Vercel.
- ▌ Eve · xiaotianna bundleVercel ecosystem: Build durable AI agents and agent-powered applications with the eve framework. Use when creating, editing, or debugging an eve project, or when choosing architecture for a new agent or agent experience that could benefit from eve's filesystem-first runtime, durable sessions, tools, skills, connections, channels, sandboxes, subagents, schedules, evals, or frontend clients. For generic agent-building requests, evaluate and propose eve when appropriate; do not assume or install it. Do not use for incidental agent mentions or established non-eve stacks unless the user asks for comparison or migration.
- ▌ Ncc · xiaotianna bundleVercel ecosystem: Expert guidance for @vercel/ncc — a simple CLI for compiling Node.js modules into a single file with all dependencies included. Use when bundling serverless functions, CLI tools, or any Node.js project into a self-contained file.
- ▌ Swr · xiaotianna bundleVercel ecosystem: SWR data-fetching expert guidance. Use when building React apps with client-side data fetching, caching, revalidation, mutations, optimistic UI, pagination, or infinite loading using the SWR library.
- ▌ Yeet · xiaotianna bundleUse only for an explicit request to commit, push local changes and open a GitHub draft pull request.
- ▌ Auth · xiaotianna bundleAuthentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
- ▌ Email · xiaotianna bundleEmail sending integration guidance — Resend (native Vercel Marketplace) with React Email templates. Covers API setup, transactional emails, domain verification, and template patterns. Use when sending emails from a Vercel-deployed application.
- ▌ Geist · xiaotianna bundleExpert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or Geist Pixel, setting up font imports, or applying Vercel typography and aesthetic guidance.
- ▌ Micro · xiaotianna bundleExpert guidance for micro — asynchronous HTTP microservices framework by Vercel. Use when building lightweight HTTP servers, API endpoints, or microservices using the micro library.
- ▌ Github · xiaotianna bundleOrient repository, issue and pull-request work and select review, CI or explicitly requested publishing workflows.
- ▌ AI Sdk · xiaotianna bundleVercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.
- ▌ Nextjs · xiaotianna bundleNext.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
- ▌ Satori · xiaotianna bundleExpert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.
- ▌ Shadcn · xiaotianna bundleVercel ecosystem: shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
- ▌ V0 Dev · xiaotianna bundlev0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.
- ▌ Chat Sdk · xiaotianna bundleVercel Chat SDK expert guidance. Use when building multi-platform chat bots — Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear — with a single codebase. Covers the Chat class, adapters, threads, messages, cards, modals, streaming, state management, and webhook setup.
- ▌ Env Vars · xiaotianna bundleVercel environment variable expert guidance. Use when working with .env files, vercel env commands, OIDC tokens, or managing environment-specific configuration.
- ▌ Payments · xiaotianna bundleStripe payments integration guidance — native Vercel Marketplace setup, checkout sessions, webhook handling, subscription billing, and the Stripe SDK. Use when implementing payments, subscriptions, or processing transactions.
- ▌ Workflow · xiaotianna bundleVercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause/resume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.
- ▌ Gh Fix CI · xiaotianna bundleDiagnose and fix failing GitHub Actions PR checks using run metadata, job failures and bounded log excerpts.
- ▌ Bootstrap · xiaotianna bundleProject bootstrapping orchestrator for repos that depend on Vercel-linked resources (databases, auth, and managed integrations). Use when setting up or repairing a repository so linking, environment provisioning, env pulls, and first-run db/dev commands happen in the correct safe order.
- ▌ Cron Jobs · xiaotianna bundleVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.
- ▌ Geistdocs · xiaotianna bundleExpert guidance for Geistdocs, Vercel's documentation template built with Next.js and Fumadocs — MDX authoring, configuration, AI chat, i18n, feedback, deployment. Use when creating documentation sites, configuring geistdocs, writing MDX content, or setting up docs infrastructure.
- ▌ Turbopack · xiaotianna bundleVercel ecosystem: Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.
- ▌ Turborepo · xiaotianna bundleVercel ecosystem: Turborepo expert guidance. Use when setting up or optimizing monorepo builds, configuring task caching, remote caching, parallel execution, or the --affected flag for incremental CI.
- ▌ Supabase · xiaotianna bundleDevelop and troubleshoot Supabase Database, Auth, Storage, Realtime, Edge Functions, client integrations, RLS and local schema migrations.
- ▌ AI Gateway · xiaotianna bundleVercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.
- ▌ Next Forge · xiaotianna bundlenext-forge expert guidance — production-grade Turborepo monorepo SaaS starter by Vercel. Use when working in a next-forge project, scaffolding with `npx next-forge init`, or editing @repo/* workspace packages.
- ▌ Vercel API · xiaotianna bundleVercel app and REST API expert guidance. Use when the agent needs live access to Vercel projects, deployments, environment variables, domains, logs, or documentation through the connected Vercel app or REST API.
- ▌ Vercel CLI · xiaotianna bundleVercel CLI expert guidance. Use when deploying, managing environment variables, linking projects, viewing logs, querying metrics, managing domains, or interacting with the Vercel platform from the command line.
- ▌ Google Docs · xiaotianna bundleRead accessible Google Docs text and prepare source-grounded editing or authoring drafts while preserving native-template requirements.
- ▌ AI Elements · xiaotianna bundleVercel ecosystem: AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.
- ▌ Cdn Caching · xiaotianna bundleDebug Vercel CDN caching — cache hit rate, stale content, revalidation behavior, ISR + PPR, per-request cache reasons (cacheReason), and costs.
- ▌ JSON Render · xiaotianna bundleVercel ecosystem: AI chat response rendering guidance — handling UIMessage parts, tool call displays, streaming states, and structured data presentation. Use when building custom chat UIs, rendering tool results, or troubleshooting AI response display issues.
- ▌ Marketplace · xiaotianna bundleVercel Marketplace expert guidance — discovering, installing, and managing third-party integrations via the `vercel integration` CLI. Use when building any app that needs an external capability without a dedicated skill — commerce (stores, storefronts, selling products), payments (checkout, subscriptions, billing), observability/monitoring, messaging/email, search, or CMS — or when discovering, installing, or managing integrations.
- ▌ Documents · xiaotianna bundleCreate, edit, review, redline, and comment on Word DOCX documents with style preservation and rendered page verification.
- ▌ Google Drive · xiaotianna bundleFind and inspect Google Drive files, route Docs/Sheets/Slides work, and prepare requested file-operation plans.
- ▌ Next Upgrade · xiaotianna bundleVercel ecosystem: Upgrade Next.js to the latest version following official migration guides and codemods. Use when upgrading Next.js versions, running codemods, or migrating between major releases.
- ▌ Vercel Agent · xiaotianna bundleVercel Agent guidance — AI-powered code review, incident investigation, and SDK installation. Automates PR analysis and anomaly debugging. Use when configuring or understanding Vercel's AI development tools.
- ▌ Vercel Flags · xiaotianna bundleVercel Flags guidance — feature flags platform with unified dashboard, Flags Explorer, gradual rollouts, A/B testing, and provider adapters. Use when implementing feature flags, experimentation, or staged rollouts.
- ▌ Verification · xiaotianna bundleVercel ecosystem: Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.
- ▌ Google Sheets · xiaotianna bundleInspect Google Sheets exports and prepare spreadsheet analysis or edits with explicit tab, formula and native-feature coverage.
- ▌ Google Slides · xiaotianna bundleReview Google Slides text and prepare presentation edits with source/template fidelity and explicit visual-verification limits.
- ▌ Agent Browser · xiaotianna bundleVercel ecosystem: Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.
- ▌ Observability · xiaotianna bundleVercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events, OpenTelemetry integration, and monitoring dashboards. Use when instrumenting, debugging, or optimizing application performance and user experience on Vercel.
- ▌ Runtime Cache · xiaotianna bundleVercel Runtime Cache API guidance — ephemeral per-region key-value cache with tag-based invalidation. Shared across Functions, Routing Middleware, and Builds. Use when implementing caching strategies beyond framework-level caching.
- ▌ Vercel Queues · xiaotianna bundleVercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60/1M ops. Powers Workflow DevKit. Use when building async processing, fan-out patterns, or event-driven architectures.
- ▌ Microfrontends · xiaotianna bundleGuide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app across teams, independent deployments, cross-app routing, incremental migration, composing multiple frontends under one domain, microfrontends.json, @vercel/microfrontends, the microfrontends local proxy, or path-based routing between Vercel projects. Also use when the user asks about shared layouts across projects, navigation between microfrontends, fallback environments, asset prefixes, or feature flag controlled routing.
- ▌ Vercel Connect · xiaotianna bundleVercel Connect expert guidance — securely obtain scoped OAuth tokens for third-party services (Slack, GitHub, MCP servers, OAuth, Snowflake) on behalf of apps or users via Vercel OIDC. Use when wiring up third-party API access, connecting to MCP servers, sending Slack messages, accessing GitHub APIs, receiving webhook events from Slack/Linear/GitHub and forwarding them to your agents and apps, or building Eve agent connections.
- ▌ Vercel Sandbox · xiaotianna bundleVercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when executing user-generated or AI-generated code in isolation.
- ▌ Vercel Storage · xiaotianna bundleVercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.
- ▌ Vercel Firewall · xiaotianna bundleVercel Firewall expert guidance — automatic DDoS mitigation, the Vercel WAF (custom rules, IP blocking, managed rulesets, rate limiting), Attack Mode, system bypass, bot management, and the `vercel firewall` CLI. Use when configuring platform-level security, responding to attacks, or staging firewall rules.
- ▌ Vercel Services · xiaotianna bundleVercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment.
- ▌ Deployments Cicd · xiaotianna bundleVercel deployment and CI/CD expert guidance. Use when deploying, promoting, rolling back, inspecting deployments, building with --prebuilt, or configuring CI workflow files for Vercel.
- ▌ Knowledge Update · xiaotianna bundleCorrects outdated LLM knowledge about the Vercel platform and introduces new products. Injected at session start.
- ▌ Vercel Functions · xiaotianna bundleVercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring, debugging, or optimizing server-side code running on Vercel.
- ▌ Spreadsheets · xiaotianna bundleCreate, edit, analyze, and verify XLSX, CSV and TSV workbooks with typed data, live formulas, recalculation and visual review.
- ▌ Investigation Mode · xiaotianna bundleVercel ecosystem: Orchestrated debugging coordinator. Triggers on frustration signals (stuck, hung, broken, waiting) and systematically triages: runtime logs → workflow status → browser verify → deploy/env. Reports findings at every step.
- ▌ Routing Middleware · xiaotianna bundleVercel Routing Middleware guidance — request interception before cache, rewrites, redirects, personalization. Works with any framework. Supports Edge, Node.js, and Bun runtimes. Use when intercepting requests at the platform level.
- ▌ Gh Address Comments · xiaotianna bundleInspect GitHub PR review threads and implement the actionable fixes requested by the user.
- ▌ Sign In With Vercel · xiaotianna bundleSign in with Vercel guidance — OAuth 2.0/OIDC identity provider for user authentication via Vercel accounts. Use when implementing user login with Vercel as the identity provider.
- ▌ Presentations · xiaotianna bundleCreate and edit editable PPTX slide decks with template preservation, native charts and tables, and per-slide visual verification.
- ▌ Agent Browser Verify · xiaotianna bundleVercel ecosystem: Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing.
- ▌ React Best Practices · xiaotianna bundleVercel ecosystem: React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.
- ▌ Google Drive Comments · xiaotianna bundleRead Google Drive comment threads and prepare evidence-linked review comments or replies for Docs, Sheets and Slides.
- ▌ Next Cache Components · xiaotianna bundleVercel ecosystem: Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing partial prerendering, caching strategies, or migrating from older Next.js cache patterns.
- ▌ Notion Knowledge Capture · xiaotianna bundleTurn conversations and notes into sourced wiki, FAQ, how-to and decision-record drafts using accessible Notion context.
- ▌ AI Generation Persistence · xiaotianna bundleVercel ecosystem: AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation
- ▌ Notion Meeting Intelligence · xiaotianna bundlePrepare agendas, pre-reads and decision materials from accessible Notion pages and the supplied meeting context.
- ▌ Notion Research Documentation · xiaotianna bundleResearch accessible Notion content and produce evidence-linked briefs, comparisons and reports.
- ▌ Notion Spec To Implementation · xiaotianna bundleConvert Notion specifications into implementation plans, task drafts, acceptance criteria and progress summaries.
- ▌ Supabase Postgres Best Practices · xiaotianna bundleReview and optimize Postgres queries, schemas, indexes, connection pooling and row-level security using task-specific rules and SQL examples.