skills.rest
tmarsbr
tmarsbrCOMMUNITY
Explore all skills by this author →
GitHub

frontend-developer

Build reusable React/Next.js UI components with accessibility and performance patterns.

Updated Jul 30, 2025
Search Tags:#performance#accessibility#frontend#react#nextjs#ui-components#server-actions
One-click install
npx skills add https://github.com/tmarsbr/portifolio --skill frontend-developer-tmarsbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/tmarsbr/portifolio/tree/main/skill-ux/skills/frontend-developer
Command: npx skills add https://github.com/tmarsbr/portifolio --skill frontend-developer-tmarsbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building modern, scalable UIs with React and Next.js can be time-consuming without a structured approach that ensures performance and accessibility.

Core Features & Use Cases

  • Component-driven UI development with React 19+ and Next.js 15+ App Router.
  • Performance optimization, accessibility, and responsive design for production-grade apps.
  • Design system integration and modern state-management patterns for client-side apps.

Quick Start

Design and implement a reusable React/Next.js UI component with responsive behavior and accessible patterns.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build accessible React components with Next.js 15 App Router?▼

Build accessible React components by enforcing accessible patterns and responsive design within the Next.js 15 App Router architecture. This approach ensures your server and client components meet accessibility standards while maintaining UI performance.

What's the best way to optimize frontend performance in React 19?▼

Optimize React 19 frontend performance by applying modern profiling and audit techniques alongside server/client rendering patterns. This process targets and resolves bottlenecks to accelerate frontend development and ensure production-grade speed.

How do I manage client-side state in Next.js server components?▼

Manage client-side state in Next.js by integrating modern state-management patterns specifically within client components, while leveraging server components for optimized rendering. This separation ensures scalable and performant application architecture.

Does this approach support server actions and reusable UI components?▼

Yes, the approach fully supports server actions and reusable UI components across React 19+ and Next.js 15+ projects. It enforces component-driven UI development to accelerate frontend development while maintaining strict performance standards.

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

Use client components instead of server components when you need client-side state management or interactive UI behaviors. Reserve server components for static content and data fetching to ensure performance optimization across your React application.

Related Skills

Explore More Software Engineering Skills→
dthompsonfldthompsonfl

tailwind-css

Implement token-driven Tailwind CSS styling for Next.js 16 and React 19 App Router projects.

Community
Advanced
timurgaleevtimurgaleev
5

canary

Monitor post-deploy web apps for defects and performance regressions.

Community
Advanced
StevenWXYStevenWXY

zustand-state-management

Design type-safe Zustand stores with middleware for React and Electron apps.

Community
Advanced
marjan-ahmedmarjan-ahmed

frontend-designer

Provides guidance for building responsive Angular apps with lazy loading and RxJS-powered data access.

Community
Basic