responsive-maker
Automatycznie dostosuj komponenty do każdego rozmiaru ekranu bez ręcznego pisania media queries.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Responsive Maker to narzędzie, które przekształca komponenty zaprojektowane na desktop w responsywne interfejsy działające na telefonach i tabletach. Analizuje strukturę Twojego kodu, dodaje media queries, dostosowuje flexbox i skaluje typografię — wszystko w jednej komendzie. Nie wymaga konfiguracji ani API keys. Idealne, gdy Twoja strona wygląda świetnie na komputerze, ale rozpada się na urządzeniach mobilnych.
Jak używać
Upewnij się, że masz zainstalowany Node.js w wersji 18 lub nowszej. Responsive Maker nie wymaga instalacji — uruchamiasz go bezpośrednio przez npx.
Przejdź do katalogu projektu zawierającego komponenty, które chcesz uczynić responsywnymi.
Uruchom narzędzie na wybranym pliku komponentu, na przykład: npx ai-responsive src/components/Hero.tsx. Narzędzie przeanalizuje strukturę komponentu i automatycznie doda breakpointy responsywne.
Możesz również przetwarzać wiele plików naraz, podając ścieżkę do całego katalogu: npx ai-responsive src/components/ lub używając wzorca: npx ai-responsive "src/**/*.tsx".
Sprawdź wygenerowany kod — narzędzie zachowuje Twoje istniejące style i dodaje warstwy responsywne z media queries lub prefiksami Tailwind.
Przetestuj komponenty na rzeczywistych urządzeniach mobilnych, aby upewnić się, że layout, typografia i spacing działają prawidłowo na każdym rozmiarze ekranu.