القائمة
Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.