style-responsive-views

星标2

分支0

更新时间2026年7月12日 04:09

Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

Arshad-13

Arshad-13/TransitOps

下载

Style Responsive Views Playbook

Follow these practices to ensure the ERP dashboard canvas adjusts correctly on multiple devices (Mobile, Tablet, Desktop):

Mobile-First Layout:
- Apply single column configuration as the default: grid-cols-1.
- Upgrade to 2-column or 3-column splits on tablet/desktop sizes: sm:grid-cols-2 lg:grid-cols-3 or lg:grid-cols-4.
Mobile Sidebar Navigation Drawer:
- Hide the left sidebar layout off-screen using translation transforms: -translate-x-full md:translate-x-0.
- Toggle its visibility using parent layout state (e.g., sidebarOpen boolean) by mapping translate-x-0.
- Render a dim backdrop overlay when the sidebar is visible on mobile viewports:
```
{sidebarOpen && (
  <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-xs md:hidden" />
)}
```
Data Grid & Tables Overflow:
- Never let tables overflow their container margins. Wrap tables inside an outer overflow container:
```
<div className="overflow-x-auto w-full">
  <table className="w-full">...</table>
</div>
```
- Truncate long strings (e.g. description fields, user names) using truncate and max-w-xs.

同仓库更多 Skills

同仓库

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:
- Apply single column configuration as the default: grid-cols-1.
- Upgrade to 2-column or 3-column splits on tablet/desktop sizes: sm:grid-cols-2 lg:grid-cols-3 or lg:grid-cols-4.
Mobile Sidebar Navigation Drawer:
- Hide the left sidebar layout off-screen using translation transforms: -translate-x-full md:translate-x-0.
- Toggle its visibility using parent layout state (e.g., sidebarOpen boolean) by mapping translate-x-0.
- Render a dim backdrop overlay when the sidebar is visible on mobile viewports:
```
{sidebarOpen && (
  <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-xs md:hidden" />
)}
```
Data Grid & Tables Overflow:
- Never let tables overflow their container margins. Wrap tables inside an outer overflow container:
```
<div className="overflow-x-auto w-full">
  <table className="w-full">...</table>
</div>
```
- Truncate long strings (e.g. description fields, user names) using truncate and max-w-xs.