building-ai-chat
ancolemanBuilds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI products with accessibility and performance built in.
home-assistant-manager
komal-SkyNETExpert-level Home Assistant configuration management with efficient deployment workflows (git and rapid scp iteration), remote CLI access via SSH and hass-cli, automation verification protocols, log analysis, reload vs restart optimization, and comprehensive Lovelace dashboard management for tablet-optimized UIs. Includes template patterns, card types, debugging strategies, and real-world examples.
product-copy-assistant
portabletextWrite clear, concise, accessible product copy for interfaces, docs, and system messages. Use when engineers or designers need help with UI copy, error messages, tooltips, onboarding flows, empty states, confirmation dialogs, success/warning messages, or any user-facing text. Triggers on requests like "write copy for," "help me phrase," "error message for," "what should this button say," or reviews of existing product copy.
building-streamlit-chat-ui
streamlitBuilding chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chat_message, st.chat_input, message history, and streaming responses.
llm-streaming-response-handler
curiositechBuild production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI/Anthropic/Claude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on "LLM streaming", "SSE", "token stream", "chat UI", "real-time AI". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.
thread-list
ThinkEx-OSSGuide for multi-thread management in assistant-ui. Use when implementing thread lists, switching threads, or managing conversation history.
primitives
ThinkEx-OSSGuide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive. Use when customizing chat UI components.
update
ThinkEx-OSSUpdate assistant-ui and AI SDK to latest versions. Detects current versions, identifies breaking changes, and executes migrations.
setup
ThinkEx-OSSSetup and configure assistant-ui in a project. Use when installing packages, configuring runtimes, or troubleshooting setup issues.
assistant-ui
ThinkEx-OSSGuide for assistant-ui library - AI chat UI components. Use when asking about architecture, debugging, or understanding the codebase.
tools
ThinkEx-OSSGuide for tool registration and tool UI in assistant-ui. Use when implementing LLM tools, tool call rendering, or human-in-the-loop patterns.
runtime
ThinkEx-OSSGuide for assistant-ui runtime system and state management. Use when working with runtimes, accessing state, or managing thread/message data.
foundry-nextgen-frontend
hainamchungBuild elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm + Framer Motion. Use when creating dashboards, agent builders, data grids, entity management interfaces, or any application matching Foundry's refined dark-themed aesthetic.
ui-design-system
hainamchungUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating collaboration between design and development.
react-flow-node
hainamchungCreate React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
aesthetic
hainamchungCreate aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Integrate localized specialized skills (Chrome DevTools, ImageMagick) with built-in vision intelligence to achieve premium aesthetic standards.
senior-frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
ui-ux-pro-max
hainamchungUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: Component search and examples.
ui-styling
hainamchungCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
ai-sdk-ui
ovachieverBuild React chat interfaces with Vercel AI SDK v5/v6. Covers v6 beta (agent integration, tool approval, auto-submit), v4→v5 migration (breaking changes), useChat/useCompletion/useObject/useAssistant hooks, and 12 UI error solutions (stream parsing, stale body values, React update depth). Use when: implementing AI SDK v5/v6 chat UIs, migrating v4→v5, troubleshooting "useChat failed to parse stream", "useChat no response", or "stale body values" errors, or integrating OpenAI assistants.
vue-nuxt
martinholovskyVue 3 and Nuxt 3 for JARVIS AI Assistant UI development with security-first patterns
thesys-generative-ui
ovachieverIntegrate TheSys C1 Generative UI API to stream interactive React components (forms, charts, tables) from LLM responses. Supports Vite + React, Next.js, and Cloudflare Workers with OpenAI, Anthropic Claude, and Workers AI. Use this when building conversational UIs, AI assistants with rich interactions, or when troubleshooting empty responses, theme application failures, streaming interruptions, or tool-calling errors.
Mocking Assistant
patricio0312revCreates stable mocks for APIs, services, and UI components using MSW (Mock Service Worker), fixture conventions, and example patterns. Use for "API mocking", "MSW", "test mocks", or "service mocking".
thesys-generative-ui
jackspaceProduction-ready skill for integrating TheSys C1 Generative UI API into React applications. This skill should be used when building AI-powered interfaces that stream interactive components (forms, charts, tables) instead of plain text responses. Covers complete integration patterns for Vite+React, Next.js, and Cloudflare Workers with OpenAI, Anthropic Claude, and Cloudflare Workers AI. Includes tool calling with Zod schemas, theming, thread management, and production deployment. Prevents 12+ common integration errors and provides working templates for chat interfaces, data visualization, and dynamic forms. Use this skill when implementing conversational UIs, AI assistants, search interfaces, or any application requiring real-time generative user interfaces with streaming LLM responses. Keywords: TheSys C1, TheSys Generative UI, @thesysai/genui-sdk, generative UI, AI UI, streaming UI components, interactive components, AI forms, AI charts, AI tables, conversational UI, AI assistants UI, React generative UI, Vite generative UI, Next.js generative UI, Cloudflare Workers generative UI, OpenAI generative UI, Claude generative UI, Anthropic UI, Cloudflare Workers AI UI, tool calling UI, Zod schemas UI, thread management, theming UI, chat interface, data visualization, dynamic forms, streaming LLM UI
update
assistant-uiUpdate assistant-ui and AI SDK to latest versions. Detects current versions, identifies breaking changes, and executes migrations.
Tools
assistant-uiGuide for tool registration and tool UI in assistant-ui. Use when implementing LLM tools, tool call rendering, or human-in-the-loop patterns.
cloud
assistant-uiGuide for assistant-cloud persistence and authorization. Use when setting up thread persistence, file uploads, or authentication.
primitives
assistant-uiGuide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive. Use when customizing chat UI components.
setup
assistant-uiSetup and configure assistant-ui in a project. Use when installing packages, configuring runtimes, setting up chat UI, or troubleshooting setup issues.
streaming
assistant-uiGuide for assistant-stream package and streaming protocols. Use when implementing streaming backends, custom protocols, or debugging stream issues.
runtime
assistant-uiGuide for assistant-ui runtime system and state management. Use when working with runtimes, accessing state, or managing thread/message data.
thread-list
assistant-uiGuide for multi-thread management in assistant-ui. Use when implementing thread lists, switching threads, or managing conversation history.
assistant-ui
assistant-uiGuide for assistant-ui library - AI chat UI components. Use when asking about architecture, debugging, or understanding the codebase.
docs-vue
imglyLook up CE.SDK Vue.js reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Vue.js — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Vue.js doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Vue.js configuration user: "How do I configure the editor in Vue.js?" assistant: "I'll use /cesdk:docs-vue to look up configuration options." </example> <example> Context: User asks about Vue plugin registration user: "How do I register CE.SDK as a Vue plugin?" assistant: "Let me use /cesdk:docs-vue to find the relevant documentation." </example>
docs-sveltekit
imglyLook up CE.SDK SvelteKit reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for SvelteKit — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing SvelteKit doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about SvelteKit configuration user: "How do I configure the editor in SvelteKit?" assistant: "I'll use /cesdk:docs-sveltekit to look up configuration options." </example> <example> Context: User asks about SvelteKit SSR user: "Does CE.SDK work with SvelteKit server-side rendering?" assistant: "Let me use /cesdk:docs-sveltekit to find the relevant documentation." </example>
docs-angular
imglyLook up CE.SDK Angular reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Angular — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Angular doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Angular configuration user: "How do I configure the editor in Angular?" assistant: "I'll use /cesdk:docs-angular to look up configuration options." </example> <example> Context: User needs Angular integration user: "How do I use CE.SDK in an Angular component?" assistant: "Let me use /cesdk:docs-angular to find the relevant documentation." </example>
add-provider
agentconfigAdd a new AI provider to agentconfig.org's comparison system. Use when integrating a new coding assistant (e.g., Cursor, Claude Desktop, GitHub Copilot alternative) with proper type system updates, implementation data, UI components, tests, and documentation.
docs-react
imglyLook up CE.SDK React reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for React — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing React doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about React configuration user: "How do I configure the editor in React?" assistant: "I'll use /cesdk:docs-react to look up configuration options." </example> <example> Context: User needs React component setup user: "How do I embed CE.SDK in a React component?" assistant: "Let me use /cesdk:docs-react to find the relevant documentation." </example>
docs-nextjs
imglyLook up CE.SDK Next.js reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Next.js — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Next.js doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Next.js configuration user: "How do I configure the editor in Next.js?" assistant: "I'll use /cesdk:docs-nextjs to look up configuration options." </example> <example> Context: User asks about SSR compatibility user: "Does CE.SDK work with Next.js server-side rendering?" assistant: "Let me use /cesdk:docs-nextjs to find the relevant documentation." </example>
docs-svelte
imglyLook up CE.SDK Svelte reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Svelte — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Svelte doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Svelte configuration user: "How do I configure the editor in Svelte?" assistant: "I'll use /cesdk:docs-svelte to look up configuration options." </example> <example> Context: User needs Svelte integration user: "How do I use CE.SDK in a Svelte component?" assistant: "Let me use /cesdk:docs-svelte to find the relevant documentation." </example>
docs-nuxtjs
imglyLook up CE.SDK Nuxt.js reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Nuxt.js — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Nuxt.js doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Nuxt.js configuration user: "How do I configure the editor in Nuxt.js?" assistant: "I'll use /cesdk:docs-nuxtjs to look up configuration options." </example> <example> Context: User needs Nuxt.js integration user: "How do I use CE.SDK in a Nuxt.js page?" assistant: "Let me use /cesdk:docs-nuxtjs to find the relevant documentation." </example>
docs-electron
imglyLook up CE.SDK Electron reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Electron — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Electron doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Electron configuration user: "How do I configure the editor in Electron?" assistant: "I'll use /cesdk:docs-electron to look up configuration options." </example> <example> Context: User needs Electron integration user: "How do I embed CE.SDK in an Electron app?" assistant: "Let me use /cesdk:docs-electron to find the relevant documentation." </example>
docs-js
imglyLook up CE.SDK Vanilla JavaScript reference docs, guides, and configuration pages. Use when the user needs CE.SDK docs for Vanilla JavaScript — configuration, UI customization, export options, feature guides, or getting-started instructions. Also triggered by "IMG.LY", "CreativeEditor", "CE.SDK", or "cesdk" when the user needs an existing Vanilla JavaScript doc page. Not for writing code (use build) or concept explanations (use explain). <example> Context: User asks about Vanilla JavaScript configuration user: "How do I configure the editor in Vanilla JavaScript?" assistant: "I'll use /cesdk:docs-js to look up configuration options." </example> <example> Context: User needs vanilla JS setup user: "How do I use CE.SDK without a framework?" assistant: "Let me use /cesdk:docs-js to find the relevant documentation." </example>
harmonyos-dev
CoreyLynHarmonyOS application development assistant based on ArkTS and ArkUI frameworks. Confirm API version (default API 20+) and target device type (default PC) before starting. Supports UI component development, data management, network communication, and system capability integration. Applicable for greenfield development, iterating existing projects, and architecture design. References official Huawei documentation including release notes, development guides, API references, best practices, and FAQ.
acp-agent
adambossyImplement an Agent Client Protocol (ACP) server to integrate AI agents with the Toad terminal UI and other ACP-compatible editors. Use when building agents that need to communicate with IDEs, creating coding assistants, or implementing the ACP standard.
UX Writing Assistant
Eli-yu-firstCrafts UX copy for buttons, error messages, onboarding flows, and empty states with tone guidelines