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

1. Clone this repository
2. Copy the files you need from src/ into your project's components/ folder
3. 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

Price: $89, one-time payment, lifetime access. Get it: lhj191110@163.com

After purchasing, set your API key:

export VINANCE_API_KEY=vr_live_xxxxx

---

Links

• GitHub: github.com/Austinnui/vinance-recipes-skills
• Contact: lhj191110@163.com

License

MIT — see LICENSE for details.

---

Made with ❤️ by Austinnui