What is the approach to UI components?

The skill uses a utility-first approach with Tailwind CSS and shadcn/ui, which provides copy-paste components for full code ownership.

Are observability tools included in the setup?

Yes, it requires Sentry for error tracking and PostHog for product analytics to ensure applications are production-ready from day one.

How is backend data handled in this configuration?

It leverages Convex for real-time data sync and type-safety, though it provides alternatives like tRPC + Prisma for non-real-time applications.

Why does this skill prefer pnpm over npm or yarn?

pnpm is preferred for its superior speed, disk efficiency through content-addressable storage, and strict handling of phantom dependencies.

What primary framework does this toolchain use?

The skill defaults to Next.js using the App Router and TypeScript for a type-safe, full-stack React experience.

Modern Web Toolchain Preferences

Name: Modern Web Toolchain Preferences
Author: phrazzld

byphrazzld

•

Productivity & Workflow

Applies an opinionated, production-grade technology stack including Next.js, TypeScript, and Convex to streamline full-stack development.

About

This skill codifies a battle-tested architecture for building modern web applications, ensuring consistency and performance across new and existing projects. It automates the decision-making process by enforcing a specific toolchain: pnpm for package management, Next.js for the core framework, and Convex for real-time backend services. By integrating best-in-class tools like Tailwind CSS, shadcn/ui, and TanStack, the skill allows developers to skip configuration boilerplate and move directly into feature implementation with built-in support for observability via Sentry and PostHog.

Key Features

Modern testing environment configuration with Vitest and Playwright
Pre-configured real-time backend integration using Convex
Production-ready observability setup including Sentry and PostHog
Standardized project initialization with pnpm and Next.js App Router
Type-safe UI development with Tailwind CSS and shadcn/ui components
2 GitHub stars

Use Cases

Bootstrapping a new real-time SaaS application with a full-stack TypeScript environment
Implementing standardized observability and error tracking in existing Next.js apps
Standardizing developer workflows and package management across a software team

About

Key Features

Modern testing environment configuration with Vitest and Playwright
Pre-configured real-time backend integration using Convex
Production-ready observability setup including Sentry and PostHog
Standardized project initialization with pnpm and Next.js App Router
Type-safe UI development with Tailwind CSS and shadcn/ui components
2 GitHub stars

Use Cases

Bootstrapping a new real-time SaaS application with a full-stack TypeScript environment
Implementing standardized observability and error tracking in existing Next.js apps
Standardizing developer workflows and package management across a software team