skills.rest
ncrmro
ncrmroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-developer

Create server-components-first UI with Next.js 15 theme tokens.

2|1|Updated Nov 18, 2025
Search Tags:#theming#ui#frontend#react#nextjs#tailwind#server-components
One-click install
npx skills add https://github.com/ncrmro/tetrastack --skill frontend-developer-ncrmro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/ncrmro/tetrastack/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/ncrmro/tetrastack --skill frontend-developer-ncrmro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables rapid and consistent frontend development by guiding you to build server-first UI with Next.js 15 App Router, React 19, and a cohesive theme system.

Core Features & Use Cases

  • Server Components-first: Prefer server components to optimize performance and UX.
  • Theme-driven Styling: Use the project's global tokens from src/app/globals.css to ensure consistent theming across components.
  • Component Organization: Follow Rails-inspired patterns (models, components, pages) for maintainable UI.
  • Server Actions for Mutations: Leverage server actions to handle client mutations without API routes.

Quick Start

Create a new React UI component under src/components/ or app/, wire it in a page, then run the dev server with npm run dev. Always consult src/app/globals.css before styling to use theme tokens.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build consistent UI and theming in Next.js 15 apps?▼

Use server components as your default, organize components under `src/components/` or `app/`, and style using theme tokens from `src/app/globals.css` with TailwindCSS. This ensures consistent theming across your entire Next.js 15 application while optimizing performance.

What's the best approach to structure React components in a Next.js project?▼

Follow a Rails-inspired organization: separate models, components, and pages into distinct directories. Place UI components in `src/components/`, pages in `app/`, and layouts alongside them. This maintainable structure supports the server-components-first architecture of Next.js 15.

Can I use server actions with TailwindCSS for form handling in Next.js?▼

Yes. Server actions handle client mutations without requiring API routes, while TailwindCSS provides styling via global theme tokens. This combination enables efficient form processing and UI consistency in Next.js 15 with React 19.

When should I prefer server components over client components in Next.js?▼

Server components are the default in Next.js 15 App Router because they optimize performance and UX by reducing client-side JavaScript. Use them for pages, layouts, and any components that don't need interactivity, reserving client components only for interactive features.

How do I ensure my Next.js components use the correct theme tokens?▼

Consult `src/app/globals.css` before styling any component to source the project's global theme tokens. Apply these tokens consistently across all UI components and pages to maintain a cohesive design system throughout your Next.js application.

Related Skills

Explore More Software Engineering Skills→
softwarebyzesoftwarebyze

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo projects.

Community
Intermediate
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate
ylxaiylxai
2

tailwind-css-patterns

Generate Tailwind CSS utility patterns for responsive React, Vue, or Svelte components.

Community
Intermediate