Topic: reactjs
59 skills in this topic.
-
generative-ui
Creates a new Tambo generative UI app from scratch. Scaffolds with tambo create-app, wires TamboProvider, registers starter components. Triggers on "new Tambo app", "create a generative UI app", "build an AI app from scratch", "start a new project with Tambo". For existing apps, use building-with-tambo.
tambo-ai/tambo 11,120
-
ai-sdk-model-manager
Manages AI SDK model configurations - updates packages, identifies missing models, adds new models with research, and updates documentation
tambo-ai/tambo 11,120
-
api-resource-lifecycle
Guides CRUD operations for API resources with cascading dependencies, descriptive validation, and orphan prevention. Use when adding delete/remove operations, creating validation logic, building resources that depend on other resources, or when the user mentions "cascade delete", "orphan records", "duplicate detection", "validation errors", "resource cleanup", or "rollback on failure".
tambo-ai/tambo 11,120
-
building-with-tambo
Integrates Tambo into existing React apps — detects tech stack, installs @tambo-ai/react, wires TamboProvider, registers components with Zod schemas, and sets up tools/context. Use when adding AI-powered generative UI to an existing codebase. Triggers on "add Tambo", "integrate Tambo", "add AI chat to my app", "add generative UI", or when the user has an existing React/Next.js/Vite project and wants to add AI-powered components. For brand-new projects, use generative-ui instead.
tambo-ai/tambo 11,120
-
creating-styled-wrappers
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".
tambo-ai/tambo 11,120
-
validating-accessibility
Use this skill when creating, modifying, or reviewing any .tsx component in apps/web, even if the user doesn't mention "accessibility." Covers semantic HTML, aria labels, navigation landmarks, forms, dialogs, and keyboard navigation. Trigger on: adding buttons, links, toggles, icons, or any interactive element; building or editing forms; adding dialogs or modals; reviewing UI code. Includes inline verification patterns for scanning violations. Not for styling or layout changes that don't involve interactive elements.
tambo-ai/tambo 11,120
-
building-settings-ui
Use this skill when adding or modifying settings UI in Tambo Cloud. Covers where a new settings section belongs (Agent tab vs Settings tab), and the component patterns used across both pages (card layout, toasts, confirmation dialogs, destructive styling, save behavior conventions). Triggers on "add a new settings section", "where should X go?", "settings UI", "settings page", "agent page", or any work touching apps/web/components/dashboard-components/project-details/, project-settings.tsx, or agent-settings.tsx. Not for full-stack feature building (DB, tRPC, tests); those patterns will get their own skills.
tambo-ai/tambo 11,120
-
building-compound-components
Creates unstyled compound components that separate business logic from styles. Use when building headless UI primitives, creating component libraries, implementing Radix-style namespaced components, or when the user mentions "compound components", "headless", "unstyled", "primitives", or "render props".
tambo-ai/tambo 11,120
-
mcp-builder
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 Model Context Protocol (MCP) servers with mcp-use framework.
Use when creating MCP servers, defining tools/resources/prompts, working with mcp-use,
bootstrapping MCP projects, or when user mentions MCP development, tools, resources, or prompts.
CopilotKit/CopilotKit 30,143
-
chatgpt-app-builder
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.
CopilotKit/CopilotKit 30,143
-
git-hooks
CopilotKit pre-commit hook reference. Load automatically when the user mentions git hooks failing, pre-commit errors, lefthook issues, commit blocked, or "hooks don't work", or when user wants to commit/push anything Contains the full hook topology so debugging skips discovery and goes straight to diagnosis.
CopilotKit/CopilotKit 30,143
-
mcp-apps-builder
**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns.
**READ THIS FIRST** before any MCP server work, including:
- Creating new MCP servers
- Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets)
- Debugging MCP server issues or errors
- Reviewing MCP server code for quality, security, or performance
- Answering questions about MCP development or mcp-use patterns
- Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets
This skill contains critical architecture decisions, security patterns, and common pitfalls.
Always consult the relevant reference files BEFORE implementing MCP features.
CopilotKit/CopilotKit 30,143
-
pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
binjuhor/shadcn-lar 65
-
shopify
Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
binjuhor/shadcn-lar 65
-
databases
Work with MongoDB (document database, BSON documents, aggregation pipelines, Atlas cloud) and PostgreSQL (relational database, SQL queries, psql CLI, pgAdmin). Use when designing database schemas, writing queries and aggregations, optimizing indexes for performance, performing database migrations, configuring replication and sharding, implementing backup and restore strategies, managing database users and permissions, analyzing query performance, or administering production databases.
binjuhor/shadcn-lar 65
-
code-review
Use when receiving code review feedback (especially if unclear or technically questionable), when completing tasks or major features requiring review before proceeding, or before making any completion/success claims. Covers three practices - receiving feedback with technical rigor over performative agreement, requesting reviews via code-reviewer subagent, and verification gates requiring evidence before any status claims. Essential for subagent-driven development, pull requests, and preventing false completion claims.
binjuhor/shadcn-lar 65
-
chrome-devtools
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
binjuhor/shadcn-lar 65
-
media-processing
Process multimedia files with FFmpeg (video/audio encoding, conversion, streaming, filtering, hardware acceleration), ImageMagick (image manipulation, format conversion, batch processing, effects, composition), and RMBG (AI-powered background removal). Use when converting media formats, encoding videos with specific codecs (H.264, H.265, VP9), resizing/cropping images, removing backgrounds from images, extracting audio from video, applying filters and effects, optimizing file sizes, creating streaming manifests (HLS/DASH), generating thumbnails, batch processing images, creating composite images, or implementing media processing pipelines. Supports 100+ formats, hardware acceleration (NVENC, QSV), and complex filtergraphs.
binjuhor/shadcn-lar 65
-
payment-integration
Implement payment integrations with SePay (Vietnamese payment gateway with VietQR, bank transfers, cards) and Polar (global SaaS monetization platform with subscriptions, usage-based billing, automated benefits). Use when integrating payment processing, implementing checkout flows, managing subscriptions, handling webhooks, processing bank transfers, generating QR codes, automating benefit delivery, or building billing systems. Supports authentication (API keys, OAuth2), product management, customer portals, tax compliance (Polar as MoR), and comprehensive SDK integrations (Node.js, PHP, Python, Go, Laravel, Next.js).
binjuhor/shadcn-lar 65
-
xlsx
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
binjuhor/shadcn-lar 65
-
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
binjuhor/shadcn-lar 65
-
skill-creator
Guide for creating effective skills, adding skill references, skill scripts or optimizing existing 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, frameworks, libraries or plugins usage, or API and tool integrations.
binjuhor/shadcn-lar 65
-
template-skill
Replace with description of the skill and when Claude should use it.
binjuhor/shadcn-lar 65
-
mobile-development
Build modern mobile applications with React Native, Flutter, Swift/SwiftUI, and Kotlin/Jetpack Compose. Covers mobile-first design principles, performance optimization (battery, memory, network), offline-first architecture, platform-specific guidelines (iOS HIG, Material Design), testing strategies, security best practices, accessibility, app store deployment, and mobile development mindset. Use when building mobile apps, implementing mobile UX patterns, optimizing for mobile constraints, or making native vs cross-platform decisions.
binjuhor/shadcn-lar 65