jerelvelarde

Pins and manages per-project Flutter SDK versions with FVM (Flutter Version Management). Use when the project has or needs a .fvmrc or .fvm/ directory, when contributors need a reproducible Flutter SDK, when installing FVM, pinning or switching the Flutter version, wiring FVM into VS Code or Android Studio, configuring CI to honor .fvmrc, or troubleshooting "wrong Flutter version" symptoms.

End-to-end review pipeline — creates a handoff, generates a review (self-review or paste-ready for another provider), then offers to fix findings. Use when you want to review your changes before pushing.

Build a competitive positioning matrix and strategy canvas when the user asks to analyze competitors, compare products, or assess competitive landscape

Audit project dependencies for risk when the user asks to check dependencies, audit packages, review dependency health, check for vulnerabilities, or assess supply chain risk

Analyze product metrics and identify trends when the user asks to review metrics, analyze KPIs, or assess product health

Audit a feature for WCAG 2.1 AA compliance using POUR principles when the user asks to check accessibility, audit a11y, or verify WCAG compliance

Audit existing API endpoints for consistency when the user asks to check API quality, review API patterns, audit endpoints, or find API inconsistencies

Audit performance against Core Web Vitals and performance budgets when the user asks to check performance, audit speed, or analyze web vitals

Ant Design by Ant Group provides 60+ React components optimized for enterprise dashboards, admin panels, and data-heavy applications. Use when building internal tools, CRM interfaces, analytics dashboards, or apps needing form/table excellence and pro components. Four design values: Natural, Certain, Meaningful, Growing.

Build collaborative team interfaces with Atlassian Design System—a React-based system used in Jira, Confluence, and Trello with design tokens, dynamic tables, flags, inline editing, and emphasis on team workflows. Trigger this skill when designing project management tools, team collaboration UIs, issue tracking systems, or workflow-heavy applications.

Atmospheric gradient mesh inspired by northern lights. Use this for premium SaaS products, developer platforms, and luxury brands—creates an ethereal, modern, high-end aesthetic with subtle motion and glassmorphism overlays.

IBM Carbon provides 30+ accessible, token-based components across React, Svelte, Angular, and Web Components. Use for enterprise B2B apps, data visualization dashboards, internal tools needing WCAG AA minimum compliance (often exceeds to AAA), and products requiring multiple theme support (White, Gray 10/90/100).

Soft, playful 3D clay-like design with rounded shapes and pastel colors. Use this when targeting young audiences, playful brands, or apps that want to feel friendly and approachable—perfect for kids' apps, design tools, wellness apps, and creative platforms.

Content-first design with zero ornament. Clean typography, generous whitespace, and purposeful color. Use this for professional products, documentation, corporate sites, and premium brands that prioritize clarity and trust—think Apple, Stripe, high-end SaaS.

Microsoft Fluent 2 emphasizes light, depth, motion, material, and scale across Windows, iOS, Android, and web. Trigger for Microsoft ecosystem apps, Windows UI design, cross-platform products with strong accessibility requirements (WCAG AAA target), and apps needing token-based theming flexibility.

Create stunning frosted glass UI effects with Glassmorphism—a modern design style using backdrop blur, semi-transparent backgrounds, and layered depth. Trigger this skill when designing modern dashboards, premium interfaces, overlay modals, cards on dynamic backgrounds, or contemporary UIs with visual depth.

DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill. Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.

Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent/HttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.

Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit/CopilotKit.

Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.

Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.

Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.

Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills/knowledge this agent has loaded. Triggers on "update copilotkit skills", "update skills", "refresh skills", "skills are stale", "skills are outdated", "get latest skills", "my copilotkit knowledge is wrong", "copilotkit APIs changed", "skills seem old", "wrong API names", "reinstall skills", "skills not working right", "update your copilotkit knowledge".

Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring, provider setup, and first working chat integration.

Patterns for building AI agents that integrate with CopilotKit. Use when designing agent architecture, implementing AG-UI event streaming, managing shared state between agent and UI, adding human-in-the-loop checkpoints, or emitting generative UI from agents. Triggers on agent implementation tasks involving CopilotKit runtime, BuiltInAgent, or AG-UI protocol.

