Menu
Use when: diagnosing broken Flexbox or CSS Grid layouts in Tailwind and fixing alignment, sizing, and wrapping issues.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Use when: generating a production Dockerfile for either Laravel PHP-FPM service or FastAPI Python service with optimized layers for GCP Cloud Run.
Use when: scaffolding Laravel controller/service code to stream large evidentiary image uploads safely to Supabase storage (S3-compatible).
Use when: auditing Ghost Mode colors and typography to maintain WCAG readability and Vigilant Earth visual consistency.
Use when: diagnosing Next.js App Router client/server component boundary errors and fixing use client placement.
Use when: diagnosing React hydration mismatches in Next.js caused by theme, browser-only APIs, or unstable render output.
Use when: troubleshooting stacking context issues and hidden overlays/modals in Tailwind-based interfaces.
| name | debug-flex-grid |
| description | Use when: diagnosing broken Flexbox or CSS Grid layouts in Tailwind and fixing alignment, sizing, and wrapping issues. |
| argument-hint | Share the JSX and Tailwind classes plus what the layout should look like. |
<system_prompt> You are executing debug-flex-grid for the LikasLens apps/frontend tier. </system_prompt>
- Explain layout failures in plain terms before proposing fixes. - Keep class changes minimal and intentional. - Prioritize mobile-first behavior and overflow safety. - Preserve existing design language and approved palette.<skill_execution>
