skills.vishalvoid
skills/directory

Engineering Skills Directory

A curated index of 70+ skills from across the ecosystem — Anthropic, OpenAI, Google, React, Next.js, TypeScript, Node.js, and more. Each links directly to the official documentation.

70 skills total

Anthropic

Claude Tool Use

Give Claude access to external tools and APIs. Define tools as JSON schemas, Claude decides when to call them, and your code executes them — enabling real-world actions from any Claude model.

ClaudeFunction CallingAI
Intermediate
Anthropic

Claude Vision

Pass images directly to Claude for analysis, OCR, chart interpretation, UI feedback, and multimodal understanding. Supports JPEG, PNG, GIF, and WebP up to 5MB.

ClaudeVisionMultimodal
Beginner
Anthropic

Prompt Caching

Cache large, repeated prompt prefixes (system prompts, long documents, tool definitions) to cut latency by up to 85% and reduce input token costs by 90% on cache hits.

ClaudePerformanceCost
Intermediate
Anthropic

Extended Thinking

Let Claude reason through complex problems step-by-step before answering. Claude 3.7 Sonnet and Claude 4 Opus produce higher-accuracy outputs on math, coding, and multi-step reasoning tasks.

ClaudeReasoningCoT
Advanced
Anthropic

Claude Batch API

Process thousands of Claude requests asynchronously at 50% of the cost of real-time requests. Ideal for bulk classification, data extraction, and offline evaluation pipelines.

ClaudeBatchAsync
Intermediate
Anthropic

Claude Streaming

Stream Claude responses token-by-token using server-sent events for real-time chat UIs. Dramatically improves perceived latency for conversational applications.

ClaudeStreamingSSE
Beginner
Anthropic

Computer Use

Give Claude control of a desktop environment — it can see the screen, move the cursor, click, type, and run terminal commands. Build autonomous computer agents with the beta API.

ClaudeAgentsAutomation
Advanced
Anthropic

Files API

Upload files once and reference them across multiple Claude requests by file ID. Ideal for large PDFs, codebases, and datasets where re-uploading every request is wasteful.

ClaudeFilesDocuments
Beginner
Anthropic

Citations

Ask Claude to cite specific passages from provided documents when answering questions. Produces grounded, verifiable responses with source attribution for RAG applications.

ClaudeRAGCitations
Intermediate
Anthropic

Text Embeddings (Voyage AI)

Anthropic partners with Voyage AI to offer best-in-class embeddings for semantic search, clustering, and retrieval-augmented generation. Direct drop-in for RAG pipelines.

ClaudeEmbeddingsRAG
Intermediate
OpenAI

OpenAI Function Calling

Connect GPT-4o to external tools and APIs. Define functions as JSON schemas and the model returns structured calls your application executes, enabling reliable structured output extraction.

GPTFunction CallingTools
Intermediate
OpenAI

Structured Outputs

Guarantee GPT-4o responses conform exactly to a JSON schema you define. 100% schema adherence — no post-processing, no validation errors on production traffic.

GPTJSONSchema
Intermediate
OpenAI

Assistants API

Build stateful AI assistants with persistent threads, built-in file retrieval, code interpreter, and function calling. Manages conversation history and tool orchestration for you.

GPTAssistantsThreads
Intermediate
OpenAI

GPT-4o Vision

Feed images into GPT-4o for analysis, description, OCR, chart reading, and visual QA. Combine with text prompts for multimodal understanding in any application.

GPTVisionMultimodal
Beginner
OpenAI

OpenAI Embeddings

Convert text to dense vector representations for semantic search, clustering, anomaly detection, and RAG. text-embedding-3-large offers industry-leading retrieval accuracy.

OpenAIEmbeddingsVector Search
Intermediate
OpenAI

Fine-Tuning

Train GPT-4o-mini on your own examples to improve response style, format consistency, domain knowledge, and reduce prompt length for production workloads.

OpenAIFine-TuningTraining
Advanced
OpenAI

Realtime API

Build low-latency, bidirectional speech-to-speech applications with GPT-4o. Native audio input and output with interruption handling for voice agents and conversational AI.

