optimize

Analyze Puree UI container counts, relayout frequency, and shader workload to identify performance bottlenecks.

20|2|Updated Oct 5, 2025

Search Tags:#performance #yaml #gpu #optimize #scss #puree-ui #relayout

Ready to run

npx skills add https://github.com/nicolaiprodromov/puree --skill optimize-nicolaiprodromov

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/nicolaiprodromov/puree/tree/main/puree/scaffold/.agents/skills/optimize
Command: npx skills add https://github.com/nicolaiprodromov/puree --skill optimize-nicolaiprodromov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies and mitigates performance bottlenecks in Puree UIs by analyzing container growth, relayout frequency, GPU shader workload, and asset usage, enabling faster responsive interfaces.

Core Features & Use Cases

Performance analysis: measures container count, mark_dirty() calls, image/font counts, and SCSS complexity to locate bottlenecks.
Optimization guidance: provides proven refactoring patterns for YAML tree flattening, container pruning, and selective transitions.
Validation & quick start: generates actionable steps and a one-shot starting command to bootstrap improvements in a given UI panel.

Quick Start

Describe the panel or component you want optimized, and I will generate a prioritized plan to reduce container count and relayouts.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I optimize Puree UI performance when dealing with large nested YAML trees?▼

To optimize Puree UI performance, you must analyze container counts and flatten deeply nested YAML trees. This reduces structural complexity and minimizes the processing overhead required to render large interface panels.

Why does frequent mark_dirty() usage cause UI relayouts and how can I fix it?▼

Frequent mark_dirty() calls trigger excessive relayouts by forcing the system to recalculate UI geometry repeatedly. You can fix this by pruning unnecessary containers and applying selective transitions to limit recalculations.

What is the best way to reduce GPU shader workload in a Puree UI application?▼

The best way to reduce GPU shader workload is to evaluate SCSS complexity and high asset or font usage. Analyzing these metrics locates rendering bottlenecks and guides targeted refactoring for faster responsiveness.

Can I get a step-by-step optimization plan for a slow Puree UI panel?▼

Yes, you can generate a step-by-step optimization plan by describing your slow Puree UI panel. The system outputs a prioritized plan with actionable steps and a one-shot starting command to bootstrap improvements.

Does optimizing Puree UI containers require sacrificing correctness or existing functionality?▼

Optimizing Puree UI containers does not require sacrificing correctness because the process enforces safe refactor patterns. This ensures that structural improvements maintain correctness while improving responsiveness.