Which frontend frameworks are supported by this skill?

The skill provides specific patterns and snippets for React, Vue 3 (Composition API), Svelte 5 (Runes), and Angular (Signals).

Does it provide guidance on data fetching?

It implements a standardized pattern that explicitly handles loading, error, and data states to prevent UI flickering and race conditions.

How does this skill handle state management?

It categorizes state into three tiers: local component state, shared cross-component state (like Context or Stores), and server state for API data.

What anti-patterns does this skill prevent?

It actively discourages prop drilling, mixing business logic with UI components, direct DOM manipulation, and the use of inline styles.

Can this skill help with performance optimization?

Yes, it includes a checklist for lazy loading, memoization, list virtualization, and image optimization to ensure fast user interfaces.

Frontend Architecture Patterns

Name: Frontend Architecture Patterns
Author: jay05410

byjay05410

0•

设计工具

Implements industry-standard architectural patterns and best practices for modern frontend frameworks including React, Vue, Svelte, and Angular.

This skill equips Claude with a comprehensive knowledge base of modern frontend development patterns to ensure high-quality UI architecture. It provides standardized strategies for component composition, multi-tier state management, and efficient data fetching across major frameworks like React, Vue 3, Svelte 5, and Angular. By enforcing performance checklists and identifying common anti-patterns like prop drilling or direct DOM manipulation, the skill helps developers maintain clean, scalable, and performant codebases while leveraging the latest framework features like Signals and Runes.

主要功能

01Framework-specific implementation guides for React Hooks, Vue Composition API, and Svelte Runes.

020 GitHub stars

03Multi-tier state management strategies for local, shared, and server-side data.

04Anti-pattern detection to prevent business logic leakage and improper DOM access.

05Standardized data fetching patterns with built-in loading and error handling.

06Automated performance optimization checklists including virtualization and lazy loading.

使用场景

01Refactoring complex, monolithic components into modular and reusable UI elements.

02Setting up robust data fetching layers using TanStack Query or framework-native equivalents.

03Implementing modern state management architectures in greenfield projects.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jay05410/compose-claudecode frontend-patterns

For use in Claude.ai and ChatGPT

Download Skill