web-design-reviewer

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like \

1. Upewnij się, że Twoja strona internetowa jest uruchomiona lokalnie (np. http://localhost:3000), na środowisku testowym lub produkcyjnym. Umiejętność wymaga dostępu do działającego serwera oraz możliwości automatyzacji przeglądarki (zrzuty ekranu, nawigacja, pobieranie informacji z DOM).

2. Jeśli chcesz naprawiać problemy, upewnij się, że kod źródłowy projektu jest dostępny w Twojej przestrzeni roboczej. Przygotuj informacje o używanym frameworku (React, Vue, Next.js itp.) i metodzie stylowania (CSS, SCSS, Tailwind, CSS-in-JS).

3. Poproś umiejętność o przegląd, używając poleceń takich jak "przejrzyj projekt strony", "sprawdź interfejs", "napraw layout" lub "znajdź problemy projektowe". Podaj URL strony, którą chcesz przeanalizować.

4. Umiejętność przeprowadzi inspekcję wizualną, identyfikując problemy z responsywnością, dostępnością, spójnością wizualną i złamaniami layoutu. Wyświetli zrzuty ekranu i szczegóły znalezionych problemów.

5. Na podstawie zidentyfikowanych problemów umiejętność zaproponuje i zastosuje poprawki bezpośrednio w kodzie źródłowym. Po naprawie ponownie zweryfikuje stronę, aby potwierdzić rozwiązanie.

6. Jeśli pozostaną problemy, proces powtórzy się automatycznie. Po zakończeniu otrzymasz raport z podsumowaniem wszystkich znalezionych i naprawionych problemów.