Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@vinance-recipes show me animation components"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Install once. Build React/Next.js apps with production-ready component recipes — right inside your AI coding tool.
Quick Start · Components · Directory Structure · Recipes
Step 1 — Install Vinance Recipes Skills:
npx skills add Austinnui/vinance-recipes-skillsStep 2 — Connect the recipe server so your AI can fetch recipes:
# Claude Code
claude mcp add --transport http vinance-recipes http://localhost:3100/mcp
# Gemini CLI
gemini mcp add --transport http vinance-recipes http://localhost:3100/mcpFor Cursor, VS Code Copilot, Windsurf, and other tools:
Tool | Setup |
Cursor | Add |
VS Code Copilot | Add |
Windsurf | Add |
Step 3 — Start the recipe server:
npx vinance-recipes installStep 4 — Ask your AI:
explore recipes — browse the full catalog
show me animation components — filter by category
build a dashboard with auth — generate a complete feature
Install skills that read source files directly from this repo — works offline, no server needed:
npx skills add Austinnui/vinance-recipes-skillsYour AI can then browse skills/catalog.md and read .tsx source files directly. Try:
explore recipes
add a shimmer animation
build a dashboard feature
Tip: If you also connect the MCP server (Option 1), your AI gets access to usage examples, props docs, and architecture notes alongside the source code.
Clone this repository
Copy the files you need from src/ into your project's components/ folder
Each component in src/animation/, src/chart/, and src/component/ is self-contained — just copy the file and src/util/utils.ts if needed
git clone https://github.com/Austinnui/vinance-recipes-skills.gitRelated MCP server: metricui
src/animation/)Parallax · AnimatedCounter · AnimatedGradient · Float · ScrollReveal · Shimmer · TypewriterText · PageTransition · AnimatedDashboard*
src/chart/)LineChart · DonutChart · GaugeChart · AreaChart · Sparkline · ActivityHeatmap · SimpleBarChart · RechartsWrapper*
src/component/display/)EnhancedCard · UserAvatar · Icons · ErrorBoundary · OnboardingFlow
src/component/feedback/)Loading · Toast
src/component/input/)EnhancedButton · EnhancedInput · Modal · Drawer · FAQAccordion · Tabs · Stepper · FloatingLabelInput · LanguageSwitcher · LegalConsentModal · ProtectedRoute · DataTable* · BeforeAfterSlider*
src/module/)DashboardLayout · HeaderFooter · AuthProvider* · LocaleProvider*
src/util/)utils.ts — cn, formatNumber, formatCurrency, formatDate, easeOutCubic, clamp, truncate
* Pro tier — requires VINANCE_API_KEY when fetched via MCP server. Source always available locally.
Austinnui/vinance-recipes-skills/
├── src/ # Component source files (.tsx / .ts)
│ ├── animation/ # Animation components
│ ├── chart/ # Chart components
│ ├── component/
│ │ ├── display/ # Display components
│ │ ├── feedback/ # Feedback components (Toast, Loading)
│ │ └── input/ # Input / interaction components
│ ├── module/ # Multi-component patterns
│ └── util/ # Shared utilities
├── skills/ # Cross-platform Skills (npx skills add)
│ ├── catalog.md # Component catalog with file paths
│ ├── build-feature/SKILL.md
│ ├── add-component/SKILL.md
│ └── explore-recipes/SKILL.md
├── plugins/
│ └── vinance-recipes/
│ ├── .mcp.json # Auto-configures recipe server (Claude Code Plugin)
│ ├── .claude-plugin/plugin.json
│ └── skills/ # Plugin-bundled skills
├── recipes/ # Recipe docs (.md) for MCP server
├── index.js # MCP server (stdio + HTTP)
├── CLAUDE.md
├── LICENSE
└── README.mdVinance Recipes provides free and pro recipes via Skills — each recipe includes complete TypeScript source code, usage examples, and props documentation. Your AI assistant can retrieve any recipe on demand.
Category | Count | Examples |
Animation | 9 | Parallax, Counter, Gradient, Shimmer, Typewriter |
Chart | 8 | Line, Donut, Gauge, Area, Sparkline, Heatmap |
Component | 20 | Button, Card, Modal, Toast, Tabs, Drawer, Data Table... |
Module | 4 | Dashboard Layout, Header & Footer, Auth, i18n |
45 total · 45 free · 6 Pro
Three MCP tools available: listRecipes, searchRecipes, getRecipe.
All source code is available locally under the MIT license. Pro recipes add usage examples, architecture notes, and props documentation via the MCP server.
Free | Pro | |
Source code | Full | Full |
Usage examples | — | Via |
Props documentation | — | Via |
Architecture notes | — | Via |
Price: $89, one-time payment, lifetime access. Get it: lhj191110@163.com
After purchasing, set your API key:
export VINANCE_API_KEY=vr_live_xxxxxContact: lhj191110@163.com
MIT — see LICENSE for details.
Made with ❤️ by Austinnui
Get a recipe by ID. Returns complete, copy-paste-ready React/TSX source code with usage examples, props reference, and architecture notes. Module recipes may also include backend patterns. Pro recipes require VINANCE_API_KEY.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Recipe ID e.g. 'component-enhanced-button', 'animation-shimmer' | |
| apiKey | No | Vinance Recipes Pro API key (required for pro-tier recipes) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses the return format (copy-paste-ready code, usage examples, props reference, architecture notes), mentions possible backend patterns, and states that pro recipes require an API key. It lacks explicit discussion of errors or side effects, but is otherwise thorough.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is only two sentences, front-loaded with the core purpose, then elaborates on the return content. Every sentence adds value, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the absence of an output schema, the description explains what the tool returns in useful detail, including code, documentation, and auth requirements. It is complete enough for an agent to know what to expect from the tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for both id and apiKey. The description adds some context about pro recipes requiring the API key, but otherwise it does not add meaningful meaning beyond what the schema already provides. Baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Get' with the resource 'recipe by ID', clearly distinguishing it from listRecipes and searchRecipes. It immediately states what the tool does without ambiguity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies usage for retrieving a specific recipe by ID, which differentiates from sibling list/search tools. However, it does not explicitly mention when not to use it or name alternatives, so it misses the top score.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List production-ready React/Next.js code recipes. Each recipe is a complete, copy-paste-ready implementation. Categories: animation, chart, component, module. Pro recipes are shown with a 🔒 badge.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category. Default 'all' | all |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It adds useful behavioral details like 'copy-paste-ready implementation' and 'Pro recipes are shown with a 🔒 badge', but it does not disclose ordering, pagination, authentication needs, or how the 'all' category behaves. This is minimal but adequate for a simple read/list tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two concise sentences with the main action front-loaded. Every sentence adds value, and there is no redundancy or fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple (one optional parameter, no output schema), and the description provides enough context: what recipes are, category options, and badge behavior. No return-value details are necessary for a list tool of this scope, and sibling context confirms its role.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3. The description lists the category values but omits the 'all' option, and it does not add meaning beyond what the schema's 'Filter by category. Default all' already provides. Marginal value; no contradictions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('List') with a clear resource ('production-ready React/Next.js code recipes') and provides category details and badge behavior. This clearly distinguishes it from the sibling tools 'searchRecipes' (search) and 'getRecipe' (get a single recipe).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use for browsing all recipes and lists categories, but it does not explicitly explain when to use listRecipes versus searchRecipes or getRecipe. No exclusions or alternative guidance is provided, so usage context is only implicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search recipes by keyword across titles, descriptions, tags, AND full source code. Works for any topic: button, card, chart, animation, toast, auth, modal, i18n, avatar, sidebar, etc.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search keyword e.g. 'toast', 'chart', 'onboarding' |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Since no annotations exist, the description carries the full transparency burden. It reveals that the search covers full source code, not just metadata, which is a valuable behavioral trait beyond what the schema specifies. It also implicitly frames the operation as a read-only search, though it does not disclose result format or potential limitations. This is adequate for a simple search tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two concise sentences, front-loaded with the primary action and scope, followed by useful topic examples. Every word earns its place, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one required parameter, no output schema), the description covers the search scope and provides varied examples. It does not mention what the return value looks like, which is a minor gap due to the absent output schema, but the name 'searchRecipes' strongly implies a list of recipes. Overall, the description is sufficiently complete for a lightweight search tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the parameter already includes a description with examples. The tool description adds context that the query applies across multiple fields (titles, descriptions, tags, source code), but this is more about behavior than parameter semantics. It does not add meaningful syntax, constraints, or format details beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description specifies a clear action (search) and a distinct resource (recipes) with explicit scope: keyword across titles, descriptions, tags, and full source code. This differentiates it from the sibling tools listRecipes (list all) and getRecipe (retrieve by ID). The verb-to-resource relationship is specific and unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description strongly implies when to use it ('search by keyword', 'works for any topic') and provides common topic examples. However, it does not explicitly state when to use this tool instead of listRecipes or getRecipe, nor does it mention any exclusions or prerequisites. Clear context, but no direct alternative naming.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Each tool has a clearly distinct role: listing all recipes, searching across content, and fetching a specific recipe by ID. No overlap or ambiguity exists between them.
All tool names follow the same verb+noun pattern in camelCase: listRecipes, searchRecipes, getRecipe. The style is uniform and predictable.
Three tools form a tight, well-scoped set for a recipe server. Each tool addresses a different need without excess or deficiency.
The server covers the full read-side lifecycle for recipes: discovery (list/search) and retrieval (get). Since recipes are static content, no create/update/delete operations are necessary.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
MCP server for building and testing AI agents with multi-model experimentation and insights.
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
The Cortex MCP server provides read-only access to real-time engineering context from the Cortex developer portal, allowing AI coding assistants to answer natural language questions about your organization's catalog (microservices, libraries, domains, teams, infrastructure), scorecards (engineering standards and best practices), initiatives (goals and deadlines), and Engineering Intelligence metrics. It includes tools for querying documentation, tracking personal entities, and accessing AI-assisted insights across the entire Cortex ecosystem.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Austinnui/vinance-recipes-skills'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
