skills.rest
kanitmann01
kanitmann01COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-builder

Create and maintain Next.js App Router UI components and layouts in web/.

Updated Mar 18, 2026
Search Tags:#frontend#nextjs#web-development#ui-components#app-router#server-components#css-modules
One-click install
npx skills add https://github.com/kanitmann01/TitanTale-Analytics --skill frontend-builder-kanitmann01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-builder
Source: https://github.com/kanitmann01/TitanTale-Analytics/tree/main/.cursor/skills/frontend-builder
Command: npx skills add https://github.com/kanitmann01/TitanTale-Analytics --skill frontend-builder-kanitmann01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams build polished Next.js App Router UI components, pages, and client logic inside web/, ensuring consistency across routes and layouts when creating or editing frontend code, components, or styles.

Core Features & Use Cases

  • Coherent UI toolkit: Centralizes components, layouts, and styles for a consistent look and feel.
  • Workflow-compliant development: Enforces server components by default with "use client" only where interactivity is needed.
  • On-demand architecture guidance: Encourages co-located styles (CSS Modules or Tailwind) and typed adapters for data access.

Quick Start

Set up a Next.js App Router UI in web/ by following the workflow to create components, pages, and client logic.

Frequently Asked Questions about frontend-builder

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

FAQPage Schema
How do I build Next.js App Router UI components with server components by default?▼

Next.js App Router UI components use server components by default, adding "use client" only where interactivity is needed. Co-located styles and typed adapters maintain consistent rendering across pages and layouts in the web/ directory.

What's the best way to structure styles for Next.js App Router pages?▼

Co-located CSS Modules or Tailwind styles structure Next.js App Router pages. This keeps component styles centralized within the web/ directory, ensuring a consistent look and feel across all routes.

Can I use client-side interactivity in Next.js server components?▼

Client-side interactivity in Next.js server components requires adding the "use client" directive. By default, components remain server-rendered, using client code only where interactive logic is explicitly needed.

Does this frontend-builder workflow support non-CSV data access?▼

The workflow supports non-CSV data access by using typed adapters. This ensures type-safe, structured data fetching within Next.js App Router components while maintaining token discipline.

Why use typed adapters for data fetching in Next.js UI components?▼

Typed adapters for data fetching in Next.js UI components ensure type safety and structured data access. They prevent non-CSV data misalignment and maintain consistency across server and client component boundaries.

Related Skills

Explore More Software Engineering Skills→
ColdstartLabs-caColdstartLabs-ca

nextjs-app-router

Implement Next.js 15 App Router patterns for routes, API endpoints, and components.

Official
Intermediate
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
kanitmann01kanitmann01

backend-builder

Automate setup, validation, and wiring of Next.js API routes, server actions, and data adapters.

Community
Advanced
jota-batutajota-batuta

react-nextjs

Enforce Batuta conventions for React/Next.js App Router frontends.

Community
Advanced