home / skills / andrelandgraf / fullstackrecipes

andrelandgraf/fullstackrecipes

A Shadcn registry and collection of production-ready patterns and step-by-step guides (recipes) for full stack web AI apps

61 skills

Sponsored

Advertise on playbooks

Put your product in front of developers browsing MCP servers and agent skills. ↗

better-auth-best-practices

andrelandgraf/fullstackrecipes

This skill helps integrate Better Auth with TypeScript apps, guiding configuration, plugins, session management, and security best practices.

integration-tests

andrelandgraf/fullstackrecipes

This skill helps you run fast, reliable integration tests by importing API handlers with Bun's test runner to eliminate HTTP overhead.

use-fullstackrecipes

andrelandgraf/fullstackrecipes

This skill helps you discover and follow production-ready fullstack recipes to accelerate setup, skills, and cookbooks for AI apps.

andrelandgraf/fullstackrecipes

This skill streamlines AI-driven development by defining user stories with testable criteria and coordinating looping agent runs until all criteria pass.

andrelandgraf/fullstackrecipes

This skill helps you implement a complete testing setup with Neon branches, Playwright browser tests, and unit/integration tests for robust fullstack apps.

Advertise on playbooks

Reach thousands of developers actively evaluating dev tools, MCP servers, and agent skills. Floating banners, pinned cards, and in-feed placements.

andrelandgraf/fullstackrecipes

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

andrelandgraf/fullstackrecipes

This skill helps you validate environment variables on server start and before builds, catching missing or invalid vars with clear errors.

vercel-react-best-practices

andrelandgraf/fullstackrecipes

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

andrelandgraf/fullstackrecipes

This skill helps you build and manage a full-stack AI chat app with persistence, chat list features, and automatic title generation.

ai-chat-persistence

andrelandgraf/fullstackrecipes

This skill helps persist AI chat conversations in Neon Postgres, including AI SDK message parts, tools, reasoning, and streaming for reliable history.

andrelandgraf/fullstackrecipes

This skill helps you install the Vercel AI SDK and build a streaming chat interface using useChat, boosting rapid AI-enabled UI development.

better-auth-components

andrelandgraf/fullstackrecipes

This skill helps you implement production-ready authentication UI and pages with shadcn patterns for sign in, sign up, and reset flows.

better-auth-setup

andrelandgraf/fullstackrecipes

This skill helps you bootstrap secure authentication using Better Auth with Drizzle ORM and Neon Postgres for rapid fullstack apps.

custom-durable-agent

andrelandgraf/fullstackrecipes

This skill helps you design and operate a custom durable AI agent with full control over streamText options, configs, and tool loops.

env-workflow-vercel

andrelandgraf/fullstackrecipes

This skill helps you manage environment variables across Vercel environments, syncing with the Vercel CLI and handling local overrides.

feature-flags-setup

andrelandgraf/fullstackrecipes

This skill helps you implement feature flags with Flags SDK for server-side evaluation, environment toggles, and Vercel Toolbar integration.

neon-drizzle-setup

andrelandgraf/fullstackrecipes

This skill helps you connect a Next.js app to Neon Postgres using Drizzle ORM with optimized serverless pooling for Vercel.

nextjs-on-vercel

andrelandgraf/fullstackrecipes

This skill helps you bootstrap a Next.js app on Bun, configured for development and deployment to Vercel with automatic previews.

andrelandgraf/fullstackrecipes

This skill syncs React state with URL query parameters to enable shareable filters and deep links while preserving UI state.

playwright-tests

andrelandgraf/fullstackrecipes

This skill helps you create and run browser tests with Playwright to verify user interactions, navigation, and visual feedback across pages.

andrelandgraf/fullstackrecipes

This skill helps automate agent-driven development by configuring Ralph loop to execute user stories, verify criteria, and log progress.

resumable-ai-streams

andrelandgraf/fullstackrecipes

This skill enables automatic recovery for AI chat response streams using WorkflowChatTransport, start/resume endpoints, and useResumableChat hook to maintain

andrelandgraf/fullstackrecipes

This skill guides you through configuring Sentry for errors, performance, and logs, integrating with Pino for automated log forwarding.

shiki-code-blocks

andrelandgraf/fullstackrecipes

This skill highlights code blocks using Shiki with SSR support and automatic theme switching for seamless developer experience.

andrelandgraf/fullstackrecipes

This skill configures and runs Bun unit tests with Jest-compatible syntax, providing fast, co-located test files and robust mocking.

using-drizzle-queries

andrelandgraf/fullstackrecipes

This skill helps you write type-safe Drizzle ORM queries in TypeScript for select, insert, update, delete, and relational data.

andrelandgraf/fullstackrecipes

This skill helps you instrument applications with Sentry by capturing exceptions, adding context, tracing performance, and enabling structured logging.

web-design-guidelines

andrelandgraf/fullstackrecipes

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

andrelandgraf/fullstackrecipes

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

better-auth-emails

andrelandgraf/fullstackrecipes

