How does it improve Core Web Vitals?

It reduces initial page weight and improves Largest Contentful Paint (LCP) by ensuring only visible or critical resources are loaded immediately.

Does it handle accessibility during loading states?

Yes, the skill follows best practices to ensure that lazy-loaded elements include appropriate ARIA attributes and maintain layout stability to prevent shifts.

Can it help with asset-heavy sites?

Absolutely. It specializes in deferring off-screen images, videos, and heavy third-party scripts to optimize the initial user experience.

Which frontend frameworks are supported?

The skill provides patterns and code generation for major frameworks like React and Vue, as well as vanilla JavaScript and CSS implementations.

Lazy Loading Implementer

Name: Lazy Loading Implementer
Author: micsapp

bymicsapp

0•

デザインツール

Optimizes web application performance by automatically implementing lazy loading patterns for components, images, and heavy assets.

The Lazy Loading Implementer is a specialized skill for Claude Code designed to enhance frontend performance by automating the integration of lazy loading strategies. It assists developers in implementing deferred loading for images, React/Vue components, and modules using industry-standard patterns like the Intersection Observer API or framework-specific utilities. By optimizing resource delivery, this skill helps improve Core Web Vitals, reduce initial page load times, and minimize bandwidth consumption while ensuring that accessibility and user experience remain top priorities.

主な機能

01Optimized image loading configurations using native loading attributes

02Accessibility validation for loading states and skeleton placeholders

03Intersection Observer integration for custom lazy-loaded elements

04Automated implementation of React.lazy and Suspense patterns

050 GitHub stars

06Framework-agnostic guidance for performance-driven asset management

ユースケース

01Implementing infinite scroll or deferred component loading to save client-side resources

02Setting up route-based code splitting in large-scale single-page applications

03Improving Largest Contentful Paint (LCP) scores for image-heavy landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills lazy-loading-implementer

For use in Claude.ai and ChatGPT

主な機能

01Optimized image loading configurations using native loading attributes

02Accessibility validation for loading states and skeleton placeholders

03Intersection Observer integration for custom lazy-loaded elements

04Automated implementation of React.lazy and Suspense patterns

050 GitHub stars

06Framework-agnostic guidance for performance-driven asset management

ユースケース

01Implementing infinite scroll or deferred component loading to save client-side resources

02Setting up route-based code splitting in large-scale single-page applications

03Improving Largest Contentful Paint (LCP) scores for image-heavy landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills lazy-loading-implementer

For use in Claude.ai and ChatGPT