Toolverse
All skills

core-vitals-fixer

by openclaw

Fix Core Web Vitals issues with AI guidance. Use when your Lighthouse scores are bad.

Installation

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

Installation

Quick info

Author
openclaw
Category
Frontend
Views
2

About this skill

Fix Core Web Vitals issues with AI guidance. Use when your Lighthouse scores are bad.

How to use

  1. Upewnij się, że masz zainstalowany Node.js 18 lub nowszy oraz ustawioną zmienną środowiskową OPENAI_API_KEY z Twoim kluczem dostępu do OpenAI.

  2. Przejdź do katalogu projektu i uruchom narzędzie poleceniem npx ai-core-vitals ./src/, zastępując ./src/ ścieżką do folderu z kodem, który chcesz przeanalizować (np. ./app/ dla aplikacji Next.js).

  3. Narzędzie automatycznie skanuje pliki w podanym katalogu, szukając typowych problemów wydajności, a następnie wysyła wyniki do GPT-4o-mini w celu analizy.

  4. Otrzymasz raport z zidentyfikowanymi problemami wpływającymi na LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) i FID (First Input Delay), posortowanymi według wpływu na wydajność.

  5. Przeczytaj rekomendacje i zacznij od naprawy LCP — zwykle daje największą poprawę. Zastosuj sugerowane zmiany w kodzie, takie jak lazy loading treści poniżej widoku, rezerwacja przestrzeni dla obrazów czy odroczenie nieistotnego JavaScriptu.

  6. Jeśli chcesz skupić się na konkretnej metryce, dodaj flagę --metric, na przykład npx ai-core-vitals ./src/ --metric lcp, aby otrzymać bardziej ukierunkowaną analizę.

Related skills

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

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

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