Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SKILL.md): update interaction patterns for modals and long lists with date filters

Browse Source
This commit is contained in:
Achintha Isuru
2026-03-15 21:07:57 -04:00
parent 29adf60b8a
commit 5c99ddbca7
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.claude/skills/krow-paper-design/SKILL.md
View File

@@ -409,7 +409,27 @@ Artboard (390x844, bg #FAFBFC)
Bottom CTAs (primary + outline) 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 ### Write Incrementally
@@ -447,7 +467,7 @@ When creating matching screens (e.g., two shift detail views):
- Use same card/row component patterns - Use same card/row component patterns
- Maintain consistent padding and gap values - Maintain consistent padding and gap values
## 6. SVG Icon Patterns ## 7. SVG Icon Patterns
### Chevron Left (Back) ### Chevron Left (Back)
```html ```html
@@ -500,7 +520,7 @@ When creating matching screens (e.g., two shift detail views):
</svg> </svg>
``` ```
## 7. Anti-Patterns ## 8. Anti-Patterns
### Colors ### Colors
- Never use `#0F4C81`, `#1A3A5C` (old navy) - use `#0A39DF` (Primary) - 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 skip review checkpoints after 2-3 modifications
- Never create frames without following the naming convention - 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 `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 ## Summary