Does it support modern data fetching libraries?

Yes, it focuses on TanStack Query (React/Vue), SvelteKit load functions, and Angular's HttpClient with RxJS/Signals.

How does this skill improve web performance?

It enforces strict lazy loading for heavy components, promotes code splitting, and implements 'No Early Return' patterns to prevent Cumulative Layout Shift (CLS).

Is Material UI (MUI) support included?

The skill specifically includes patterns for MUI v7, including the new Grid syntax and type-safe SxProps styling.

Which frameworks does the Frontend Development skill support?

The skill provides specialized guidance for React 18+, Vue 3 (Composition API), Svelte 5 (Runes), and Angular (Signals).

Can it help with project organization?

Absolutely. It defines a standardized 'features/' vs 'components/' directory structure to keep domain logic separated from reusable UI elements.

Frontend Development & Architecture

Name: Frontend Development & Architecture
Author: samhvw8

bysamhvw8

•

Design Tools

Implements production-grade frontend interfaces across React, Vue, Svelte, and Angular using modern performance patterns and state management.

This skill equips Claude with expert-level guidance for modern frontend engineering across all major frameworks. It provides deep technical patterns for React 18+ (Suspense, TanStack), Vue 3 (Composition API, Pinia), Svelte 5 (Runes), and Angular (Signals). By enforcing strict TypeScript standards, lazy-loading strategies, and specific UI patterns like MUI v7, it ensures that generated code is scalable, performant, and follows a domain-driven file organization that minimizes layout shifts and maximizes maintainability.

Key Features

01Type-safe component development with standardized TypeScript interfaces

021 GitHub stars

03Comprehensive support for React, Vue 3, Svelte 5, and Angular

04Advanced state management patterns including Signals, Pinia, and TanStack Query

05Modern routing implementations using TanStack Router and framework-specific kits

06Strict performance optimization with lazy loading and 'No Early Returns' rules

Use Cases

01Optimizing Core Web Vitals through code splitting and Suspense-driven loading states

02Architecting scalable feature-based folder structures for enterprise applications

03Standardizing UI components using Material UI v7 and type-safe styling patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samhvw8/dot-claude frontend-development

For use in Claude.ai and ChatGPT

Download Skill