web-design-reviewer

Umiejętność wizualnej inspekcji witryn działających lokalnie lub zdalnie, która identyfikuje i naprawia problemy projektowe na poziomie kodu źródłowego. Wykrywa błędy responsywności, dostępności, spójności wizualnej i złamania layoutu. Obsługuje statyczne strony HTML/CSS/JS, frameworki SPA (React, Vue, Angular, Svelte), pełnostakowe rozwiązania (Next.js, Nuxt, SvelteKit) oraz platformy CMS (WordPress, Drupal).

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.