Frontend Development Skill

Comprehensive frontend development guidance for modern web applications.

Activation Context

This skill activates during:

• Component development (React/Vue/Next.js)
• Performance optimization discussions
• UI/UX design system implementation
• Accessibility (a11y) improvements
• Frontend code reviews

Resources

Component Development Workflow

1. Component Design

Before writing code, determine:

• Component responsibility (single purpose)
• Props interface (TypeScript types)
• State management approach (local vs global)
• Accessibility requirements

2. Framework-Specific Patterns

React Component:

// Use functional components with hooks
// Memoize expensive computations
// Extract custom hooks for reusable logic
// See references/react-patterns.md for details

Vue Component:

<!-- Use Composition API with <script setup> -->
<!-- Leverage computed for derived state -->
<!-- Use defineProps/defineEmits for type safety -->
<!-- See references/vue-patterns.md for details -->

Next.js Page:

// Prefer Server Components by default
// Use 'use client' only when needed
// Implement loading.tsx and error.tsx
// See references/nextjs-patterns.md for details

3. Quality Checklist

Before completing a component:

• TypeScript types defined
• Accessibility attributes (aria-*, role)
• Keyboard navigation support
• Error and loading states handled
• Unit tests written
• Performance optimized (memoization, lazy loading)

Performance Optimization

Core Web Vitals Targets

Quick Wins

1. Image Optimization

   • Use next/image or responsive images
   • Implement lazy loading
   • Serve WebP/AVIF formats

2. Code Splitting

   • Dynamic imports for routes
   • Lazy load heavy components
   • Tree-shake unused code

3. Render Optimization

   • React: useMemo, useCallback, React.memo
   • Vue: computed, shallowRef, v-once
   • Avoid layout thrashing

Performance Audit

Run the audit script for detailed analysis:

python scripts/performance_audit.py <component-path>

Accessibility (a11y)

WCAG 2.1 Quick Reference

1. Perceivable

   • Alt text for images
   • Sufficient color contrast (4.5:1)
   • Captions for media

2. Operable

   • Keyboard navigable
   • Focus indicators visible
   • No keyboard traps

3. Understandable

   • Clear error messages
   • Consistent navigation
   • Input assistance

4. Robust

   • Valid HTML
   • ARIA used correctly
   • Works with assistive tech

Common Patterns

// Accessible button
<button
  aria-label="Close dialog"
  aria-pressed={isPressed}
  onClick={handleClick}
>
  <CloseIcon aria-hidden="true" />
</button>

// Accessible form field
<label htmlFor="email">Email</label>
<input
  id="email"
  type="email"
  aria-describedby="email-error"
  aria-invalid={hasError}
/>
{hasError && <span id="email-error" role="alert">{error}</span>}

Component Templates

Quick-start templates available in assets/templates/:

Copy and customize templates for rapid development.

Code Review Checklist

When reviewing frontend code:

Structure

• Single responsibility principle
• Proper component decomposition
• Clean imports organization

Performance

• No unnecessary re-renders
• Proper memoization
• Optimized bundle size

Accessibility

• Semantic HTML
• ARIA attributes where needed
• Keyboard support

Type Safety

• Props properly typed
• No any types
• Null checks handled

Output Format

Claude responds in Chinese per CLAUDE.md.

Frontend Analysis Report
========================

Component: {component_name}
Framework: {React/Vue/Next.js}

Issues Found:
- {specific issue description}

Optimization Suggestions:
1. {suggestion 1}
2. {suggestion 2}

Performance Impact:
- LCP: {estimated impact}
- INP: {estimated impact}

========================