Does this skill work with existing React projects?

Absolutely. It can analyze existing codebases to suggest refactoring patterns for better state management, performance, and maintenance.

What is the 'UI as Computation' model?

It is a design philosophy where components are treated as units that calculate the UI based on state, focusing on predictable data flows and minimal, colocated state.

Can it help improve my site's Core Web Vitals?

Yes, the skill prioritizes architectural decisions that directly impact LCP, INP, and CLS, such as optimizing JS delivery, asset loading, and rendering strategies.

How does this skill help with Next.js App Router?

It provides specific guidance on managing Server and Client component boundaries, ensuring that data fetching and logic are placed efficiently to minimize client-side overhead.

React UI & Next.js Architecture

Name: React UI & Next.js Architecture
Author: mae616

bymae616

•

デザインツール

Architects and optimizes high-performance React and Next.js applications using computation-based UI modeling and strategic rendering patterns.

This skill empowers Claude to function as a senior React architect by treating UI as a computation of state rather than just visual components. It provides specialized guidance for React and Next.js projects, focusing on the App Router's Server and Client component boundaries, state minimization, and performance optimization for Core Web Vitals like LCP and INP. By following a structured approach to component design and data flow, it helps developers build maintainable, scalable frontends while avoiding common pitfalls like state lifting abuse or excessive client-side JavaScript delivery.

主な機能

01Next.js App Router optimization for Server and Client components

02Strategic rendering selection including SSR, CSR, SSG, and Streaming

03Performance-first architecture targeting LCP, INP, and CLS metrics

04Computation-driven UI component design and boundary definition

05Minimalist state management and derived data flow analysis

068 GitHub stars

ユースケース

01Architecting the data fetching and rendering strategy for high-traffic Next.js applications.

02Refactoring complex React components into granular units with clear computational responsibilities.

03Diagnosing and fixing performance bottlenecks related to re-renders and large JS bundles.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mae616/ai-template react

For use in Claude.ai and ChatGPT