From 5c99ddbca7be5c556d7335c3bc03fb0a7e8d9a81 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru444@gmail.com>
Date: Sun, 15 Mar 2026 21:07:57 -0400
Subject: [PATCH] feat(SKILL.md): update interaction patterns for modals and
 long lists with date filters

---
 .claude/skills/krow-paper-design/SKILL.md | 28 ++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/.claude/skills/krow-paper-design/SKILL.md b/.claude/skills/krow-paper-design/SKILL.md
index b4f56157..0f2bca58 100644
--- a/.claude/skills/krow-paper-design/SKILL.md
+++ b/.claude/skills/krow-paper-design/SKILL.md
@@ -409,7 +409,27 @@ Artboard (390x844, bg #FAFBFC)
   Bottom CTAs (primary + outline)
 ```
 
-## 5. Workflow Rules
+## 5. Interaction Patterns
+
+### Modals → Bottom Sheets
+All modal/dialog interactions MUST use bottom sheets, never centered modal dialogs.
+- Sheet: white bg, 18px top-left/top-right radius, padding 24px, bottom safe area 34px
+- Handle bar: 40px wide, 4px height, `#D1D5DB`, centered, 999px radius, 8px margin-bottom
+- Overlay: `rgba(18, 24, 38, 0.55)` scrim behind sheet
+- Title: Inter Tight 20px/700, `#121826`
+- Subtitle: Manrope 13px/400, `#6A7382`
+- Primary CTA: full-width at bottom of sheet
+- Dismiss: "Skip" or "Cancel" text link below CTA, or swipe-down gesture
+
+### Long Lists with Date Filters
+When displaying lists with date filtering (e.g., shift history, timecards, payment history):
+- Group items by **month** (e.g., "MARCH 2026", "FEBRUARY 2026")
+- Month headers use Overline Label style: Manrope 11px/600, uppercase, `#6A7382`, letter-spacing 0.06em
+- Gap: 10px below month header to first item, 24px between month groups
+- Most recent month first (reverse chronological)
+- Date filter at top (chip or dropdown): "Last 30 days", "Last 3 months", "This year", custom range
+
+## 6. Workflow Rules
 
 ### Write Incrementally
 
@@ -447,7 +467,7 @@ When creating matching screens (e.g., two shift detail views):
 - Use same card/row component patterns
 - Maintain consistent padding and gap values
 
-## 6. SVG Icon Patterns
+## 7. SVG Icon Patterns
 
 ### Chevron Left (Back)
 ```html
@@ -500,7 +520,7 @@ When creating matching screens (e.g., two shift detail views):
 </svg>
 ```
 
-## 7. Anti-Patterns
+## 8. Anti-Patterns
 
 ### Colors
 - Never use `#0F4C81`, `#1A3A5C` (old navy) - use `#0A39DF` (Primary)
@@ -521,6 +541,8 @@ When creating matching screens (e.g., two shift detail views):
 - Never skip review checkpoints after 2-3 modifications
 - Never create frames without following the naming convention
 - Never use `justifyContent: space-between` on artboards with many direct children - use `marginTop: auto` on the CTA instead
+- Never use centered modal dialogs — always use bottom sheets for modal interactions
+- Never show long date-filtered lists without grouping by month
 
 ## Summary