frontend-development_skill

Overview

This skill provides practical guidance and actionable patterns for building modern frontend applications across React, Vue 3, Svelte 5, and Angular. It focuses on component and feature structure, TypeScript standards, routing, data fetching, state management, and performance optimization. Use it to create, refactor, or optimize components, pages, and full features with framework-specific best practices.

How this skill works

The skill inspects common frontend tasks and prescribes concrete patterns: component checklists, feature folder layouts, import aliases, and data-fetching strategies (for example useSuspenseQuery or SvelteKit load). It recommends framework idioms—hooks for React, Composition API/Pinia for Vue, runes and SvelteKit for Svelte, and signals/standalone components for Angular—and gives performance and TypeScript rules that apply across frameworks. Actionable steps include lazy loading, Suspense boundaries, API service layers, and cache invalidation patterns.

When to use it

• Creating new components or pages in React, Vue, Svelte, or Angular
• Building a new feature with a clear folder and API service structure
• Implementing or improving state management (Pinia, Zustand, stores, signals)
• Setting up routing and lazy-loaded routes (TanStack Router, Vue Router, SvelteKit, Angular Router)
• Implementing data fetching and caching (TanStack Query, composables, load functions)
• Optimizing performance, bundle size, and CLS prevention

Best practices

• Use TypeScript strict mode, explicit return types, and avoid any for safety
• Lazy load heavy components and lazy-load routes; wrap in Suspense or equivalent to avoid layout shifts
• Organize features with api/, components/, hooks/, helpers/, types/ subfolders and export a public index
• Prefer framework idioms: hooks/composables/runes/signals and framework-native routing patterns
• Keep components small and focused; use memoization (useMemo/useCallback/derived values) for expensive work
• Choose styles by size: inline/sx for <100 lines, separate style files for larger components

Example use cases

• Create a lazily loaded React feature using useSuspenseQuery, SuspenseLoader, and a feature-level API client
• Migrate a Vue component to Composition API with Pinia state and a composable for data fetching
• Build a small SvelteKit page using runes for reactivity and a load function for server-side data
• Implement an Angular standalone component with signals, OnPush change detection, and a service-based API layer
• Refactor a large component into smaller presentational units and a feature folder with types, hooks, and helpers