Toolverse
All skills

lazy-load-suggester

by openclaw

Identify components that should be lazy loaded. Use when optimizing bundle size.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openclaw
Category
Frontend
Views
8

About this skill

Identify components that should be lazy loaded. Use when optimizing bundle size.

How to use

  1. Upewnij się, że masz zainstalowany Node.js w wersji 18 lub wyższej oraz ustawioną zmienną środowiskową OPENAI_API_KEY. 2. Przejdź do katalogu projektu, w którym chcesz analizować komponenty. 3. Uruchom narzędzie komendą npx ai-lazy-load ./src/, gdzie ./src/ to ścieżka do folderu z Twoimi komponentami. Narzędzie przeskanuje strukturę projektów i zależności między plikami. 4. Przejrzyj wyniki — narzędzie pokaże, które komponenty są ciężkie i nie są potrzebne przy pierwszym załadowaniu strony, oraz zasugeruje je jako kandydatów do lazy loadingu. 5. Skup się na komponentach poniżej linii widoku (modalne, wykresy, edytory), trasach i komponentach niekrytycznych dla ścieżki użytkownika. 6. Zastosuj sugerowane zmiany w kodzie, używając React.lazy() lub dynamicznych importów, aby zmniejszyć rozmiar bundla i poprawić wydajność aplikacji.

Related skills

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135