OpenAIVoiceAudio
Advanced
OpenAI

Whisper Speech-to-Text

Transcribe and translate audio in 57 languages with best-in-class accuracy. Supports MP3, MP4, WAV, FLAC and more. Open-source model also available for self-hosting.

OpenAISpeechTranscription
Beginner
OpenAI

DALL-E 3 Image Generation

Generate high-quality images from text prompts with DALL-E 3 via API. Supports multiple sizes, quality levels, and natural language style control with strong prompt adherence.

OpenAIImage GenerationDALL-E
Beginner
OpenAI

OpenAI Batch API

Submit thousands of requests as a single batch file and receive results within 24 hours at 50% cost savings. Perfect for offline evaluation, bulk classification, and data enrichment.

OpenAIBatchCost
Intermediate
Google

Gemini API

Access Google's Gemini family of models (Pro, Flash, Ultra) via REST or SDK. Supports text, images, video, audio, and PDFs in a single multimodal request up to 1M tokens context.

GeminiGoogle AIMultimodal
Beginner
Google

Gemini Function Calling

Define functions as tools for Gemini to call based on user intent. Enables structured data extraction, API orchestration, and agentic workflows with the Gemini Pro models.

GeminiFunction CallingAgents
Intermediate
Google

Gemini Long Context

Process up to 2 million tokens in a single prompt with Gemini 1.5 Pro — entire codebases, books, or hours of video. The largest context window of any publicly available model.

GeminiLong ContextDocuments
Intermediate
Google

Gemini Code Execution

Let Gemini run Python code in a sandboxed environment during generation. Model writes code, executes it, reads the output, and iterates — enabling data analysis and math computation.

GeminiCode ExecutionPython
Intermediate
Google

Google AI Studio

Browser-based IDE for prototyping with Gemini models. Test prompts, explore model capabilities, tune system instructions, and generate API keys without writing code first.

GeminiPrototypingPlayground
Beginner
Google

Gemini Grounding with Google Search

Connect Gemini responses to live Google Search results for up-to-date, factual answers. Reduces hallucination on time-sensitive queries with automatic source attribution.

GeminiSearchGrounding
Intermediate
React

React Server Components

Render components entirely on the server with zero client-side JavaScript. Access databases, file systems, and secrets directly in your component tree. The foundation of Next.js App Router.

ReactRSCPerformance
Intermediate
React

useOptimistic

Apply optimistic UI updates instantly during async transitions. The component shows the new state immediately while the real state resolves, then auto-rolls back on error.

ReactHooksUX
Intermediate
React

Suspense

Declaratively specify loading states while async data fetches. Wrap any component tree in `<Suspense fallback={...}>` and React handles the loading/ready transition automatically.

ReactSuspenseLoading
Intermediate
React

use() Hook

Unwrap Promises and Context inside render — the React 19 primitive that powers `async` server components and enables reading cached async values without useEffect.

ReactHooksAsync
Intermediate
React

React Context

Share state across a component tree without prop drilling. Use createContext, Provider, and useContext for theming, auth state, locale, and other global values.

ReactContextState
Beginner
React

Transitions & useTransition

Mark expensive state updates as non-urgent so React can interrupt them for higher-priority interactions. Keeps the UI responsive during heavy re-renders or data fetches.

ReactPerformanceTransitions
Advanced
React

Error Boundaries

Catch JavaScript errors anywhere in a component subtree and display a fallback UI instead of crashing the whole application. Essential for production resilience.

ReactError HandlingResilience
Intermediate
React

memo & useMemo

Skip expensive re-renders by memoizing component output and computed values. Use memo() to wrap components and useMemo() to cache the return value of expensive calculations.

ReactPerformanceMemoization
Intermediate
React

useRef & forwardRef

Access DOM nodes and persist mutable values across renders without triggering re-renders. Essential for animations, focus management, measuring elements, and integrating non-React libraries.

ReactDOMRefs
Beginner
Next.js

Next.js App Router

