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:

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

Related MCP server: metricui

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.

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.

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