Toolverse
All skills
Frontend

perf-astro

by tech-leads-club

Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Triggers on: astro performance, astro lighthouse, astro optimization, astro-critters.

Installation

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

Installation

Quick info

Author
tech-leads-club
Category
Frontend
Views
32
GitHub repo

About this skill

Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Triggers on: astro performance, astro lighthouse, astro optimization, astro-critters.

How to use

  1. Zainstaluj wymagane pakiety: npm install astro-critters @playform/compress. 2. Otwórz plik astro.config.mjs i dodaj importy: import critters from 'astro-critters' oraz import compress from '@playform/compress'. 3. Zarejestruj oba integracje w konfiguracji: critters() automatycznie wyodrębni i wbuduje CSS powyżej linii widoku, a compress() zminifikuje HTML, CSS i JavaScript w finalnym buildie. 4. Skonfiguruj opcje compress() — ustaw CSS, HTML i JavaScript na true, a Image i SVG na false, jeśli używasz zewnętrznej optymalizacji obrazów. 5. Uruchom build: npm run build. Sprawdź logi, aby zobaczyć, ile CSS zostało wbudowane (np. 40.70 kB z 50.50 kB). 6. Uruchom audit Lighthouse, aby potwierdzić osiągnięcie wyników 95+.

Related skills

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

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

bubbletea

by hmans

Browse Bubbletea TUI framework documentation and examples. Use when working with Bubbletea components, models, commands, or building terminal user interfaces in Go.

Frontend
2158

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

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656