logoChakra

Vibe Coding

Setup VS Code for Vibe Coding

Agent skills are portable instruction files (for example SKILL.md) that teach your coding agent project conventions, safe patterns, and where to look in the docs.

New to vibe coding - what’s the best setup today?

A curated collection of Claude Code settings, skills and sub-agents designed for enhanced development workflows. This setup includes specialized skills and subagents for feature development (spec-driven workflow), code analysis, GitHub integration, and knowledge management.

Setup

  1. Copy claude settings .claude/settings.json to your repo.

Add Skills

Skills are reusable capabilities for AI agents. Install them with a single command to enhance your agents with access to procedural knowledge.

# general syntax
bunx skills@latest add <owner/repo>
# add following skills as needed

# shadcn UI skills
bunx skills@latest add shadcn/ui --skill '*'
# vercel agent-skills - A collection of skills for AI coding agents.
bunx skills@latest add vercel-labs/agent-skills --skill '*'
bunx skills@latest add vercel/workflow
bunx skills@latest add vercel/ai
# drizzle v1 skills
bunx skills@latest add honra-io/drizzle-best-practices --skill '*'
bunx drizzle-kit@1.0.0-rc.4 skills
# postgres - Helps AI coding tools generate better PostgreSQL code.
bunx skills@latest add https://github.com/timescale/pg-aiguide --skill '*'
# better-auth skills
bunx skills@latest add better-auth/skills --skill '*'
# evlog
bunx skills@latest add https://www.evlog.dev --skill 'review-logging-patterns'

# better-result - Lightweight Result type for TypeScript with generator-based composition.
bunx skills@latest add dmmulroy/better-result@better-result-adopt
# vite-env skills
bunx skills@latest add https://github.com/pyyupsk/skills --skill vite-env

# ask `Add a data table with filters to my project`
bunx skills@latest add https://github.com/openstatushq/data-table-filters --skill data-table-filters

# AI Agents - mastra, eve, assistant-ui
bunx skills@latest add mastra-ai/skills
bunx skills@latest add https://github.com/vercel/eve --skill eve
bunx skills@latest add assistant-ui/skills

# Files SDK
bunx skills add haydenbleasel/files-sdk --skill files-sdk
# Email SDK
bunx skills add opencoredev/email-sdk --skill email-sdk
# React Doctor
bunx skills add https://github.com/aidenybai/react-doctor --skill improve-react

Developer workflow skills

# improve -  audits any codebase and writes implementation plans for other agents to execute
bunx skills@latest add shadcn/improve

For reui skills, we have to use shadcn cli

bunx --bun shadcn@latest add @reui/skills-cursor

Update skills

To update skills

bunx skills@latest update

Remove skills

To remove a skill

bunx skills@latest remove -s [skill-name]
# bunx skills@latest remove -s drizzle-orm

Generate AGENTS.md for nextjs

 bunx @next/codemod@canary agents-md

Usage

to use migrate-radix-to-base skill, ask your coding agent:

migrate alert-dialog to base ui

Or

/migrate-radix-to-base alert-dialog

Last updated on

On this page