The modern Next.js routing system built on React Server Components. Layouts, pages, loading, error, and route groups live in a file-system hierarchy under the `app/` directory.

Next.jsApp RouterRouting
Beginner
Next.js

Server Actions

Call server-side functions directly from client components and forms. No API route needed — just mark a function `'use server'` and call it from the client with progressive enhancement built-in.

Next.jsServer ActionsForms
Intermediate
Next.js

Image Optimization

Automatic WebP/AVIF conversion, responsive srcset generation, lazy loading, and blur placeholders via the `<Image>` component. Eliminates the most common Core Web Vitals regressions.

Next.jsImagesPerformance
Beginner
Next.js

Middleware

Run code before every request on the edge — auth checks, redirects, rewrites, A/B testing, and header injection — with sub-millisecond latency and global distribution.

Next.jsMiddlewareEdge
Intermediate
Next.js

Parallel Routes

Render multiple pages simultaneously in the same layout using named slots (`@slot`). Powers dashboards, modals, and split-pane views where independent sections load independently.

Next.jsRoutingLayouts
Advanced
Next.js

Metadata API

Define static and dynamic metadata (title, description, OG images, robots, canonical URLs) from layout and page files. Next.js generates all `<head>` tags automatically.

Next.jsSEOMetadata
Beginner
Next.js

Incremental Static Regeneration

Rebuild static pages on-demand or on a time interval without a full redeploy. `revalidate` and `revalidatePath` let you keep static pages fresh while serving them at CDN speed.

Next.jsISRStatic
Intermediate
Next.js

Route Handlers

Create REST API endpoints inside the App Router using `route.ts` files. Supports all HTTP methods, streaming responses, CORS headers, and edge runtime deployment.

Next.jsAPIREST
Beginner
TypeScript

TypeScript Generics

Write reusable, type-safe code that works across multiple types. Generics are the foundation of utility types, React component props, and flexible API client patterns.

TypeScriptGenericsType Safety
Intermediate
TypeScript

Utility Types

Built-in type transformations: Partial, Required, Pick, Omit, ReturnType, Awaited, and more. Compose complex types from simpler ones without duplicating type definitions.

TypeScriptUtility TypesType Manipulation
Intermediate
TypeScript

Discriminated Unions

Model mutually exclusive states by combining union types with a shared discriminant field. The TypeScript pattern for exhaustive type narrowing — eliminates entire classes of runtime bugs.

TypeScriptType SafetyState Machines
Intermediate
TypeScript

Template Literal Types

Build string types programmatically using template literal syntax. Powers strongly-typed CSS class name generators, event names, API path builders, and i18n key systems.

TypeScriptTemplate LiteralsAdvanced Types
Advanced
TypeScript

satisfies Operator

Validate that an expression matches a type without widening it. Catch mismatches at definition time while preserving the most specific inferred type for downstream use.

TypeScriptType SafetyTypeScript 4.9+
Intermediate
TypeScript

Zod Schema Validation

Define schemas once, infer TypeScript types automatically, and validate at runtime. The standard for type-safe form validation, API response parsing, and environment variable checking.

TypeScriptZodValidation
Beginner
Node.js

Node.js Streams

Process data piece-by-piece without buffering the entire payload in memory. Essential for file processing, HTTP responses, log pipelines, and transforming large datasets efficiently.

Node.jsStreamsPerformance
Advanced
Node.js

Worker Threads

Run CPU-intensive JavaScript in parallel threads without blocking the event loop. Each worker has its own V8 instance and communicates via message passing and SharedArrayBuffer.

Node.jsConcurrencyPerformance
Advanced
Node.js

ES Modules in Node.js

Use native ESM (`import`/`export`) in Node.js with `.mjs` files or `"type": "module"` in package.json. Enables top-level await, tree-shaking, and alignment with browser modules.

Node.jsESMModules
Beginner
Node.js

Node.js Crypto

Built-in cryptographic functions for hashing, HMAC, encryption/decryption, key generation, and secure random bytes. No third-party library needed for common security operations.

Node.jsSecurityCrypto
Intermediate
Databases

Prisma ORM

