Open Source · Pattern Library
skills.vishalvoid.com
A curated library of production-ready engineering patterns — installable in one command. Browse 70+ patterns from React, Next.js, TypeScript, Anthropic, OpenAI, and more, or install my own handcrafted patterns directly into your project.
Product
skills
Role
Creator & Maintainer
Timeline
2025 – Present
Patterns
70+
By the numbers
70+
Curated patterns
1
Command to install
My
Production patterns
100%
Open source
Quick Start
Up and running in one command
Install once as a global package, run from any project directory. Santra indexes your repo automatically on first launch.
The Problem
Engineering knowledge that lives in your head, not in your repo
Experienced developers accumulate a toolkit of battle-tested patterns — how to handle optimistic updates correctly, how to wire Zod validation across a stack, how to structure a production Next.js app. But this knowledge stays tribal: it lives in your memory, in old repos, or in bookmarks nobody visits. Every new project starts from scratch.
Repeating the same setup ritual
Whether it's a TanStack Query mutation setup, a rate-limited API route, or a Zod-validated form — the same patterns get reimplemented project after project, slightly differently each time.
Documentation scattered across the internet
The React docs, TanStack Query docs, Anthropic docs, and Next.js docs all live in separate places. There is no curated, cross-referenced library that links related concepts.
No way to share personal architecture decisions
When you've spent a week finding the right way to compose something — a multi-provider AI client, a resilient server action pattern — there's no structured format to preserve and share that decision.
Copy-paste from old projects breeds drift
Pulling code from an 18-month-old project means pulling its outdated dependencies, pre-v5 TanStack Query patterns, and forgotten edge cases — then spending hours modernizing it.
The Solution
A personal pattern library you can install in seconds.
skills.vishalvoid.com is two things in one: a curated directory of 70+ external engineering skills linking directly to official documentation, and a set of my own handcrafted, production-tested patterns that install directly into your project with a single curl command.
One-Command Install
Run `curl -fsSL https://skills.vishalvoid.com/install | bash` to install any of my patterns directly into your project. No global tool, no CLI to install first — the bootstrap script handles detection and setup.
My Patterns — Documented & Versioned
Each of my patterns (React Optimistic Updates, Zod API Validation, Next.js Product Stack) includes a full problem statement, the exact hook or utility code, usage examples, and a list of related patterns.
Skills Directory — 70+ Curated Links
A searchable directory of skills from Anthropic, React, Next.js, TypeScript, Prisma, Drizzle, TanStack, and more — each tagged by source, difficulty, and topic, linking directly to official docs.
Cross-Referenced Patterns
Every pattern lists related patterns. React Optimistic Updates links to the Next.js Product Stack and Zod API Validation — so you can trace the full architecture, not just individual pieces.
Dark / Light Mode
The site respects system preference and allows manual toggle with zero flash on load — implemented with a synchronous inline script that sets the theme class before React hydrates.
Statically Generated, Zero Dependencies
Fully static Next.js site with no database, no auth, no CMS. The install script is a raw Bash file served from the same domain. Fast to load, simple to maintain.
Technology Stack
Built with the right tools
Next.jsFramework
TypeScriptLanguage
Tailwind CSSStyling
VercelDeployment
BashInstall ScriptArchitecture
Static Site (Next.js App Router)
skills.vishalvoid.com/
├── app/
│ ├── page.tsx # Home — my patterns + directory preview
│ ├── [slug]/page.tsx # Individual pattern detail
│ ├── skills/page.tsx # Full directory listing
│ ├── skills/[slug]/page.tsx # External skill detail
│ └── install/route.ts # Serves the Bash install script
├── components/
│ ├── SkillCard.tsx # My pattern cards
│ ├── ExternalSkillCard.tsx # Directory cards
│ └── InstallCommand.tsx # Copy-to-clipboard install strip
└── data/
├── skills.ts # My patterns (typed)
└── external-skills.ts # 70+ external skill entries (typed)Development Journey
How it was built
Phase 01
The frustration behind it
The idea started with a recurring feeling: I kept solving the same problems. Optimistic UI updates in TanStack Query v5, Zod-validated API routes in Next.js, AI provider routing — each time I'd reconstruct the same solution from scratch because the last version was buried in a different project. The goal was a place to preserve these solutions in a shareable, installable form.
Phase 02
Designing the pattern format
The key constraint was that each pattern had to be more than a code snippet — it needed a problem statement, core code with explanation, a usage example, and links to related patterns. This structure came from thinking about how I'd actually want to rediscover a pattern six months later, or how a teammate would read it cold.
Phase 03
The install mechanism
The install script was the most interesting engineering problem. Rather than building a CLI, I went with a curl-piped Bash script — zero prerequisites. The script detects the project's package manager (npm, pnpm, yarn, bun), identifies missing dependencies, and copies the pattern file to the correct location. Simple, auditable, works everywhere.
Phase 04
Building the skills directory
The external skills directory grew from wanting a single place to link the documentation I actually reference. I tagged each skill by source (Anthropic, React, Next.js, etc.) and difficulty (beginner / intermediate / advanced), making it navigable without a search engine. The directory is statically typed — each skill entry has a defined schema in TypeScript.
Phase 05
The dark-mode-first UI
The UI was intentionally constrained: monospace fonts, tight spacing, muted opacity hierarchies, no color except functional accents. The theme toggle uses a synchronous inline script in the document head — the same approach React docs use — so there is never a flash of the wrong theme on first load, even on a slow connection.
Engineering Challenges
Hard problems, real solutions
Zero-flash theme switching
Problem
Next.js App Router hydrates asynchronously. A naive theme implementation using a React state hook will always flash the wrong theme on first load — the HTML renders without the theme class, React runs, and the class is applied too late.
Solution
Injected a synchronous inline `<script>` in the document `<head>` (before body render) that reads localStorage and sets the dark class on `<html>` immediately. This runs before paint, eliminating the flash entirely.
Package manager detection in the install script
Problem
Developers use npm, pnpm, yarn, and bun — and each has different lockfile names, install commands, and workspace conventions. A hardcoded install command would break for most users.
Solution
The Bash install script walks up from the current directory looking for lockfiles (pnpm-lock.yaml, yarn.lock, bun.lockb, package-lock.json) to infer the package manager. Falls back to npm if none found.
Keeping the directory maintainable as it grows
Problem
At 70+ external skills, a flat array becomes hard to navigate and update. Without structure, entries drift out of date and categories become inconsistent.
Solution
The directory is defined as a statically typed TypeScript array with a strict ExternalSkill type — source, difficulty, tags, and sourceUrl are all required. This means a missing field is a compile error, not a runtime surprise.
Quality & Testing
Static site — correctness is enforced by TypeScript.
As a static Next.js site with no backend, the primary quality mechanism is TypeScript's strict mode. Every skill entry, pattern definition, and page component is fully typed. The install script is tested manually across macOS (zsh), Linux (bash), and common CI environments.
| Method | Endpoint / Function | Tests | Passing |
|---|---|---|---|
| GET | / | 0 | 0 |
| GET | /skills | 0 | 0 |
| GET | /skills/[slug] | 0 | 0 |
| GET | /[slug] | 0 | 0 |
| GET | /install | 0 | 0 |
Project Roadmap
What's done, what's next
v1.0 · Stable
Upcoming · In Progress
Future · Planned