skills.rest
josipjelic
josipjelicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Guide React/Next.js UI implementation with accessibility and performance standards.

94|49|Updated Mar 25, 2026
Search Tags:#performance#accessibility#frontend#react#nextjs#ui-patterns#component-implementation
One-click install
npx skills add https://github.com/josipjelic/orchestrated-project-template --skill frontend-josipjelic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/josipjelic/orchestrated-project-template/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/josipjelic/orchestrated-project-template --skill frontend-josipjelic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when implementing or modifying UI components, pages, client-side state, styling, API integrations from the client side, or optimizing frontend performance. Invoke before creating any new React component, page, or layout.

Core Features & Use Cases

  • Server vs Client Component guidance for Next.js App Router to optimize rendering and bundling.
  • State Management decision matrix for choosing between React Query, useState, or Zustand.
  • Performance standards and best practices for accessibility, images, fonts, and bundle optimization.

Quick Start

Ask Claude Code to scaffold a new React page following the project's UI conventions.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I decide between server and client components in Next.js App Router?▼

Choosing between server and client components in Next.js App Router optimizes rendering and bundle size. Use server components for static content and data fetching, reserving client components for interactivity, state, or browser API access.

What is the best way to manage state in React: useState, Zustand, or React Query?▼

State management choices depend on data scope: useState handles local UI state, React Query manages server state and API integrations, and Zustand stores shared global state across multiple client components.

How do I optimize frontend performance and accessibility when building React components?▼

Optimizing frontend performance and accessibility requires enforcing best practices for component design, image and font loading, and bundle optimization to ensure fast rendering and inclusive UI patterns in Next.js and React apps.

Do I need to scaffold new React pages following specific UI conventions?▼

Scaffolding new React pages following UI conventions ensures reusable frontend patterns. You should invoke project standards before creating any new component, page, or layout to maintain consistency, accessibility, and performance.

When should I not use Next.js App Router for my React application?▼

You should avoid Next.js App Router when building simple static sites without server-side rendering needs or when an application requires complex client-side routing without server components, making traditional React frameworks more suitable.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
anolilabanolilab
214

react-doctor

Scan React codebases for security, performance, and correctness issues.

Official
Advanced
TheBushidoCollectiveTheBushidoCollective
187

zustand-advanced-patterns

Implement advanced Zustand patterns for managing complex React application state.

Official
Advanced
himaxxhimaxx
1

frontend-developer

Develop React and Next.js frontend applications with components, layouts, and state management.

Community
Advanced