Type-safe database access for TypeScript. Define your schema in Prisma Schema Language, run migrations, and query with a fully-typed client that eliminates SQL injection and runtime shape errors.

PrismaORMPostgreSQL
Beginner
Databases

Drizzle ORM

Lightweight TypeScript ORM with a SQL-like query API. Define schemas in TypeScript, get full type inference, and generate migrations — with zero runtime overhead and serverless-first design.

DrizzleORMSQL
Intermediate
Databases

Supabase

Postgres as a service with auto-generated REST and real-time APIs, authentication, storage, and edge functions. The open-source Firebase alternative with full Postgres capabilities.

SupabasePostgreSQLBaaS
Beginner
Databases

Redis Caching

Cache expensive database queries, session data, rate limit counters, and computed values in sub-millisecond in-memory storage. Use Upstash for serverless-compatible Redis via HTTP.

RedisCachingPerformance
Intermediate
Databases

Vector Databases

Store and query high-dimensional embeddings for semantic search and RAG. Options include Pinecone, Weaviate, Chroma, and pgvector (Postgres extension) — each with different latency/cost tradeoffs.

Vector DBEmbeddingsRAG
Intermediate
CSS & Design

Tailwind CSS v4

Utility-first CSS framework with a CSS-first configuration model in v4. Define design tokens with `@theme`, use arbitrary values, and build entire UIs without leaving HTML.

TailwindCSSUtility-First
Beginner
CSS & Design

CSS Grid Layout

Two-dimensional layout system for building complex, responsive page shells. Define rows and columns with `grid-template`, place items with `grid-area`, and avoid absolutely all absolute positioning hacks.

CSSGridLayout
Intermediate
CSS & Design

CSS Container Queries

Apply styles based on the size of a container element, not the viewport. Components that adapt to their layout context — sidebars, card grids, and embeddable widgets — without JavaScript.

CSSContainer QueriesResponsive
Intermediate
CSS & Design

View Transitions API

Animate between page states or DOM updates with CSS-powered transitions — no animation library needed. The browser captures before/after snapshots and animates between them automatically.

CSSAnimationsView Transitions
Intermediate
Testing

Vitest

Vite-native test runner with Jest-compatible API. Near-instant HMR for tests, TypeScript and ESM support out of the box, built-in code coverage, and snapshot testing.

TestingVitestUnit Tests
Beginner
Testing

Playwright E2E Testing

End-to-end browser testing for Chromium, Firefox, and WebKit in the same test. Auto-waits eliminate flaky sleeps, trace viewer pinpoints failures, and API testing needs no browser.

TestingE2EPlaywright
Intermediate
Testing

React Testing Library

Test React components the way users interact with them — by accessible role, label, and text. Promotes accessible UIs as a side effect of good testing practices.

TestingReactAccessibility
Beginner
Testing

Mock Service Worker (MSW)

Intercept network requests at the service worker level for realistic API mocking. Same mock definitions work in tests (Node.js) and the browser — no more diverging mock/prod behavior.

TestingMSWAPI Mocking
Intermediate
Deployment

Vercel Edge Functions

Deploy JavaScript/TypeScript functions to Vercel's edge network — 100+ global locations, sub-millisecond cold starts, and access to the Web Fetch API, crypto, and streaming responses.

VercelEdgeServerless
Intermediate
Deployment

GitHub Actions CI/CD

Automate build, test, and deployment pipelines directly from your repository. YAML-defined workflows trigger on push, PR, schedule, or manual dispatch with 10,000+ marketplace actions.

CI/CDGitHubAutomation
Intermediate
Deployment

Docker Containerization

Package applications and dependencies into portable containers that run identically in development, CI, and production. Multi-stage builds minimize image size for Node.js and Next.js apps.

DockerContainersDevOps
Intermediate
Deployment

Cloudflare Workers

Deploy JavaScript/TypeScript to Cloudflare's 300+ edge locations. Access KV storage, D1 (SQLite), R2 (object storage), and Queues — a complete serverless platform at the edge.

CloudflareEdgeWorkers
Intermediate