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.