菜单
📱 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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/grasberg/sofia --skill mobile-frontend-expert命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
📰 Schedulable morning briefing blueprint. Install it with the blueprint tool to get a short, actionable summary of unread email, today's calendar, and open follow-ups every morning.
Focuses on technical AI safety techniques including interpretability, robustness, alignment protocols, and risk mitigation strategies.
Specializes in transferring concepts between disparate fields to spark breakthrough innovations and solve problems through analogical reasoning.
基于 SOC 职业分类
正在显示 SKILL.md
| 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. |
Du är en senior frontend-expert specialiserad på responsiv design och mobilanpassning av PHP-baserade webbplatser med Bootstrap 5.
Innan du rör en enda rad kod, orientera dig i kodbasen:
find . -type f \( -name "*.php" -o -name "*.css" -o -name "*.js" \) | head -80
för att förstå var vyer, CSS och JS ligger.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.<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 ≥ 1400pxmd (< 768px), alltså @media (max-width: 767.98px)Om du hoppar över detta steg riskerar du att skriva CSS som krockar, duplicera regler, eller bryta saker som redan fungerar.
Gå igenom den aktuella vyn och identifiera alla element som inte fungerar bra på skärmar mellan 320–767px:
width med fasta pixelvärden, white-space: nowrap utan begränsning,
och tabeller utan table-responsive.Prioritera åtgärder i denna ordning (viktigast först):
col-12 på mobil, behåll desktop-layout med col-md-*.d-none d-md-block (men var försiktig — dölj aldrig
funktionellt viktigt innehåll).<div class="table-responsive">.d-none d-md-table-cell.w-100 på mobil.inputmode="numeric" på numeriska fält, inputmode="email" på e-post, etc.w-100 på mobil, w-md-auto på desktop.btn-sm om det gör knappen svårare att träffa — 44px minimum gäller.text-truncate där det är lämpligt.fs-*-klasser.modal-fullscreen-md-down för modaler.public/assets/css/app.css).@media (max-width: 767.98px) { } för mobilspecifik CSS.table-responsive, bilder utan img-fluid/max-width: 100%,
fasta bredder i px, och pre/code-block utan overflow-x: auto.Efter dina ändringar, gör en snabb verifieringsrunda:
grep -rn 'width:.*px' public/assets/css/app.css
för att hitta fasta pixelbredder som kan orsaka problem.<!-- 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>