Turn bookmarks into markdown for your agents
Turn X bookmarks, Chrome tabs + YouTube URLs into markdown for agents 🦞 ↗
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
63 skills
GitHubSponsored
env-management
andrelandgraf/fullstackrecipes
9
This skill provides type-safe environment variable management with Zod validation, Vercel workflow integration, and prebuild checks for reliable deployments.
neon-postgres
andrelandgraf/fullstackrecipes
8
This skill helps you navigate Neon Serverless Postgres with best practices, setup steps, and tooling guidance for efficient development.
agent-browser
andrelandgraf/fullstackrecipes
8
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.
custom-durable-agent
andrelandgraf/fullstackrecipes
8
This skill helps you design and operate a custom durable AI agent with full control over streamText options, configs, and tool loops.
og-image-generation
andrelandgraf/fullstackrecipes
8
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.
stripe-subscriptions
andrelandgraf/fullstackrecipes
8
This skill helps you implement a complete Stripe subscriptions workflow with webhooks, plan gating via feature flags, and a billing portal for seamless billing.
use-fullstackrecipes
andrelandgraf/fullstackrecipes
8
This skill helps you discover and follow production-ready fullstack recipes to accelerate setup, skills, and cookbooks for AI apps.
using-logging
andrelandgraf/fullstackrecipes
8
This skill enforces structured logging with Pino across your app, improving observability with consistent context, levels, and workflow-safe patterns.
nuqs-setup
andrelandgraf/fullstackrecipes
8
This skill syncs React state with URL query parameters to enable shareable filters and deep links while preserving UI state.
playwright-tests
andrelandgraf/fullstackrecipes
8
This skill helps you create and run browser tests with Playwright to verify user interactions, navigation, and visual feedback across pages.
unit-tests
andrelandgraf/fullstackrecipes
8
This skill configures and runs Bun unit tests with Jest-compatible syntax, providing fast, co-located test files and robust mocking.
authentication
andrelandgraf/fullstackrecipes
8
This skill implements a complete authentication system with Better Auth, email verification, and protected routes to secure user data.
config-schema-setup
andrelandgraf/fullstackrecipes
8
This skill validates and enforces type-safe environment configurations using a Zod-inspired schema, covering server and client fields, feature flags, and
agent-setup
andrelandgraf/fullstackrecipes
8
This skill configures AI coding agents with project-specific patterns and guidelines to ensure consistent, efficient AI-assisted development.
ai-chat-persistence
andrelandgraf/fullstackrecipes
8
This skill helps persist AI chat conversations in Neon Postgres, including AI SDK message parts, tools, reasoning, and streaming for reliable history.
better-env
andrelandgraf/fullstackrecipes
8
This skill helps you manage typed environment variables across local and remote providers with safe config schemas, validation, and CLI-driven sync.
ai-sdk-setup
andrelandgraf/fullstackrecipes
8
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-protected-routes
andrelandgraf/fullstackrecipes
8
This skill helps enforce authentication on server-side routes while preserving public pages, enabling secure access control with minimal changes.
assert
andrelandgraf/fullstackrecipes
8
This skill provides a TypeScript assertion helper for runtime type narrowing with descriptive errors, aiding robust input validation and early failure
better-auth-setup
andrelandgraf/fullstackrecipes
8
This skill helps you bootstrap secure authentication using Better Auth with Drizzle ORM and Neon Postgres for rapid fullstack apps.
chat-list
andrelandgraf/fullstackrecipes
8
This skill helps you manage a chat list with search, rename, and delete features using URL-synced filters and deep-linkable modals.
better-auth-components
andrelandgraf/fullstackrecipes
8
This skill helps you implement production-ready authentication UI and pages with shadcn patterns for sign in, sign up, and reset flows.
better-auth-emails
andrelandgraf/fullstackrecipes
8
This skill guides implementing Better Auth emails with verification, password reset, and account management using Resend for reliable user communications.
better-auth-profile
andrelandgraf/fullstackrecipes
8
This skill helps you implement a complete account settings page with profile editing, password changes, email updates, session management, and deletion.
code-style-setup
andrelandgraf/fullstackrecipes
8
This skill configures Prettier and TypeScript with VSCode and EditorConfig for consistent, error-free formatting and typing.
env-workflow-vercel
andrelandgraf/fullstackrecipes
8
This skill helps you manage environment variables across Vercel environments, syncing with the Vercel CLI and handling local overrides.
neon-drizzle-setup
andrelandgraf/fullstackrecipes
8
This skill helps you connect a Next.js app to Neon Postgres using Drizzle ORM with optimized serverless pooling for Vercel.
feature-flags-setup
andrelandgraf/fullstackrecipes
8
This skill helps you implement feature flags with Flags SDK for server-side evaluation, environment toggles, and Vercel Toolbar integration.
nextjs-on-vercel
andrelandgraf/fullstackrecipes
8
This skill helps you bootstrap a Next.js app on Bun, configured for development and deployment to Vercel with automatic previews.
integration-tests
andrelandgraf/fullstackrecipes
8
This skill helps you run fast, reliable integration tests by importing API handlers with Bun's test runner to eliminate HTTP overhead.
neon-test-branches
andrelandgraf/fullstackrecipes
8
This skill helps you provision isolated Neon test branches with schema-only structure, auto-cleanup TTL, and environment orchestration for safe testing.
ralph-setup
andrelandgraf/fullstackrecipes
8
This skill helps automate agent-driven development by configuring Ralph loop to execute user stories, verify criteria, and log progress.
shadcn-ui-setup
andrelandgraf/fullstackrecipes
8
This skill helps you set up Shadcn UI with dark mode support using next-themes, including theme provider and CSS variables configuration.
pino-logging-setup
andrelandgraf/fullstackrecipes
8
This skill configures Pino logging with development friendly colorized output and production JSON for aggregation, boosting observability across apps.
resend-setup
andrelandgraf/fullstackrecipes
8
This skill helps you configure Resend for transactional emails like password resets and verifications across your app.
sentry-setup
andrelandgraf/fullstackrecipes
8
This skill guides you through configuring Sentry for errors, performance, and logs, integrating with Pino for automated log forwarding.
stripe-sync
andrelandgraf/fullstackrecipes
8
This skill automates Stripe subscriptions syncing with Postgres via webhooks, Vercel flags for plan configuration, and billing portal integration.
using-authentication
andrelandgraf/fullstackrecipes
8
This skill streamlines secure authentication across client and server, enabling session access, protected routes, sign in/out, and user data retrieval.
resumable-ai-streams
andrelandgraf/fullstackrecipes
8
This skill enables automatic recovery for AI chat response streams using WorkflowChatTransport, start/resume endpoints, and useResumableChat hook to maintain
user-stories-setup
andrelandgraf/fullstackrecipes
8
This skill helps teams document feature requirements as testable user stories in JSON, enabling AI agents to verify and track progress.
shiki-code-blocks
andrelandgraf/fullstackrecipes
8
This skill highlights code blocks using Shiki with SSR support and automatic theme switching for seamless developer experience.
using-analytics
andrelandgraf/fullstackrecipes
8
This skill helps you implement and test Vercel Web Analytics, track custom events, and monitor conversions across components and forms.
using-drizzle-queries
andrelandgraf/fullstackrecipes
8
This skill helps you write type-safe Drizzle ORM queries in TypeScript for select, insert, update, delete, and relational data.
using-nuqs
andrelandgraf/fullstackrecipes
8
This skill helps you manage React state in URL query parameters with nuqs for shareable filters and deep-linkable dialogs.
using-sentry
andrelandgraf/fullstackrecipes
8
This skill helps you instrument applications with Sentry by capturing exceptions, adding context, tracing performance, and enabling structured logging.
using-tests
andrelandgraf/fullstackrecipes
8
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
8
This skill helps you define and track feature delivery using user stories, ensuring verifiable steps and passing acceptance criteria.
using-workflows
andrelandgraf/fullstackrecipes
8
This skill helps you design and run durable workflows with steps, streaming, and agent execution for resilient, resumable automation.
vercel-analytics-setup
andrelandgraf/fullstackrecipes
8
This skill helps you set up privacy-focused Vercel Web Analytics to track page views, visitors, and events with zero configuration.
ai-agent-workflow
andrelandgraf/fullstackrecipes
8
This skill helps build resumable multi-agent workflows with durable execution and automatic stream recovery across client reconnections.
base-app-setup
andrelandgraf/fullstackrecipes
8
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.
workflow-setup
andrelandgraf/fullstackrecipes
8
This skill guides you through installing and configuring the Workflow Development Kit for resumable AI agent workflows with step-level persistence.
ralph-loop
andrelandgraf/fullstackrecipes
8
This skill streamlines AI-driven development by defining user stories with testable criteria and coordinating looping agent runs until all criteria pass.
observability-monitoring
andrelandgraf/fullstackrecipes
8
This skill helps you implement a complete observability stack with structured logging, error tracking, and web analytics for robust production apps.
testing
andrelandgraf/fullstackrecipes
8
This skill helps you implement a complete testing setup with Neon branches, Playwright browser tests, and unit/integration tests for robust fullstack apps.
url-state-management
andrelandgraf/fullstackrecipes
8
This skill helps you sync React state to URL query parameters for shareable filters, search, and deep links using nuqs.
skill-creator
andrelandgraf/fullstackrecipes
8
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.
ai-chat
andrelandgraf/fullstackrecipes
8
This skill helps you build and manage a full-stack AI chat app with persistence, chat list features, and automatic title generation.
better-auth-best-practices
andrelandgraf/fullstackrecipes
8
This skill helps integrate Better Auth with TypeScript apps, guiding configuration, plugins, session management, and security best practices.
chat-naming
andrelandgraf/fullstackrecipes
8
This skill generates descriptive chat titles from the initial message, accelerating context switching and improving chat navigation.
env-validation
andrelandgraf/fullstackrecipes
8
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
8
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.