Menu
Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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).
| 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.