skills.rest
Postalocity
PostalocityOFFICIAL
Explore all skills by this author →
GitHub

optimize

Diagnose and fix UI performance issues in web applications.

1|Updated Mar 5, 2026
Search Tags:#ui#performance#optimize#web#loading#core-web-vitals
One-click install
npx skills add https://github.com/Postalocity/template-microsite --skill optimize-postalocity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Postalocity/template-microsite/tree/main/.opencode/skills/impeccable--optimize
Command: npx skills add https://github.com/Postalocity/template-microsite --skill optimize-postalocity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues to create faster, smoother user experiences.

Core Features & Use Cases

  • Loading optimization: optimize loading of assets, fonts, and critical resources; apply code splitting and lazy loading to reduce initial payload.
  • Rendering & animation efficiency: minimize layout thrashing, promote GPU-accelerated animations, and use contain and will-change strategically.
  • Bundle & asset management: reduce JavaScript/CSS bundle size via pruning, minification, and intelligent cache strategies.
  • Use cases: web apps, dashboards, and SPAs that require faster interactive performance and better Core Web Vitals.

Quick Start

Analyze your project with a performance profiler and apply the recommended optimization steps to a representative page.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I optimize web application loading speed and reduce initial bundle size?▼

To optimize web application loading speed, you can apply code splitting and lazy loading to reduce the initial payload. This workflow also targets asset minification and intelligent cache strategies to shrink JavaScript and CSS bundles.

What is the best way to fix rendering issues and layout thrashing in a dashboard?▼

Fixing rendering issues and layout thrashing involves minimizing DOM reflows and promoting GPU-accelerated animations. The workflow uses contain and will-change strategically to ensure smoother rendering in complex dashboards and SPAs.

Can I use this workflow to improve Core Web Vitals for my single page application?▼

Yes, you can improve Core Web Vitals for single page applications using this workflow. It defines an end-to-end optimization process with measurable before and after metrics to ensure faster interactive performance.

How do I apply incremental performance improvements without breaking my UI?▼

You apply incremental performance improvements by following the defined guardrails within the optimization workflow. These guardrails ensure safe, measurable before and after enhancements to your loading speed and rendering efficiency.

Why does my web app have slow loading times and how do I diagnose it?▼

Slow loading times in web apps are diagnosed by analyzing your project with a performance profiler. This identifies bottlenecks in critical resource loading, fonts, and bundle size to establish a baseline for optimization.

Related Skills

Explore More Software Engineering Skills→
tripathishashikanttripathishashikant

optimize

Diagnose and fix UI performance bottlenecks in web applications.

Community
Advanced
ShmurdocShmurdoc

benchmark

Compare web performance metrics against baselines to detect regressions.

Community
Advanced
hughescrhughescr
1

hugo-asset-pipeline

Automate Hugo asset processing with Hugo Pipes for SCSS, JS, and images.

Community
Advanced
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate