MCP 服务器

vinance-recipes

MCP server providing access to a catalog of reusable React/Next.js component recipes (animations, charts, UI components) with usage examples, props documentation, and architecture notes, enabling AI assistants to generate production-ready code.

README

Vinance Recipes Skills

Install once. Build React/Next.js apps with production-ready component recipes — right inside your AI coding tool.

Quick Start · Components · Directory Structure · Recipes

Quick Start

Option 1: Skills + Recipe Server (Recommended)

Step 1 — Install Vinance Recipes Skills:

npx skills add Austinnui/vinance-recipes-skills

Step 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/mcp

For Cursor, VS Code Copilot, Windsurf, and other tools:

Tool	Setup
Cursor	Add `{"mcpServers":{"vinance-recipes":{"type":"streamableHttp","url":"http://localhost:3100/mcp"}}}` to `.cursor/mcp.json`
VS Code Copilot	Add `{"servers":{"vinance-recipes":{"type":"http","url":"http://localhost:3100/mcp"}}}` to `.vscode/mcp.json`
Windsurf	Add `{"mcpServers":{"vinance-recipes":{"serverUrl":"http://localhost:3100/mcp"}}}` to `~/.codeium/windsurf/mcp_config.json`

Step 3 — Start the recipe server:

npx vinance-recipes install

Step 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

Option 2: Local Skills (No MCP Required)

Install skills that read source files directly from this repo — works offline, no server needed:

npx skills add Austinnui/vinance-recipes-skills

Your 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.

Option 3: File Copy

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.git

Components

Animation (`src/animation/`)

Parallax · AnimatedCounter · AnimatedGradient · Float · ScrollReveal · Shimmer · TypewriterText · PageTransition · AnimatedDashboard*

Chart (`src/chart/`)

LineChart · DonutChart · GaugeChart · AreaChart · Sparkline · ActivityHeatmap · SimpleBarChart · RechartsWrapper*

Component — Display (`src/component/display/`)

EnhancedCard · UserAvatar · Icons · ErrorBoundary · OnboardingFlow

Component — Feedback (`src/component/feedback/`)

Loading · Toast

Component — Input (`src/component/input/`)

EnhancedButton · EnhancedInput · Modal · Drawer · FAQAccordion · Tabs · Stepper · FloatingLabelInput · LanguageSwitcher · LegalConsentModal · ProtectedRoute · DataTable* · BeforeAfterSlider*

Module (`src/module/`)

DashboardLayout · HeaderFooter · AuthProvider* · LocaleProvider*

Utilities (`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.

Directory Structure

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.md

Recipes

Vinance 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.

Free vs Pro

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 `.tsx` source	Full `.tsx` source
Usage examples	—	Via `getRecipe`
Props documentation	—	Via `getRecipe`
Architecture notes	—	Via `getRecipe`