Toolverse
All skills

popup-cro

by davila7

When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions \

Installation

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

Installation

Quick info

Author
davila7
Category
Frontend
Views
37

About this skill

When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions \

How to use

  1. Określ cel popupa: czy chcesz zbierać adresy email, promować rabat, wyświetlić ogłoszenie, złapać użytkownika przed wyjściem ze strony, czy zebrać opinię. Każdy cel wymaga innego podejścia.

  2. Przeanalizuj obecną sytuację: jeśli popup już istnieje, sprawdź jego wydajność, jakie triggery są używane, czy użytkownicy narzekają i jak wygląda na urządzeniach mobilnych. Jeśli to nowy popup, zbierz informacje o źródłach ruchu (płatny, organiczny, bezpośredni) i typach odwiedzających (nowi czy powracający).

  3. Wybierz strategię wyzwalania popupa. Dla ogólnych odwiedzających strony użyj opóźnienia czasowego 30-60 sekund (lepsze niż 5 sekund). Dla treści długoformatowych (blogi) zastosuj scroll-based trigger na głębokości 25-50%. Dla e-commerce i generowania leadów użyj exit intent, który wykrywa ruch kursora w kierunku zamknięcia.

  4. Zaprojektuj jasną wartość: upewnij się, że korzyść z popupa jest oczywista i natychmiast widoczna, a oferta jest istotna dla kontekstu strony. Użytkownik musi zrozumieć, dlaczego warto przerwać swoją aktywność.

  5. Zadbaj o doświadczenie użytkownika: popup musi być łatwy do zamknięcia, nie może zawierać pułapek ani sztuczek, powinien zapamiętywać preferencje użytkownika i nie może zniszczyć ogólnego wrażenia z witryny.

  6. Testuj i dostosowuj na podstawie danych: monitoruj wydajność popupa, zbieraj feedback od użytkowników i iteruj strategie wyzwalania oraz treść w zależności od wyników.

Related skills

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196

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

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

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

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

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