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.