Does this skill support the latest React features?

Yes, it includes specialized support for React 19 patterns, Suspense boundaries, and modern data-fetching hooks like useSWR.

How does it handle browser compatibility?

It provides specific fixes for notorious Safari and iOS issues, such as dynamic viewport heights (dvh), ISO date formatting, and touch event listeners.

Does it assist with UI styling?

Yes, it promotes the use of Tailwind CSS with global variables and provides patterns for integrating shadcn/ui components effectively.

Is it optimized for Next.js?

Absolutely. It includes decision trees for Server vs. Client components and enforces the use of the App Router and next/navigation patterns.

How does it improve web performance?

The skill enforces parallelized async calls with Promise.all(), direct imports to avoid barrel file overhead, and lazy loading for heavy UI components.

Frontend Development Guidelines

Name: Frontend Development Guidelines
Author: Rylaa

byRylaa

•

Design Tools

Enforces senior-level React, TypeScript, and Next.js best practices to build high-performance, accessible, and browser-compatible web applications.

This skill equips Claude with senior frontend engineering expertise, providing standardized patterns for modern web development. It focuses on a performance-first architecture using React 19 patterns, Suspense, and SWR, while enforcing strict accessibility (a11y) standards and ensuring specific Safari/iOS compatibility. By identifying and rejecting common anti-patterns like sequential awaits and barrel imports, it helps developers build scalable, production-grade applications using the Next.js App Router, Tailwind CSS, and shadcn/ui components.

Key Features

012 GitHub stars

02Provides critical fixes for Safari and mobile browser compatibility issues

03Enforces WCAG 2.1 accessibility compliance and ARIA standards

04Guides feature-based directory organization and shadcn/ui implementation

05Standardizes React/TypeScript patterns with useSWR and Suspense integration

06Optimizes performance through parallel async operations and dynamic imports

Use Cases

01Building high-performance Next.js App Router applications from scratch

02Auditing frontend code for accessibility and cross-browser responsiveness

03Refactoring legacy React code to improve bundle size and rendering efficiency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rylaa/claude-agent-workflows frontend-dev-guidelines

For use in Claude.ai and ChatGPT

Download Skill