Agent skill
modern-web-performance
High-Performance Web Engineering.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/modern-web-performance
SKILL.md
⚡ 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 serversparingly and only where needed.
🛠️ 2. Antfu-Grade Developer Experience (DX)
- Zero-Config Philosophy: Use modern tools like
Vite,Vitest, andESLint (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.jsonexports 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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?