CopilotKit React best practices for agentic applications. Use when writing, reviewing, or refactoring React code that uses CopilotKit hooks (useAgent, useFrontendTool, useRenderTool, useHumanInTheLoop), providers (CopilotKitProvider), or chat UI components (CopilotChat, CopilotSidebar, CopilotPopup). Triggers on tasks involving agent integration, tool rendering, shared state, or generative UI in React.

Server-side runtime patterns for CopilotKit. Use when setting up CopilotKit runtime endpoints (Express, Hono, Next.js), configuring agent runners, adding middleware, or securing the runtime. Triggers on backend tasks involving @copilotkitnext/runtime, agent registration, or API endpoint configuration.

Description of when this skill should be used. Include trigger conditions and relevant hooks, components, or patterns.

Create a comprehensive PRODUCT-PROFILE.md through interactive discovery — defining the problem, user personas, and Jobs To Be Done. This document becomes the single source of truth for all product, design, and engineering decisions.

Rapidly scaffold a working UI prototype for design-first feedback. Produces real, interactive screens you can click through in a browser — not documents or diagrams.

Plan a sprint using Product Thinking, Design Thinking, and Systems Thinking frameworks. Creates structured sprint artifacts in .chalk/sprints/.

Adds a new A2UI component to the CopilotKit A2UI hackathon starter's shared catalog, end-to-end. Coordinates the 3-surface component dance (TypeScript definition + Zod prop schema, React renderer, agent prompt mirror) so components actually render instead of ending up half-finished. Use when the hacker says "add a widget", "add a component", "scaffold a card", "build me a [domain] visual", "build me a metrics card", "add an A2UI widget", "make a new component", or asks for a new generative-UI surface in this repo. Anchors against the live catalog at `src/a2ui/catalog/definitions.ts`. Enforces the AGENTS.md hard rules — never bump @copilotkit/* versions, always run `pnpm validate-widget` after editing widget JSON, always run `pnpm smoke` before declaring done. Don't use for re-theming (Seam

Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via <CopilotKitProvider a2ui={{ theme }}>. Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit/react-core/v2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit/a2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try/finally cleanup. Load when an agent emits A2UI operations (createSurface / updateComponents / updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.

Build a Next.js web app with a CopilotKit chat sidebar wired to THIS Hermes agent over the AG-UI protocol — so the user can chat inside the app and have you (Hermes) modify the app's own source live. Use when the user asks to build a web app and "include yourself", "add a chat/copilot to it", "make it self-modifying", or connect an app to the Hermes AG-UI adapter.

Principles and review checklist for building a great streaming chat experience — scroll behavior, auto-scroll, "jump to latest", follow-the- stream, position preservation, and accessibility for LLM/AI chat UIs. Use when building, reviewing, or debugging the scroll and streaming behavior of a chat transcript: auto-scroll pulling the reader around, content jumping while reading, "stick to bottom" logic, new-turn placement, restoring scroll on reopen, or layout shifts from images/markdown/code. Trigger on "scroll engineering", "auto-scroll", "stick to bottom", "jump to latest", "chat scroll", "streaming chat UX", "follow the stream", "scroll jank".

Turn data, concepts, or processes into a polished standalone visualization — chart, table, diagram, dashboard, KPI scorecard, timeline, or explainer — written as self-contained code, saved locally, and exported to an image at a 16:9 aspect ratio by default (any ratio on request). Use whenever the user wants to visualize, chart, graph, plot, diagram, or "show" numbers / metrics / a report / a comparison / a breakdown / a trend / a timeline / a flow; pastes a report or table and wants it turned into a graphic; or asks for an infographic, dashboard, scorecard, or a shareable picture of data. Also use for "make this a visual", "render this", "turn this into a chart/graph", or "export a diagram". Do NOT use for editing existing raster images (photo retouching), for a plain in-conversation markdown table with no image export, for live embedded app UI components (use a frontend skill), or for full slide decks (use pptx).