skills.rest
hi-yuki-922
hi-yuki-922COMMUNITY
Explore all skills by this author →
WebsiteGitHub

i-optimize

Optimize UI performance by addressing Core Web Vitals and network bottlenecks.

1|Updated Jan 15, 2026
Search Tags:#performance#frontend#web vitals#optimization#rendering#animations#loading speed
One-click install
npx skills add https://github.com/hi-yuki-922/accounting-assistant --skill i-optimize-hi-yuki-922
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-optimize
Source: https://github.com/hi-yuki-922/accounting-assistant/tree/main/.claude/skills/i-optimize
Command: npx skills add https://github.com/hi-yuki-922/accounting-assistant --skill i-optimize-hi-yuki-922

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow loading times, janky animations, and large bundle sizes that degrade user experience, making applications feel sluggish and unresponsive.

Core Features & Use Cases

  • Performance Auditing: Identifies bottlenecks in loading, rendering, and animation.
  • Optimization Strategies: Provides actionable steps for image, script, CSS, and network optimization.
  • Core Web Vitals Improvement: Focuses on enhancing LCP, FID/INP, and CLS scores.
  • Use Case: Improve the perceived performance of a web application by reducing its JavaScript bundle size and optimizing image loading, leading to faster initial page loads and smoother interactions.

Quick Start

Use the i-optimize skill to improve the loading speed of the main dashboard page.

Frequently Asked Questions about i-optimize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve Core Web Vitals scores like LCP and CLS for my web application?▼

Improve Core Web Vitals by addressing loading speed, rendering, and layout shift bottlenecks. This involves implementing image compression, code splitting, lazy loading, and optimizing network requests to enhance LCP, FID/INP, and CLS metrics for a smoother user experience.

Why does my frontend user interface feel janky and unresponsive during animations?▼

Frontend animations feel janky when they cause rendering bottlenecks and aren't GPU-accelerated. Optimizing animations by leveraging GPU acceleration and reducing layout repaints ensures smoother rendering and a more responsive interface.

What is the best way to reduce a large JavaScript bundle size for faster initial page loads?▼

The best way to reduce JavaScript bundle size is through code splitting and lazy loading. These optimization strategies minimize the initial payload, significantly improving loading speed and the perceived performance of your web application.

Can I audit my web application to find what is causing slow loading speed?▼

Yes, you can perform a performance audit to identify bottlenecks in loading, rendering, and animations. This process isolates specific issues in images, scripts, CSS, and network requests that degrade your loading speed.

How do I optimize image loading to prevent slow page rendering?▼

Optimize image loading by applying image compression and lazy loading techniques. These strategies reduce network request payloads and defer off-screen image rendering, directly improving loading speed and Core Web Vitals.

Related Skills

Explore More Software Engineering Skills→
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
PatternsDevPatternsDev
235

tree-shaking

Eliminate dead code from JavaScript bundles using ES module imports.

Official
Intermediate
fableindigo-giffableindigo-gif

performance-analysis

Detects bottlenecks in Claude Flow swarms and generates optimization recommendations.

Community
Advanced