adapt

Name: adapt
Author: heyhank-app

30stars13forks

How to install adapt?

heyhank-app/heyhank/adapt

$npx -y skills add heyhank-app/heyhank --skill adapt

Installs into the current project.

Summary

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

Files · 1

View on GitHub

SKILL.md

1	Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
2
3	## Assess Adaptation Challenge
4
5	Understand what needs adaptation and why:
6
7	1. Identify the source context:
8	- What was it designed for originally? (Desktop web? Mobile app?)
9	- What assumptions were made? (Large screen? Mouse input? Fast connection?)
10	- What works well in current context?
11
12	2. Understand target context:
13	- Device: Mobile, tablet, desktop, TV, watch, print?
14	- Input method: Touch, mouse, keyboard, voice, gamepad?
15	- Screen constraints: Size, resolution, orientation?
16	- Connection: Fast wifi, slow 3G, offline?
17	- Usage context: On-the-go vs desk, quick glance vs focused reading?
18	- User expectations: What do users expect on this platform?
19
20	3. Identify adaptation challenges:
21	- What won't fit? (Content, navigation, features)
22	- What won't work? (Hover states on touch, tiny touch targets)
23	- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
24
25	CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
26
27	## Plan Adaptation Strategy
28
29	Create context-appropriate strategy:
30
31	### Mobile Adaptation (Desktop → Mobile)
32
33	Layout Strategy:
34	- Single column instead of multi-column
35	- Vertical stacking instead of side-by-side
36	- Full-width components instead of fixed widths
37	- Bottom navigation instead of top/side navigation
38
39	Interaction Strategy:
40	- Touch targets 44x44px minimum (not hover-dependent)
41	- Swipe gestures where appropriate (lists, carousels)
42	- Bottom sheets instead of dropdowns
43	- Thumbs-first design (controls within thumb reach)
44	- Larger tap areas with more spacing
45
46	Content Strategy:
47	- Progressive disclosure (don't show everything at once)
48	- Prioritize primary content (secondary content in tabs/accordions)
49	- Shorter text (more concise)
50	- Larger text (16px minimum)
51
52	Navigation Strategy:
53	- Hamburger menu or bottom navigation
54	- Reduce navigation complexity
55	- Sticky headers for context
56	- Back button in navigation flow
57
58	### Tablet Adaptation (Hybrid Approach)
59
60	Layout Strategy:
61	- Two-column layouts (not single or three-column)
62	- Side panels for secondary content
63	- Master-detail views (list + detail)
64	- Adaptive based on orientation (portrait vs landscape)
65
66	Interaction Strategy:
67	- Support both touch and pointer
68	- Touch targets 44x44px but allow denser layouts than phone
69	- Side navigation drawers
70	- Multi-column forms where appropriate
71
72	### Desktop Adaptation (Mobile → Desktop)
73
74	Layout Strategy:
75	- Multi-column layouts (use horizontal space)
76	- Side navigation always visible
77	- Multiple information panels simultaneously
78	- Fixed widths with max-width constraints (don't stretch to 4K)
79
80	Interaction Strategy:
81	- Hover states for additional information
82	- Keyboard shortcuts
83	- Right-click context menus
84	- Drag and drop where helpful
85	- Multi-select with Shift/Cmd
86
87	Content Strategy:
88	- Show more information upfront (less progressive disclosure)
89	- Data tables with many columns
90	- Richer visualizations
91	- More detailed descriptions
92
93	### Print Adaptation (Screen → Print)
94
95	Layout Strategy:
96	- Page breaks at logical points
97	- Remove navigation, footer, interactive elements
98	- Black and white (or limited color)
99	- Proper margins for binding
100
101	Content Strategy:
102	- Expand shortened content (show full URLs, hidden sections)
103	- Add page numbers, headers, footers
104	- Include metadata (print date, page title)
105	- Convert charts to print-friendly versions
106
107	### Email Adaptation (Web → Email)
108
109	Layout Strategy:
110	- Narrow width (600px max)
111	- Single column only
112	- Inline CSS (no external stylesheets)
113	- Table-based layouts (for email client compatibility)
114
115	Interaction Strategy:
116	- Large, obvious CTAs (buttons not text links)
117	- No hover states (not reliable)
118	- Deep links to web app for complex interactions
119
120	## Implement Adaptations
121
122	Apply changes systematically:
123
124	### Responsive Breakpoints
125
126	Choose appropriate breakpoints:
127	- Mobile: 320px-767px
128	- Tablet: 768px-1023px
129	- Desktop: 1024px+
130	- Or content-driven breakpoints (where design breaks)
131
132	### Layout Adaptation Techniques
133
134	- CSS Grid/Flexbox: Reflow layouts automatically
135	- Container Queries: Adapt based on container, not viewport
136	- `clamp()`: Fluid sizing between min and max
137	- Media queries: Different styles for different contexts
138	- Display properties: Show/hide elements per context
139
140	### Touch Adaptation
141
142	- Increase touch target sizes (44x44px minimum)
143	- Add more spacing betwe

People who liked this also viewed

6 picks

Type

lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026378k16k
lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026377k16k
azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026209k1.3k
vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026172k29k
mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 202693k163k
gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 202653k30k

adapt

30stars13forks

View on GitHub

How to install adapt?

heyhank-app/heyhank/adapt

$npx -y skills add heyhank-app/heyhank --skill adapt

Installs into the current project.

Summary

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

Files · 1

View on GitHub

SKILL.md

1	Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
2
3	## Assess Adaptation Challenge
4
5	Understand what needs adaptation and why:
6
7	1. Identify the source context:
8	- What was it designed for originally? (Desktop web? Mobile app?)
9	- What assumptions were made? (Large screen? Mouse input? Fast connection?)
10	- What works well in current context?
11
12	2. Understand target context:
13	- Device: Mobile, tablet, desktop, TV, watch, print?
14	- Input method: Touch, mouse, keyboard, voice, gamepad?
15	- Screen constraints: Size, resolution, orientation?
16	- Connection: Fast wifi, slow 3G, offline?
17	- Usage context: On-the-go vs desk, quick glance vs focused reading?
18	- User expectations: What do users expect on this platform?
19
20	3. Identify adaptation challenges:
21	- What won't fit? (Content, navigation, features)
22	- What won't work? (Hover states on touch, tiny touch targets)
23	- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
24
25	CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.
26
27	## Plan Adaptation Strategy
28
29	Create context-appropriate strategy:
30
31	### Mobile Adaptation (Desktop → Mobile)
32
33	Layout Strategy:
34	- Single column instead of multi-column
35	- Vertical stacking instead of side-by-side
36	- Full-width components instead of fixed widths
37	- Bottom navigation instead of top/side navigation
38
39	Interaction Strategy:
40	- Touch targets 44x44px minimum (not hover-dependent)
41	- Swipe gestures where appropriate (lists, carousels)
42	- Bottom sheets instead of dropdowns
43	- Thumbs-first design (controls within thumb reach)
44	- Larger tap areas with more spacing
45
46	Content Strategy:
47	- Progressive disclosure (don't show everything at once)
48	- Prioritize primary content (secondary content in tabs/accordions)
49	- Shorter text (more concise)
50	- Larger text (16px minimum)
51
52	Navigation Strategy:
53	- Hamburger menu or bottom navigation
54	- Reduce navigation complexity
55	- Sticky headers for context
56	- Back button in navigation flow
57
58	### Tablet Adaptation (Hybrid Approach)
59
60	Layout Strategy:
61	- Two-column layouts (not single or three-column)
62	- Side panels for secondary content
63	- Master-detail views (list + detail)
64	- Adaptive based on orientation (portrait vs landscape)
65
66	Interaction Strategy:
67	- Support both touch and pointer
68	- Touch targets 44x44px but allow denser layouts than phone
69	- Side navigation drawers
70	- Multi-column forms where appropriate
71
72	### Desktop Adaptation (Mobile → Desktop)
73
74	Layout Strategy:
75	- Multi-column layouts (use horizontal space)
76	- Side navigation always visible
77	- Multiple information panels simultaneously
78	- Fixed widths with max-width constraints (don't stretch to 4K)
79
80	Interaction Strategy:
81	- Hover states for additional information
82	- Keyboard shortcuts
83	- Right-click context menus
84	- Drag and drop where helpful
85	- Multi-select with Shift/Cmd
86
87	Content Strategy:
88	- Show more information upfront (less progressive disclosure)
89	- Data tables with many columns
90	- Richer visualizations
91	- More detailed descriptions
92
93	### Print Adaptation (Screen → Print)
94
95	Layout Strategy:
96	- Page breaks at logical points
97	- Remove navigation, footer, interactive elements
98	- Black and white (or limited color)
99	- Proper margins for binding
100
101	Content Strategy:
102	- Expand shortened content (show full URLs, hidden sections)
103	- Add page numbers, headers, footers
104	- Include metadata (print date, page title)
105	- Convert charts to print-friendly versions
106
107	### Email Adaptation (Web → Email)
108
109	Layout Strategy:
110	- Narrow width (600px max)
111	- Single column only
112	- Inline CSS (no external stylesheets)
113	- Table-based layouts (for email client compatibility)
114
115	Interaction Strategy:
116	- Large, obvious CTAs (buttons not text links)
117	- No hover states (not reliable)
118	- Deep links to web app for complex interactions
119
120	## Implement Adaptations
121
122	Apply changes systematically:
123
124	### Responsive Breakpoints
125
126	Choose appropriate breakpoints:
127	- Mobile: 320px-767px
128	- Tablet: 768px-1023px
129	- Desktop: 1024px+
130	- Or content-driven breakpoints (where design breaks)
131
132	### Layout Adaptation Techniques
133
134	- CSS Grid/Flexbox: Reflow layouts automatically
135	- Container Queries: Adapt based on container, not viewport
136	- `clamp()`: Fluid sizing between min and max
137	- Media queries: Different styles for different contexts
138	- Display properties: Show/hide elements per context
139
140	### Touch Adaptation
141
142	- Increase touch target sizes (44x44px minimum)
143	- Add more spacing betwe

People who liked this also viewed

6 picks

Type