AgentSkillsCN

modern-web-performance

高性能Web工程实践。

SKILL.md
--- frontmatter
name: modern-web-performance
description: High-Performance Web Engineering.
category: performance
version: 4.1.0-fractal
layer: master-skill

⚡ High-Performance Web Engineering

Source: Vercel Best Practices / Anthony Fu (Antfu) Engineering Standards

This skill focuses on "Elite-Level" web development: speed, zero-config DX, and scalable architecture.

🚀 1. The Vercel Way (Modern Stack)

  • •Edge-First Thinking: Prioritize logic that runs on the Edge (Middleware, Edge Functions) to reduce TTFB.
  • •Incremental Static Regeneration (ISR): Update static content without a full rebuild.
  • •Server Component Patterns: Minimize client-side JS. Use use server sparingly and only where needed.

🛠️ 2. Antfu-Grade Developer Experience (DX)

  • •Zero-Config Philosophy: Use modern tools like Vite, Vitest, and ESLint (flat config) to minimize boilerplate.
  • •Composable Logic: Build small, single-responsibility functions (Vue Composables or React Hooks) that are highly unit-testable.
  • •Type-Safety Everywhere: No any. Use Zod for runtime validation and strict TS configs.

📦 3. Monorepo & Scalability

  • •Turborepo Master: Manage multi-package projects with intelligent caching and parallel execution.
  • •Shared UI Libraries: Split the UI into a separate package within the monorepo for reuse across Web/Mobile.
  • •Package Modernization: Migrate from CJS to ESM. Ensure package.json exports are correctly defined.

🧪 4. Performance Auditing

  • •Core Web Vitals: Monitor LCP, FID, and CLS. Chasing "100" on PageSpeed Insights is the goal.
  • •Bundle Analysis: Use tools to find and remove "heavy" dependencies.
  • •Preload/Prefetch Strategies: Optimize asset loading for critical paths.

Created by Antigravity Orchestrator - Powered by Elite Web Ecosystem Wisdom.