This skill guides implementing Better Auth emails with verification, password reset, and account management using Resend for reliable user communications.

better-auth-protected-routes

andrelandgraf/fullstackrecipes

This skill helps enforce authentication on server-side routes while preserving public pages, enabling secure access control with minimal changes.

andrelandgraf/fullstackrecipes

This skill generates descriptive chat titles from the initial message, accelerating context switching and improving chat navigation.

config-schema-setup

andrelandgraf/fullstackrecipes

This skill validates and enforces type-safe environment configurations using a Zod-inspired schema, covering server and client fields, feature flags, and

neon-test-branches

andrelandgraf/fullstackrecipes

This skill helps you provision isolated Neon test branches with schema-only structure, auto-cleanup TTL, and environment orchestration for safe testing.

og-image-generation

andrelandgraf/fullstackrecipes

This skill generates dynamic social preview images for Next.js apps using file conventions and next/og, with server-side rendering and build-time caching.

pino-logging-setup

andrelandgraf/fullstackrecipes

This skill configures Pino logging with development friendly colorized output and production JSON for aggregation, boosting observability across apps.

shadcn-ui-setup

andrelandgraf/fullstackrecipes

This skill helps you set up Shadcn UI with dark mode support using next-themes, including theme provider and CSS variables configuration.

andrelandgraf/fullstackrecipes

This skill automates Stripe subscriptions syncing with Postgres via webhooks, Vercel flags for plan configuration, and billing portal integration.

andrelandgraf/fullstackrecipes

This skill enforces structured logging with Pino across your app, improving observability with consistent context, levels, and workflow-safe patterns.

andrelandgraf/fullstackrecipes

This skill helps you manage React state in URL query parameters with nuqs for shareable filters and deep-linkable dialogs.

using-workflows

andrelandgraf/fullstackrecipes

This skill helps you design and run durable workflows with steps, streaming, and agent execution for resilient, resumable automation.

ai-agent-workflow

andrelandgraf/fullstackrecipes

This skill helps build resumable multi-agent workflows with durable execution and automatic stream recovery across client reconnections.

andrelandgraf/fullstackrecipes

This skill implements a complete authentication system with Better Auth, email verification, and protected routes to secure user data.

andrelandgraf/fullstackrecipes

This skill guides you through setting up a scalable Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK for rapid AI-powered development.

observability-monitoring

andrelandgraf/fullstackrecipes

This skill helps you implement a complete observability stack with structured logging, error tracking, and web analytics for robust production apps.

andrelandgraf/fullstackrecipes

This skill provides a TypeScript assertion helper for runtime type narrowing with descriptive errors, aiding robust input validation and early failure

better-auth-profile

andrelandgraf/fullstackrecipes

This skill helps you implement a complete account settings page with profile editing, password changes, email updates, session management, and deletion.

andrelandgraf/fullstackrecipes

This skill configures AI coding agents with project-specific patterns and guidelines to ensure consistent, efficient AI-assisted development.

andrelandgraf/fullstackrecipes

This skill helps you manage a chat list with search, rename, and delete features using URL-synced filters and deep-linkable modals.

url-state-management

andrelandgraf/fullstackrecipes

This skill helps you sync React state to URL query parameters for shareable filters, search, and deep links using nuqs.

andrelandgraf/fullstackrecipes

This skill provides type-safe environment variable management with Zod validation, Vercel workflow integration, and prebuild checks for reliable deployments.

code-style-setup

andrelandgraf/fullstackrecipes

This skill configures Prettier and TypeScript with VSCode and EditorConfig for consistent, error-free formatting and typing.

andrelandgraf/fullstackrecipes

This skill helps you configure Resend for transactional emails like password resets and verifications across your app.

using-authentication

andrelandgraf/fullstackrecipes

This skill streamlines secure authentication across client and server, enabling session access, protected routes, sign in/out, and user data retrieval.

vercel-analytics-setup

andrelandgraf/fullstackrecipes

This skill helps you set up privacy-focused Vercel Web Analytics to track page views, visitors, and events with zero configuration.

andrelandgraf/fullstackrecipes

This skill guides you through installing and configuring the Workflow Development Kit for resumable AI agent workflows with step-level persistence.

stripe-subscriptions

andrelandgraf/fullstackrecipes

This skill helps you implement a complete Stripe subscriptions workflow with webhooks, plan gating via feature flags, and a billing portal for seamless billing.

user-stories-setup

andrelandgraf/fullstackrecipes

This skill helps teams document feature requirements as testable user stories in JSON, enabling AI agents to verify and track progress.

using-analytics

andrelandgraf/fullstackrecipes

This skill helps you implement and test Vercel Web Analytics, track custom events, and monitor conversions across components and forms.

andrelandgraf/fullstackrecipes

This skill helps you implement and manage a robust test strategy across Playwright, API integration, and unit tests for fast, isolated runs.

using-user-stories

andrelandgraf/fullstackrecipes

This skill helps you define and track feature delivery using user stories, ensuring verifiable steps and passing acceptance criteria.