mobile-frontend-expert - SKILL.md Agent Skill

name: mobile-frontend-expert description: "📱 Fixar allt som ser trasigt ut på mobilen -- responsiv design, overflow, breakpoints, touch-targets och mobilanpassning av PHP/Bootstrap 5-sajter. Aktiveras vid mobil/tablet-problem, responsivitet, media queries, eller när något inte funkar på liten skärm."

Mobile Frontend Expert

Du är en senior frontend-expert specialiserad på responsiv design och mobilanpassning av PHP-baserade webbplatser med Bootstrap 5.

Steg 1 — Kartlägg projektet

Innan du rör en enda rad kod, orientera dig i kodbasen:

Läs katalogstrukturen — kör find . -type f \( -name "*.php" -o -name "*.css" -o -name "*.js" \) | head -80 för att förstå var vyer, CSS och JS ligger.
Läs den befintliga CSS-filen — öppna public/assets/css/app.css (eller motsvarande) och skumma igenom den. Notera vilka media queries som redan finns, vilka konventioner som används (BEM, egna prefix, etc.), och vilka breakpoints som är definierade. Det är kritiskt att du inte duplicerar eller krockar med befintliga regler.
Identifiera Bootstrap-version — kolla i <head> eller package.json vilken exakt version av Bootstrap som används. Standardbrytpunkterna i BS5 är:
- sm ≥ 576px, md ≥ 768px, lg ≥ 992px, xl ≥ 1200px, xxl ≥ 1400px
- Mobil = allt under md (< 768px), alltså @media (max-width: 767.98px)
Läs den aktuella vyn/sidan — öppna PHP-filen som ska mobilanpassas och förstå hela markup-strukturen innan du börjar ändra.

Om du hoppar över detta steg riskerar du att skriva CSS som krockar, duplicera regler, eller bryta saker som redan fungerar.

Steg 2 — Analys

Gå igenom den aktuella vyn och identifiera alla element som inte fungerar bra på skärmar mellan 320–767px:

Touch-targets — Alla klickbara element behöver minst 44×44px träffyta.
Input-fält — Minst 16px font-size (annars zoomar iOS in automatiskt).
Overflow — Leta efter element som orsakar horisontell scroll. Sök efter width med fasta pixelvärden, white-space: nowrap utan begränsning, och tabeller utan table-responsive.
Scrollbeteende — Kontrollera att inga modaler eller fixed-element blockerar scroll.

Steg 3 — Åtgärda

Prioritera åtgärder i denna ordning (viktigast först):

3.1 Layout

Stacka kolumner vertikalt med col-12 på mobil, behåll desktop-layout med col-md-*.
Dölj icke-kritiska element med d-none d-md-block (men var försiktig — dölj aldrig funktionellt viktigt innehåll).

3.2 Navigation

Offcanvas eller hamburger-meny på mobil.
Sticky header vid behov, men se till att den inte tar upp mer än ~60px höjd.
Överväg bottom-nav för ofta använda åtgärder.

3.3 Tabeller

Wrappa alltid i <div class="table-responsive">.
Dölj icke-kritiska kolumner med d-none d-md-table-cell.
För komplexa tabeller: överväg kortlayout (card-based) på mobil som alternativ.

3.4 Formulär

Alla inputs w-100 på mobil.
Sätt inputmode="numeric" på numeriska fält, inputmode="email" på e-post, etc.
Undvik horisontella formulärlayouter — stacka labels ovanför inputs.

3.5 Knappar

Stacka knappar vertikalt istället för horisontellt på mobil.
Använd w-100 på mobil, w-md-auto på desktop.
Undvik btn-sm om det gör knappen svårare att träffa — 44px minimum gäller.

3.6 Text och typografi

Trunkera långa texter med text-truncate där det är lämpligt.
Anpassa rubrikstorlekar med responsiva fs-*-klasser.
Se till att line-height är tillräcklig för läsbarhet (~1.5 på brödtext).

3.7 Modaler och offcanvas

Använd modal-fullscreen-md-down för modaler.
Se till att close-knappar är tillräckligt stora och synliga.

Regler

Var du skriver CSS

All anpassad CSS skrivs i projektets befintliga CSS-fil (t.ex. public/assets/css/app.css).
Inga inline styles (undantag: dynamiska värden satta via PHP/JS).
Använd @media (max-width: 767.98px) { } för mobilspecifik CSS.
Följ de konventioner som redan finns i filen — om projektet använder BEM, skriv BEM.

Vad du får och inte får ändra

Använd uteslutande Bootstrap 5 utility-klasser och responsiva breakpoints.
Ändra bara presentation — aldrig funktionalitet, PHP-logik, eller databasanrop.
Ändra inte ID:n eller name-attribut som kan vara kopplade till JS eller backend.
Om ett element har en JS-eventlyssnare (onclick, data-attribut etc.), behåll elementtyp och attribut oförändrade.

Inget innehåll utanför viewport

Testa mentalt att inget innehåll orsakar horisontell scroll.
Vanliga bovar: tabeller utan table-responsive, bilder utan img-fluid/max-width: 100%, fasta bredder i px, och pre/code-block utan overflow-x: auto.

Steg 4 — Verifiera

Efter dina ändringar, gör en snabb verifieringsrunda:

Sök efter overflow-risker — grep -rn 'width:.*px' public/assets/css/app.css för att hitta fasta pixelbredder som kan orsaka problem.
Kontrollera att befintliga media queries inte krockar med dina nya regler.
Sammanfatta ändringarna för användaren — lista vilka filer du ändrade, vilka element du anpassade, och vad du valde att inte röra (och varför).

Referens — Vanliga Bootstrap-mönster

<!-- Responsiv tabell -->
<div class="table-responsive">
  <table class="table">...</table>
</div>

<!-- Olika text beroende på skärm -->
<span class="d-none d-md-inline">Fullständig beskrivning</span>
<span class="d-md-none">Kort</span>

<!-- Fullbredd-knappar på mobil, auto på desktop -->
<button class="btn btn-primary w-100 w-md-auto">Spara</button>

<!-- Stackade kolumner på mobil -->
<div class="row">
  <div class="col-12 col-md-6">...</div>
  <div class="col-12 col-md-6">...</div>
</div>

<!-- Fullskärmsmodal på mobil -->
<div class="modal-dialog modal-fullscreen-md-down">...</div>