frontend-development

Front-end Page Development

Feature Description

This skill is specifically for front-end Web development, including:

Modern front-end framework development (React, Vue, Angular)
Responsive page layout
Interactive feature implementation
State management
Performance optimization
Front-end engineering

Use Cases

"Create a React login page"
"Implement a responsive navigation bar"
"Optimize page loading performance"
"Integrate third-party APIs"
"Implement dark mode switching"
"Create a reusable UI component library"

Tech Stack

Core Frameworks

React: Componentization, Hooks, Context
Vue: Reactivity, Composition API, Pinia
Angular: TypeScript, Dependency Injection, RxJS
Next.js：SSR、SSG、API Routes
Nuxt.js: Vue SSR framework

UI Frameworks

Tailwind CSS: Utility-first CSS framework
Material-UI：React Material Design
Ant Design: Enterprise-level UI component library
Element Plus: Vue 3 component library
Chakra UI: Accessible component system

State Management

Redux: Predictable state container
Zustand: Lightweight state management
Pinia: Vue state management
MobX: Reactive state management
Jotai: Atomic state management

Build Tools

Vite: Next-generation front-end build tool
Webpack: Module bundler
Turbopack: Rust-powered bundler
esbuild: Extremely fast JavaScript bundler

Development Workflow

Project Initialization

Create Project: Use scaffolding tools
Configure Environment：ESLint、Prettier、TypeScript
Directory Structure: Organize code files
Dependency Installation: Install necessary packages
Git Initialization: Version control setup

Development Process

Requirements Analysis: Understand functional requirements
Component Design: Break down component structure
Style Development: Implement UI design
Feature Implementation: Write business logic
Testing and Verification: Unit testing and integration testing
Code Review: Team Code Review
Deployment and Release: Build and release

Best Practices

Code Organization

src/
├── components/       # 可复用组件
│   ├── Button/
│   ├── Input/
│   └── Modal/
├── pages/           # 页面组件
│   ├── Home/
│   ├── Login/
│   └── Dashboard/
├── hooks/           # 自定义 Hooks
├── utils/           # 工具函数
├── services/        # API 服务
├── store/           # 状态管理
├── styles/          # 全局样式
├── types/           # TypeScript 类型
└── constants/       # 常量定义

Component Design Principles

Single Responsibility: A component does only one thing
Reusability: Design general-purpose components
Composability: Small components compose into large components
Props Validation: Use TypeScript or PropTypes
Default Values: Provide reasonable default properties

Performance Optimization

Code Splitting: Dynamic imports and lazy loading
Virtual Scrolling: Handle large lists
Debouncing and Throttling: Optimize event handling
Memoization: Avoid unnecessary re-renders
Image optimization: Lazy loading, WebP format
Caching strategy: Use caching appropriately

Accessibility

Semantic HTML: Use correct tags
Keyboard navigation: Support keyboard operation
ARIA attributes: Assistive technology support
Contrast: Ensure text readability
Focus management: Clear focus indication

Code examples

React component example

import React, { useState } from 'react';
import styled from 'styled-components';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

const StyledButton = styled.button<ButtonProps>`
  padding: ${props => {
    switch (props.size) {
      case 'small': return '8px 16px';
      case 'large': return '16px 32px';
      default: return '12px 24px';
    }
  }};
  background: ${props =>
    props.variant === 'primary' ? '#2196F3' : '#757575'
  };
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-2px);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  disabled = false,
  onClick,
  children
}) => {
  return (
    <StyledButton
      variant={variant}
      size={size}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

Vue component example

<template>
  <button
    :class="buttonClasses"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'medium',
  disabled: false
});

const emit = defineEmits<{
  click: [];
}>();

const buttonClasses = computed(() => [
  'btn',
  `btn-${props.variant}`,
  `btn-${props.size}`,
  { 'btn-disabled': props.disabled }
]);

const handleClick = () => {
  if (!props.disabled) {
    emit('click');
  }
};
</script>

<style scoped>
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: #2196F3;
  color: white;
}

.btn-secondary {
  background: #757575;
  color: white;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn:hover:not(.btn-disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

Custom Hook example

import { useState, useEffect } from 'react';

interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null
  });

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        setState(prev => ({ ...prev, loading: true }));
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        if (!cancelled) {
          setState({ data, loading: false, error: null });
        }
      } catch (error) {
        if (!cancelled) {
          setState({
            data: null,
            loading: false,
            error: error as Error
          });
        }
      }
    };

    fetchData();

    return () => {
      cancelled = true;
    };
  }, [url]);

  return state;
}

State management example (Zustand)

import create from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  login: (user: User, token: string) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      isAuthenticated: false,
      login: (user, token) =>
        set({ user, token, isAuthenticated: true }),
      logout: () =>
        set({ user: null, token: null, isAuthenticated: false })
    }),
    {
      name: 'auth-storage'
    }
  )
);

Responsive design

Breakpoint system

/* Mobile First */
/* Mobile: 默认样式 */
.container {
  padding: 16px;
}

/* Tablet: >= 768px */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* Desktop: >= 1024px */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Large Desktop: >= 1440px */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

Flexbox layout

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

Grid layout

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

Testing strategy

Unit testing (Jest + React Testing Library)

import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByText('Click me')).toBeDisabled();
  });
});

E2E testing (Playwright)

import { test, expect } from '@playwright/test';

test('user can login', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL('http://localhost:3000/dashboard');
  await expect(page.locator('h1')).toContainText('Dashboard');
});

Deployment and optimization

Build optimization

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material']
        }
      }
    },
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
});

Environment variables

# .env.production
VITE_API_URL=https://api.production.com
VITE_APP_NAME=My App

Notes

Follow team code standards
Write clear comments and documentation
Consider browser compatibility
Pay attention to security issues (XSS, CSRF)
Optimize first-screen load time
Implement error boundaries and fallback solutions
Use TypeScript to improve code quality

About this skill

Feature Description

Use Cases

Tech Stack

Core Frameworks

UI Frameworks

State Management

Build Tools

Development Workflow

Project Initialization

Development Process

Best Practices

Code Organization

Component Design Principles

Performance Optimization

Accessibility

Code examples

React component example

Vue component example

Custom Hook example

State management example (Zustand)

Responsive design

Breakpoint system

Flexbox layout

Grid layout

Testing strategy

Unit testing (Jest + React Testing Library)

E2E testing (Playwright)

Deployment and optimization

Build optimization

Environment variables

Notes