# Vinance Recipes Skills

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

[![npm](https://img.shields.io/npm/v/vinance-recipes)](https://www.npmjs.com/package/vinance-recipes)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![React](https://img.shields.io/badge/React-18%2B-61dafb.svg)](https://react.dev)
[![Next.js](https://img.shields.io/badge/Next.js-14%2B-000000.svg)](https://nextjs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5%2B-3178c6.svg)](https://www.typescriptlang.org)
[![Skills](https://img.shields.io/badge/Skills-Powered-8A2BE2.svg)](https://github.com/Austinnui/vinance-recipes-skills)

[Quick Start](#quick-start) · [Components](#components) · [Directory Structure](#directory-structure) · [Recipes](#recipes)

---

## Quick Start

### Option 1: Skills + Recipe Server (Recommended)

**Step 1** — Install Vinance Recipes Skills:

```bash
npx skills add Austinnui/vinance-recipes-skills
```

**Step 2** — Connect the recipe server so your AI can fetch recipes:

```bash
# 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:

```bash
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:

```bash
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

```bash
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](mailto:lhj191110@163.com?subject=Vinance+Recipes+Pro)

After purchasing, set your API key:

```bash
export VINANCE_API_KEY=vr_live_xxxxx
```

---

## Links

- **GitHub**: [github.com/Austinnui/vinance-recipes-skills](https://github.com/Austinnui/vinance-recipes-skills)
- **Contact**: [lhj191110@163.com](mailto:lhj191110@163.com)

## License

MIT — see [LICENSE](LICENSE) for details.

---

Made with ❤️ by [Austinnui](https://github.com/Austinnui)