frontend-developer

Develop and optimize React 19 and Next.js 15+ frontend applications.

4|20|Updated Sep 27, 2025
One-click install
npx skills add https://github.com/tan-yong-sheng/cloudflare-image-mcp --skill frontend-developer-tan-yong-sheng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/tan-yong-sheng/cloudflare-image-mcp/tree/main/.claude/skills/frontend-developer
Command: npx skills add https://github.com/tan-yong-sheng/cloudflare-image-mcp --skill frontend-developer-tan-yong-sheng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and optimization of modern web interfaces using React and Next.js, addressing challenges in component development, state management, and performance.

Core Features & Use Cases

  • React Component Development: Build reusable UI components with React 19 and modern patterns.
  • Next.js Integration: Leverage App Router, Server Components, and Server Actions for full-stack applications.
  • Performance & Accessibility: Optimize for speed, responsiveness, and inclusive design.
  • Use Case: Develop a complex dashboard with interactive charts and real-time data updates, ensuring a smooth user experience and accessibility compliance.

Quick Start

Build a React component for a user profile card with a placeholder image and basic styling.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I build React components with Next.js Server Components?

To build React components with Next.js Server Components, leverage the App Router to fetch data directly on the server and pass it to client components, optimizing performance and scalability for modern web interfaces.

How do I optimize React and Next.js application performance?

Optimize React and Next.js application performance by utilizing Server Components to reduce client-side JavaScript, implementing modern state management, and applying web performance best practices for speed and responsiveness.

What is the best way to manage state in React 19 and Next.js 15?

The best way to manage state in React 19 and Next.js 15 involves combining advanced state management libraries with Server Actions for full-stack integration, ensuring scalable user interfaces and performant data updates.

Can I use Next.js Server Actions for complex dashboard data updates?

Yes, you can use Next.js Server Actions for complex dashboard data updates. They enable full-stack integration, allowing interactive charts and real-time data mutates to process securely without manual API endpoints.

Does this approach to React UI development support accessibility compliance?

Yes, modern React UI development supports accessibility compliance by implementing inclusive design principles, ensuring scalable user interfaces are navigable and responsive for all users interacting with your web application.

When should I not use Next.js Server Components for web performance?

You should not use Next.js Server Components when a component relies heavily on immediate client-side interactivity without server data, as forcing server rendering here adds complexity without improving web performance.