Menu
Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.
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ê.
Use when adding a brand-new CRUD resource beyond the core entity (e.g. a second model the PS requires).
Use when building or restyling any page or component.
Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts.
Use when creating new Next.js route handlers using the custom helper wrapper.
Use whenever the Prisma schema changes and a migration is needed.
Use when integrating third-party APIs (e.g. SMTP emails, SMS notification gateways, payment checkout gates, or OCR parsers).
Baseado na classificação ocupacional SOC
| name | style-responsive-views |
| description | Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks. |
Follow these practices to ensure the ERP dashboard canvas adjusts correctly on multiple devices (Mobile, Tablet, Desktop):
Mobile-First Layout:
grid-cols-1.sm:grid-cols-2 lg:grid-cols-3 or lg:grid-cols-4.Mobile Sidebar Navigation Drawer:
-translate-x-full md:translate-x-0.sidebarOpen boolean) by mapping translate-x-0.{sidebarOpen && (
<div onClick={() => setSidebarOpen(false)} className="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-xs md:hidden" />
)}
Data Grid & Tables Overflow:
<div className="overflow-x-auto w-full">
<table className="w-full">...</table>
</div>
truncate and max-w-xs.