web-frontend

Enforce server components, tRPC, and Tailwind design tokens in Next.js apps.

2|1|Updated Aug 19, 2025

Search Tags:#typescript #frontend #nextjs #trpc #tailwindcss #design-systems

One-click install

npx skills add https://github.com/deancochran/gradientpeak --skill web-frontend-deancochran

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: web-frontend
Source: https://github.com/deancochran/gradientpeak/tree/main/.opencode/skills/web-frontend
Command: npx skills add https://github.com/deancochran/gradientpeak --skill web-frontend-deancochran

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to scale Next.js applications when balancing server components, client interactivity, and a cohesive UI system. This skill provides standardized patterns and best practices to accelerate development, improve performance, and maintain design consistency across routes and features. It guides teams on when to use server components vs client components, how to integrate tRPC for type-safe data fetching, and how to apply a design-token-based Tailwind CSS system.

Core Features & Use Cases

Server Components by default; Client Components only when necessary (hooks, browser APIs)
Type-safe API calls with tRPC
Semantic design with shadcn/ui patterns and Tailwind CSS tokens
Pattern guidance for protected routes and error boundaries
Real-world use cases: building dashboards, data-heavy pages, and marketing sites

Quick Start

Set up a Next.js app with App Router, enable server components by default, and integrate tRPC for data fetching and Tailwind CSS design tokens to begin.

Frequently Asked Questions about web-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

When should I use server components vs client components in Next.js?▼

Use Next.js server components by default for data fetching and static rendering, adopting client components only when hooks or browser APIs are strictly necessary for interactivity.

How do I integrate tRPC for type-safe data fetching in Next.js?▼

Integrate tRPC in Next.js to enforce type-safe API calls between server and client components, ensuring end-to-end type safety without manual schema synchronization across your application.

Can I use this approach for building data-heavy dashboards in Next.js?▼

Yes, these Next.js patterns specifically support building data-heavy dashboards by combining default server components for initial loads with client components for interactive filtering.

What are the limitations of enforcing server components by default in Next.js?▼

Enforcing server components by default limits direct access to browser APIs and React hooks, requiring explicit client component boundaries whenever state or client-side interactivity is needed.