learnship 1.9.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/.claude-plugin/plugin.json +26 -0
- package/.cursor-plugin/plugin.json +26 -0
- package/LICENSE +21 -0
- package/README.md +791 -0
- package/SKILL.md +86 -0
- package/agents/debugger.md +102 -0
- package/agents/executor.md +115 -0
- package/agents/learnship-debugger.md +146 -0
- package/agents/learnship-executor.md +155 -0
- package/agents/learnship-phase-researcher.md +128 -0
- package/agents/learnship-plan-checker.md +119 -0
- package/agents/learnship-planner.md +146 -0
- package/agents/learnship-verifier.md +157 -0
- package/agents/planner.md +109 -0
- package/agents/researcher.md +80 -0
- package/agents/verifier.md +114 -0
- package/bin/install.js +1242 -0
- package/bin/learnship.js +56 -0
- package/commands/learnship/add-phase.md +22 -0
- package/commands/learnship/add-tests.md +24 -0
- package/commands/learnship/add-todo.md +21 -0
- package/commands/learnship/audit-milestone.md +21 -0
- package/commands/learnship/check-todos.md +22 -0
- package/commands/learnship/cleanup.md +22 -0
- package/commands/learnship/complete-milestone.md +22 -0
- package/commands/learnship/debug.md +27 -0
- package/commands/learnship/decision-log.md +22 -0
- package/commands/learnship/diagnose-issues.md +23 -0
- package/commands/learnship/discovery-phase.md +24 -0
- package/commands/learnship/discuss-milestone.md +23 -0
- package/commands/learnship/discuss-phase.md +23 -0
- package/commands/learnship/execute-phase.md +27 -0
- package/commands/learnship/execute-plan.md +26 -0
- package/commands/learnship/health.md +20 -0
- package/commands/learnship/help.md +19 -0
- package/commands/learnship/insert-phase.md +22 -0
- package/commands/learnship/knowledge-base.md +21 -0
- package/commands/learnship/list-phase-assumptions.md +21 -0
- package/commands/learnship/ls.md +20 -0
- package/commands/learnship/map-codebase.md +23 -0
- package/commands/learnship/milestone-retrospective.md +21 -0
- package/commands/learnship/new-milestone.md +23 -0
- package/commands/learnship/new-project.md +24 -0
- package/commands/learnship/next.md +22 -0
- package/commands/learnship/pause-work.md +21 -0
- package/commands/learnship/plan-milestone-gaps.md +22 -0
- package/commands/learnship/plan-phase.md +24 -0
- package/commands/learnship/progress.md +20 -0
- package/commands/learnship/quick.md +27 -0
- package/commands/learnship/reapply-patches.md +21 -0
- package/commands/learnship/release.md +21 -0
- package/commands/learnship/remove-phase.md +23 -0
- package/commands/learnship/research-phase.md +23 -0
- package/commands/learnship/resume-work.md +21 -0
- package/commands/learnship/set-profile.md +21 -0
- package/commands/learnship/settings.md +21 -0
- package/commands/learnship/transition.md +21 -0
- package/commands/learnship/update.md +21 -0
- package/commands/learnship/validate-phase.md +22 -0
- package/commands/learnship/verify-work.md +23 -0
- package/cursor-rules/learnship.mdc +60 -0
- package/gemini-extension.json +10 -0
- package/hooks/hooks-claude.json +15 -0
- package/hooks/hooks-cursor.json +10 -0
- package/hooks/session-start +43 -0
- package/install.sh +254 -0
- package/learnship/references/design-commands.md +119 -0
- package/learnship/references/git-integration.md +249 -0
- package/learnship/references/learning-design.md +142 -0
- package/learnship/references/model-profiles.md +90 -0
- package/learnship/references/planning-config.md +184 -0
- package/learnship/references/questioning.md +162 -0
- package/learnship/references/ui-brand.md +160 -0
- package/learnship/references/verification-patterns.md +608 -0
- package/learnship/templates/agents.md +166 -0
- package/learnship/templates/context.md +72 -0
- package/learnship/templates/plan.md +202 -0
- package/learnship/templates/project.md +184 -0
- package/learnship/templates/requirements.md +231 -0
- package/learnship/templates/state.md +176 -0
- package/learnship/templates/uat.md +80 -0
- package/learnship/workflows/add-phase.md +84 -0
- package/learnship/workflows/add-tests.md +191 -0
- package/learnship/workflows/add-todo.md +108 -0
- package/learnship/workflows/audit-milestone.md +178 -0
- package/learnship/workflows/check-todos.md +138 -0
- package/learnship/workflows/cleanup.md +107 -0
- package/learnship/workflows/complete-milestone.md +191 -0
- package/learnship/workflows/debug.md +245 -0
- package/learnship/workflows/decision-log.md +131 -0
- package/learnship/workflows/diagnose-issues.md +145 -0
- package/learnship/workflows/discovery-phase.md +183 -0
- package/learnship/workflows/discuss-milestone.md +136 -0
- package/learnship/workflows/discuss-phase.md +244 -0
- package/learnship/workflows/execute-phase.md +345 -0
- package/learnship/workflows/execute-plan.md +149 -0
- package/learnship/workflows/health.md +171 -0
- package/learnship/workflows/help.md +153 -0
- package/learnship/workflows/insert-phase.md +106 -0
- package/learnship/workflows/knowledge-base.md +168 -0
- package/learnship/workflows/list-phase-assumptions.md +129 -0
- package/learnship/workflows/ls.md +145 -0
- package/learnship/workflows/map-codebase.md +142 -0
- package/learnship/workflows/milestone-retrospective.md +178 -0
- package/learnship/workflows/new-milestone.md +200 -0
- package/learnship/workflows/new-project.md +340 -0
- package/learnship/workflows/next.md +100 -0
- package/learnship/workflows/pause-work.md +122 -0
- package/learnship/workflows/plan-milestone-gaps.md +160 -0
- package/learnship/workflows/plan-phase.md +288 -0
- package/learnship/workflows/progress.md +118 -0
- package/learnship/workflows/quick.md +256 -0
- package/learnship/workflows/reapply-patches.md +130 -0
- package/learnship/workflows/release.md +217 -0
- package/learnship/workflows/remove-phase.md +128 -0
- package/learnship/workflows/research-phase.md +137 -0
- package/learnship/workflows/resume-work.md +162 -0
- package/learnship/workflows/set-profile.md +78 -0
- package/learnship/workflows/settings.md +204 -0
- package/learnship/workflows/sync-upstream-skills.md +269 -0
- package/learnship/workflows/transition.md +165 -0
- package/learnship/workflows/update.md +166 -0
- package/learnship/workflows/validate-phase.md +174 -0
- package/learnship/workflows/verify-work.md +264 -0
- package/package.json +62 -0
- package/references/design-commands.md +119 -0
- package/references/git-integration.md +249 -0
- package/references/learning-design.md +142 -0
- package/references/model-profiles.md +90 -0
- package/references/planning-config.md +184 -0
- package/references/questioning.md +162 -0
- package/references/ui-brand.md +160 -0
- package/references/verification-patterns.md +608 -0
- package/skills/agentic-learning/SKILL.md +373 -0
- package/skills/agentic-learning/references/either-or-format.md +161 -0
- package/skills/agentic-learning/references/learning-science.md +190 -0
- package/skills/agentic-learning/references/struggle-ladder.md +140 -0
- package/skills/impeccable/SKILL.md +125 -0
- package/skills/impeccable/adapt/SKILL.md +199 -0
- package/skills/impeccable/animate/SKILL.md +190 -0
- package/skills/impeccable/audit/SKILL.md +129 -0
- package/skills/impeccable/bolder/SKILL.md +132 -0
- package/skills/impeccable/clarify/SKILL.md +180 -0
- package/skills/impeccable/colorize/SKILL.md +158 -0
- package/skills/impeccable/critique/SKILL.md +118 -0
- package/skills/impeccable/delight/SKILL.md +317 -0
- package/skills/impeccable/distill/SKILL.md +137 -0
- package/skills/impeccable/extract/SKILL.md +95 -0
- package/skills/impeccable/frontend-design/SKILL.md +127 -0
- package/skills/impeccable/frontend-design/reference/color-and-contrast.md +132 -0
- package/skills/impeccable/frontend-design/reference/interaction-design.md +123 -0
- package/skills/impeccable/frontend-design/reference/motion-design.md +99 -0
- package/skills/impeccable/frontend-design/reference/responsive-design.md +114 -0
- package/skills/impeccable/frontend-design/reference/spatial-design.md +100 -0
- package/skills/impeccable/frontend-design/reference/typography.md +131 -0
- package/skills/impeccable/frontend-design/reference/ux-writing.md +107 -0
- package/skills/impeccable/harden/SKILL.md +358 -0
- package/skills/impeccable/normalize/SKILL.md +67 -0
- package/skills/impeccable/onboard/SKILL.md +243 -0
- package/skills/impeccable/optimize/SKILL.md +269 -0
- package/skills/impeccable/polish/SKILL.md +202 -0
- package/skills/impeccable/quieter/SKILL.md +118 -0
- package/skills/impeccable/teach-impeccable/SKILL.md +69 -0
- package/templates/agents.md +166 -0
- package/templates/config.json +22 -0
- package/templates/context.md +72 -0
- package/templates/plan.md +202 -0
- package/templates/project.md +184 -0
- package/templates/requirements.md +231 -0
- package/templates/state.md +176 -0
- package/templates/uat.md +80 -0
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
# Learning Science Reference
|
|
2
|
+
|
|
3
|
+
This file provides the agent with context on the four evidence-based learning techniques that power `agentic-learning`. Use it to explain the *why* behind each action when the user asks.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## The core problem: illusion of competence
|
|
8
|
+
|
|
9
|
+
When we read a fluent, well-structured answer from an AI model, it *feels* like we've learned. The information seems clear, logical, complete. But fluency in reading is not the same as encoding in memory or building understanding.
|
|
10
|
+
|
|
11
|
+
This is called the **illusion of competence**: we mistake the ease of *consuming* information for the ability to *use* it. Students who re-read notes feel more confident than students who test themselves — but they perform worse on exams.
|
|
12
|
+
|
|
13
|
+
**The fix:** learning requires effortful, active processing. The techniques below are not harder because they're poorly designed — they're harder because difficulty is the mechanism.
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Technique 1: Retrieval
|
|
18
|
+
|
|
19
|
+
**What it is:** The act of pulling information *out* of memory rather than putting it *in*.
|
|
20
|
+
|
|
21
|
+
**The research:** In a landmark study, students given a passage to read were divided into two groups: one group re-read it repeatedly; the other read it once and then tried to recall it from memory. The recall group remembered significantly more — even though they spent less time with the material.
|
|
22
|
+
|
|
23
|
+
**Why it works:** Retrieval strengthens the memory trace. Every time you successfully recall something, you make it easier to recall again. Re-reading does not do this — it only creates a familiarity signal, not a retrieval pathway.
|
|
24
|
+
|
|
25
|
+
**How the agent applies it:**
|
|
26
|
+
- In `learn`: ask the user to explain or recall before providing the answer
|
|
27
|
+
- In `quiz`: present questions from the current codebase; user answers before seeing corrections
|
|
28
|
+
- In `explain-first`: user narrates the code in their own words before the agent comments
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Technique 2: Spacing
|
|
33
|
+
|
|
34
|
+
**What it is:** Distributing learning over time rather than concentrating it in one session (cramming).
|
|
35
|
+
|
|
36
|
+
**The research:** Memory decays over time following the "forgetting curve" (Ebbinghaus, 1885). But each retrieval resets and extends the curve. Retrieving a concept after a delay is harder than retrieving it immediately — and that difficulty is precisely what strengthens the trace.
|
|
37
|
+
|
|
38
|
+
**Why it works:** Spaced practice forces the brain to rebuild the memory pathway from a weaker state, which leads to stronger long-term retention than massed practice.
|
|
39
|
+
|
|
40
|
+
**How the agent applies it:**
|
|
41
|
+
- In `space`: after a session, categorizes concepts by confidence level and schedules revisit prompts (tomorrow, 3 days, 1 week)
|
|
42
|
+
- Writes a `docs/revisit.md` file so the user has a concrete artifact to return to
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Technique 3: Generation
|
|
47
|
+
|
|
48
|
+
**What it is:** Producing an answer — even an incorrect one — before seeing the correct answer.
|
|
49
|
+
|
|
50
|
+
**The research:** In studies on "generation effect," students given word pairs like "rapid - ____" where they had to generate the word "fast" from a cue remembered the pair better than students given both words. Generating the answer, even incorrectly, creates a stronger memory trace than passively receiving it.
|
|
51
|
+
|
|
52
|
+
**Why it works:** The attempt to generate activates relevant knowledge and creates stronger encoding. Getting it wrong and then seeing the correct answer is more effective than never having to produce anything.
|
|
53
|
+
|
|
54
|
+
**How the agent applies it:**
|
|
55
|
+
- In `learn`: give partial examples (first line of code, function signature, first word) and ask the user to complete them
|
|
56
|
+
- In `struggle`: give the minimum context needed and ask the user to produce the solution, escalating hints only when truly stuck
|
|
57
|
+
- In `quiz`: fill-in-the-blank and predict-the-output questions
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Technique 4: Reflection
|
|
62
|
+
|
|
63
|
+
**What it is:** Structured self-assessment against a learning goal.
|
|
64
|
+
|
|
65
|
+
**The research:** Students who engaged in structured reflection — asking "how am I learning?", "what is my goal?", and "what are the gaps?" — showed measurably better outcomes than students who reviewed the same material without reflection.
|
|
66
|
+
|
|
67
|
+
**Why it works:** Reflection forces metacognition: thinking about your own thinking. It surfaces gaps that passive review hides and creates a feedback loop between effort and outcome.
|
|
68
|
+
|
|
69
|
+
**How the agent applies it:**
|
|
70
|
+
- In `reflect`: ask the three structured questions in sequence and generate a gap analysis
|
|
71
|
+
- In `struggle`: after revealing the answer, ask "can you re-implement this from scratch?"
|
|
72
|
+
- In `either-or`: ask the user to articulate rationale and expected consequences, which is itself a reflective act
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Technique 5: Interleaving
|
|
77
|
+
|
|
78
|
+
**What it is:** Deliberately mixing different topics or problem types within a single study session rather than studying one topic to completion before moving to the next (blocked practice).
|
|
79
|
+
|
|
80
|
+
**The research:** Psychology professor Doug Rohrer found that "interleaving produced better scores on final tests of learning." The reason: interleaving forces the learner to discriminate between problem types and select the appropriate strategy each time, rather than assuming the same solution works for every problem in a block.
|
|
81
|
+
|
|
82
|
+
**The subtle trap:** Blocked practice *feels* more effective because it produces immediate fluency. Interleaving feels harder and less productive during the session — but results in significantly better long-term retention and transfer. This is another form of *desirable difficulty*.
|
|
83
|
+
|
|
84
|
+
**How the agent applies it:**
|
|
85
|
+
- In `interleave`: pull concepts from different past sessions and mix them in a single quiz or recall exercise
|
|
86
|
+
- In `space`: when scheduling revisits, deliberately pair concepts from different domains to prevent pattern-matching shortcuts
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Technique 6: Cognitive Load Management
|
|
91
|
+
|
|
92
|
+
**What it is:** Recognising that working memory is severely limited (typically 4–7 items at once) and structuring learning to stay within that limit.
|
|
93
|
+
|
|
94
|
+
**The research:** Cognitive load theory (Sweller, 1988; applied to technical learning by Frederick Reif) posits that our working memory can only hold and process a small number of elements simultaneously. When cognitive load exceeds capacity, learning breaks down — not because the learner is incapable, but because the architecture of human memory is being overwhelmed.
|
|
95
|
+
|
|
96
|
+
**Three types of cognitive load:**
|
|
97
|
+
1. **Intrinsic** — inherent complexity of the material (e.g., async event loops)
|
|
98
|
+
2. **Extraneous** — complexity from poor presentation (e.g., unclear variable names)
|
|
99
|
+
3. **Germane** — productive effort spent building schemas and mental models
|
|
100
|
+
|
|
101
|
+
**The implication:** effective teaching reduces extraneous load and stays within intrinsic load limits, so that germane load (real learning) can happen. When a learner is overwhelmed, the answer is not to explain more — it is to decompose the problem into smaller working-memory-sized chunks.
|
|
102
|
+
|
|
103
|
+
**How the agent applies it:**
|
|
104
|
+
- In `learn`: if the topic is complex, break it into sub-concepts and teach one at a time
|
|
105
|
+
- In `struggle`: hints are calibrated so each hint adds one element, not five
|
|
106
|
+
- In `cognitive-load`: explicit action to help decompose an overwhelming problem into manageable pieces
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## Technique 7: Metacognition
|
|
111
|
+
|
|
112
|
+
**What it is:** Thinking about your own thinking — the awareness and active monitoring of your own learning process.
|
|
113
|
+
|
|
114
|
+
**The research:** Educationally relevant metacognitive skills include: evaluating progress on a task, identifying where you are stuck, knowing when you don't understand something, and selecting the right strategy for the right kind of problem. The Learning Skills curriculum (Mannion & McAllister) embedded metacognition, self-regulation, and oracy across a whole school and produced GCSE results 10.9 percentage points higher than a control cohort over eight years. For disadvantaged students, the gap improvement was 23.3 percentage points.
|
|
115
|
+
|
|
116
|
+
**The distinction from reflection:** Reflection looks *backward* ("what did I learn?"). Metacognition operates *in real time* ("how am I learning right now? Am I actually understanding this or just recognising it?"). Both are necessary; neither replaces the other.
|
|
117
|
+
|
|
118
|
+
**How the agent applies it:**
|
|
119
|
+
- In `reflect`: the third question ("what are the gaps?") is explicitly metacognitive
|
|
120
|
+
- In `learn`: before teaching, ask "do you feel like you understand this, or does it just feel familiar?"
|
|
121
|
+
- Distinguishing *familiarity* from *understanding* is the single most important metacognitive move in AI-assisted learning
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Technique 8: Oracy
|
|
126
|
+
|
|
127
|
+
**What it is:** Oracy is the ability to articulate ideas clearly and precisely in spoken or written language. It is not merely a communication skill — it is a metacognitive diagnostic tool. When a learner attempts to explain something in their own words, they surface in real time exactly what they understand versus what they merely recognise.
|
|
128
|
+
|
|
129
|
+
**The research:** Mannion & McAllister's Learning Skills curriculum embedded oracy explicitly alongside metacognition and self-regulation as a triad of skills. The reason oracy belongs in that triad: you cannot self-regulate your learning if you cannot articulate where your understanding breaks down. Lakhani notes that schools doing the best pastoral and academic work integrate "evaluation, reasoning, public speaking, and communication" into subject delivery — not as separate modules but as the *medium* through which knowledge is built.
|
|
130
|
+
|
|
131
|
+
**The mechanism:** The Protégé Effect — explaining something to another person (or to an agent) forces more complete and accurate encoding than reading or listening alone. When you discover mid-explanation that you can't finish a sentence, that is not failure; that is the system working. The gap you found is the thing that needs to be learned.
|
|
132
|
+
|
|
133
|
+
**The key distinction from retrieval:** Retrieval asks "can you recall this?". Oracy asks "can you express this clearly enough that someone who doesn't know it would understand it?". The second bar is higher. Passing the retrieval test does not guarantee passing the oracy test.
|
|
134
|
+
|
|
135
|
+
**How the agent applies it:**
|
|
136
|
+
- In `explain-first`: the core mechanic — user explains before agent comments; agent pushes for precision when explanation is vague
|
|
137
|
+
- In `learn`: after the explanation phase, the generation prompt can ask the user to "explain this line to a colleague" rather than just write code
|
|
138
|
+
- If the user gives a vague explanation anywhere, ask one precision-pushing follow-up: "You said it 'handles it' — can you say exactly what it does to handle it?"
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Technique 9: Formative Feedback
|
|
143
|
+
|
|
144
|
+
**What it is:** Feedback that is timely, specific, and tied to a learning goal — as opposed to summative feedback (a grade after the fact) or binary feedback ("correct/incorrect" with no further information).
|
|
145
|
+
|
|
146
|
+
**The research:** Hattie & Timperley (2007) conducted a meta-analysis of educational interventions and found that feedback is one of the most powerful influences on achievement — but only when it operates at the right level. They identified four feedback levels:
|
|
147
|
+
1. **Task level** — "this answer is wrong" (least useful)
|
|
148
|
+
2. **Process level** — "the approach you used doesn't work here because..." (most useful for learning)
|
|
149
|
+
3. **Self-regulation level** — "what strategy could you use to check this yourself?" (builds independence)
|
|
150
|
+
4. **Self level** — "you're so smart" (can be actively harmful; see growth mindset)
|
|
151
|
+
|
|
152
|
+
The vast majority of AI feedback defaults to task level (correct/incorrect) or self level ("great job!"). Both are the least effective.
|
|
153
|
+
|
|
154
|
+
**Lakhani's framing:** Formative assessment is ongoing and actionable — it changes what the learner does next. Summative assessment is retrospective and final. The distinction matters because AI, left to its natural behaviour, produces summative-style responses to every answer: a verdict, not a guide.
|
|
155
|
+
|
|
156
|
+
**The growth mindset caveat (Dweck, 2006):** Generic praise of ability — "you're so smart", "you're a natural" — actively undermines motivation and resilience. It creates a fixed mindset: learners attribute success to inherent ability, and therefore interpret failure as evidence of lack of ability. Praise of *process* — "you found the right strategy", "that was sharp reasoning", "you identified the key mechanism" — creates a growth mindset: failure is just a strategy that didn't work yet. This distinction applies to every feedback interaction in this skill.
|
|
157
|
+
|
|
158
|
+
**How the agent applies it:**
|
|
159
|
+
- In `learn`: step 4 requires formative, anchored feedback on the user's initial answer
|
|
160
|
+
- In `quiz`: step 4 requires process-level feedback after every question
|
|
161
|
+
- In `struggle`: hints and post-reveal comments should praise the specific reasoning the user applied, not the outcome
|
|
162
|
+
- In `reflect`: the gap analysis is formative by design — it asks what to do next, not what the score was
|
|
163
|
+
- **Never use**: "correct!", "great job!", "you're really good at this" as standalone responses
|
|
164
|
+
- **Always anchor to**: what specifically the user understood, why it matters, what to try if they were wrong
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## The neurological basis
|
|
169
|
+
|
|
170
|
+
Sustained mental effort is positively correlated with brain growth. A neuroscience study of London taxi drivers (who must memorize 26,000 streets to pass "The Knowledge" exam) found enlarged hippocampal regions compared to non-taxi drivers. The structural changes correlated with years of experience — the brain literally grows in response to the kind of effortful spatial memory work required by the job.
|
|
171
|
+
|
|
172
|
+
Sleep plays a critical role in memory consolidation. Neuroscience professor Matthew Walker (*Why We Sleep*, 2018) argues that memories are consolidated during sleep — complex memories during REM sleep, new information during slow-wave sleep (SWS). Sleep deprivation reduces both encoding and retrieval. The practical implication: a learning session followed by adequate sleep is more effective than two sessions with no sleep between them.
|
|
173
|
+
|
|
174
|
+
**The implication for software learning:** understanding a codebase, an architecture, or a new language requires the same kind of active, effortful construction of mental models. AI can provide the scaffolding, but the user must do the building. And the brain needs rest to cement what was built.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Primary sources
|
|
179
|
+
|
|
180
|
+
- Roediger, H.L. & Karpicke, J.D. (2006). "Test-Enhanced Learning." *Psychological Science*, 17(3), 249–255.
|
|
181
|
+
- Ebbinghaus, H. (1885). *Über das Gedächtnis*. (Memory: A Contribution to Experimental Psychology.)
|
|
182
|
+
- Maguire, E.A. et al. (2000). "Navigation-related structural change in the hippocampi of taxi drivers." *PNAS*, 97(8), 4398–4403.
|
|
183
|
+
- Dweck, C.S. (2006). *Mindset: The New Psychology of Success.* Random House. — Growth mindset only produces results when praise is tied to process and strategy, not ability. Generic ability praise can actively undermine resilience.
|
|
184
|
+
- Hattie, J. & Timperley, H. (2007). "The Power of Feedback." *Review of Educational Research*, 77(1), 81–112. — Four levels of feedback; process-level feedback is most effective for learning; self-level feedback (praise of ability) is least effective.
|
|
185
|
+
- Brown, P.C., Roediger, H.L., & McDaniel, M.A. (2014). *Make It Stick: The Science of Successful Learning.* Harvard University Press.
|
|
186
|
+
- Sweller, J. (1988). "Cognitive Load During Problem Solving." *Cognitive Science*, 12(2), 257–285.
|
|
187
|
+
- Rohrer, D. & Taylor, K. (2007). "The shuffling of mathematics problems improves learning." *Instructional Science*, 35(6), 481–498.
|
|
188
|
+
- Walker, M. (2018). *Why We Sleep.* Penguin.
|
|
189
|
+
- Mannion, J. & McAllister, K. (2020). "The Learning Skills Curriculum." *Impact: Journal of the Chartered College of Teaching.*
|
|
190
|
+
- Lakhani, P. (2021). *Inadequate: The education system is failing our children and what we can do about it.* John Catt Educational. — Chapters 9 (Learning science) and 10 (Education 4.0) provide an accessible synthesis of cognitive load theory, interleaving, metacognition, sleep and memory, growth mindset, and the role of AI in personalised learning. Lakhani grounds these in the context of designing AI-powered education systems (CENTURY Tech) and argues that technology must operate at human speed to be effective.
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Struggle Ladder Reference
|
|
2
|
+
|
|
3
|
+
This file defines the hint escalation system used by the `struggle` action. The goal is to keep the user in productive struggle as long as possible, revealing only what is needed to unblock them — never more.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Core principle
|
|
8
|
+
|
|
9
|
+
The struggle is not a failure state. It is the mechanism of learning. Each attempt — even a wrong one — builds a stronger memory trace than passively receiving the answer. The agent's job is to stay at the edge of the user's competence: challenging enough to require effort, supportive enough to prevent abandonment.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Default configuration
|
|
14
|
+
|
|
15
|
+
- **Default hints before reveal:** 3
|
|
16
|
+
- **User can extend:** yes — say "more hints" to get additional conceptual nudges before the reveal
|
|
17
|
+
- **User can skip:** yes — say "show me" or "I give up" to jump directly to the full solution
|
|
18
|
+
- **User can increase difficulty:** yes — say "harder" to reduce the specificity of each hint
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## The four levels
|
|
23
|
+
|
|
24
|
+
### Level 0 — The problem statement
|
|
25
|
+
|
|
26
|
+
Before any hints, the agent restates the task in clean terms and confirms the user understands *what* they're trying to accomplish. If the user doesn't know where to start at all, Level 0 surfaces that.
|
|
27
|
+
|
|
28
|
+
**What the agent says:**
|
|
29
|
+
- "Let's make sure we're aligned on what we're building. In your own words, what is this function/system supposed to do?"
|
|
30
|
+
- If they can't answer: give a one-sentence description of the goal. Then ask: "What would you try first?"
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
### Level 1 — Conceptual direction
|
|
35
|
+
|
|
36
|
+
Point the user toward the right *area* of thinking without naming the solution or the technique.
|
|
37
|
+
|
|
38
|
+
**What the agent gives:**
|
|
39
|
+
- The domain or category of the solution ("this is fundamentally about ordering", "think about what data structure would let you do X in constant time")
|
|
40
|
+
- A question that reframes the problem ("what would need to be true for this to work?", "what happens if the input is empty?")
|
|
41
|
+
- A reference to something the user already knows that's related ("remember how we handled the similar case in X?")
|
|
42
|
+
|
|
43
|
+
**What the agent does NOT give:**
|
|
44
|
+
- The name of the algorithm or pattern
|
|
45
|
+
- Any code
|
|
46
|
+
- The structure of the solution
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
### Level 2 — Structural hint
|
|
51
|
+
|
|
52
|
+
Describe what the solution *looks like* without writing it. This is about shape and structure, not content.
|
|
53
|
+
|
|
54
|
+
**What the agent gives:**
|
|
55
|
+
- The overall shape: "you'll need a loop here", "this probably has two phases: first X, then Y"
|
|
56
|
+
- The type signature or interface: "the function takes A and returns B"
|
|
57
|
+
- A constraint that narrows the search space: "you don't need recursion here", "this can be done in a single pass"
|
|
58
|
+
- A partial pseudocode sketch in plain English (not code)
|
|
59
|
+
|
|
60
|
+
**What the agent does NOT give:**
|
|
61
|
+
- Actual code in any language
|
|
62
|
+
- The specific variable names or logic
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### Level 3 — Partial code
|
|
67
|
+
|
|
68
|
+
Give the skeleton. Leave the meaningful parts blank for the user to fill in.
|
|
69
|
+
|
|
70
|
+
**What the agent gives:**
|
|
71
|
+
- The function signature
|
|
72
|
+
- The first line or setup code
|
|
73
|
+
- Loop or conditional skeleton with `# your logic here` placeholders
|
|
74
|
+
- The return statement pattern without the expression
|
|
75
|
+
|
|
76
|
+
**Example:**
|
|
77
|
+
```python
|
|
78
|
+
def binary_search(arr, target):
|
|
79
|
+
left, right = 0, len(arr) - 1
|
|
80
|
+
while left <= right:
|
|
81
|
+
mid = # your logic here
|
|
82
|
+
if arr[mid] == target:
|
|
83
|
+
# what do you return?
|
|
84
|
+
elif # condition:
|
|
85
|
+
# adjust left or right?
|
|
86
|
+
else:
|
|
87
|
+
# adjust the other one?
|
|
88
|
+
return -1
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
**What the agent does NOT give:**
|
|
92
|
+
- The filled-in logic
|
|
93
|
+
- Comments explaining what each blank should contain (unless the user asks)
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
### Reveal — Full solution
|
|
98
|
+
|
|
99
|
+
Only shown when:
|
|
100
|
+
- The user has worked through all 3 hints and is still stuck, AND says "show me" or "I give up"
|
|
101
|
+
- OR the user explicitly requests a reveal at any point
|
|
102
|
+
|
|
103
|
+
**What the agent gives:**
|
|
104
|
+
- The complete, working solution
|
|
105
|
+
- A brief explanation of each meaningful part
|
|
106
|
+
- The key insight that makes it work
|
|
107
|
+
|
|
108
|
+
**Mandatory follow-up after reveal:**
|
|
109
|
+
Always ask: "Now that you've seen it — close this and try to re-implement it from scratch, without looking. That's the part that makes it stick."
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Extended hints (user says "more hints")
|
|
114
|
+
|
|
115
|
+
If the user asks for more hints after Level 3 but before reveal, give up to 2 additional micro-hints:
|
|
116
|
+
|
|
117
|
+
- **Micro-hint A:** Focus on the single hardest part — give one more structural clue about just that piece
|
|
118
|
+
- **Micro-hint B:** Give a concrete analogy from a different domain that maps to the solution structure
|
|
119
|
+
|
|
120
|
+
After Micro-hint B, only the reveal remains.
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## "Harder" mode
|
|
125
|
+
|
|
126
|
+
If the user says "harder" at any point:
|
|
127
|
+
- Level 1 becomes purely Socratic: questions only, no directional hints
|
|
128
|
+
- Level 2 becomes conceptual direction (what would have been Level 1)
|
|
129
|
+
- Level 3 becomes structural hint (what would have been Level 2)
|
|
130
|
+
- Reveal is the only way to see actual code
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## Calibrating difficulty
|
|
135
|
+
|
|
136
|
+
The agent should also watch for signs of unproductive struggle — frustration without progress — and adjust:
|
|
137
|
+
|
|
138
|
+
- If the user has been stuck for a long time with no meaningful attempts, it is acceptable to offer a hint one level earlier than scheduled
|
|
139
|
+
- If the user is making genuine attempts (even wrong ones), stay at the current level longer
|
|
140
|
+
- If the user's attempt is partially correct, build on what they got right: "That's the right idea for the first part — what about the case where X?"
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: impeccable
|
|
3
|
+
description: >
|
|
4
|
+
A design quality system for frontend interfaces. 18 focused actions for
|
|
5
|
+
auditing, refining, and elevating UI quality. Invoke with @impeccable
|
|
6
|
+
followed by one of: adapt, animate, audit, bolder, clarify, colorize,
|
|
7
|
+
critique, delight, distill, extract, frontend-design, harden, normalize,
|
|
8
|
+
onboard, optimize, polish, quieter, or teach-impeccable.
|
|
9
|
+
license: MIT
|
|
10
|
+
compatibility: Works with Windsurf Cascade, Claude Code, and any AgentSkills-compatible agent.
|
|
11
|
+
metadata:
|
|
12
|
+
author: favio-vazquez
|
|
13
|
+
version: "1.0"
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
# Impeccable
|
|
17
|
+
|
|
18
|
+
A design quality system composed of 18 focused actions for auditing, refining,
|
|
19
|
+
and elevating frontend interfaces. Each action is a specialist — invoke the one
|
|
20
|
+
that matches your current need.
|
|
21
|
+
|
|
22
|
+
**Core principle:** Good design is intentional. Every action here resists vague
|
|
23
|
+
"make it better" requests by applying a specific, disciplined lens. Use
|
|
24
|
+
`frontend-design` as the foundation — all other actions reference its
|
|
25
|
+
principles and anti-patterns.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Actions
|
|
30
|
+
|
|
31
|
+
### `adapt` — Responsive & cross-platform adaptation
|
|
32
|
+
[adapt/SKILL.md](adapt/SKILL.md)
|
|
33
|
+
|
|
34
|
+
### `animate` — Purposeful motion & micro-interactions
|
|
35
|
+
[animate/SKILL.md](animate/SKILL.md)
|
|
36
|
+
|
|
37
|
+
### `audit` — Comprehensive quality audit
|
|
38
|
+
[audit/SKILL.md](audit/SKILL.md)
|
|
39
|
+
|
|
40
|
+
### `bolder` — Amplify safe or boring designs
|
|
41
|
+
[bolder/SKILL.md](bolder/SKILL.md)
|
|
42
|
+
|
|
43
|
+
### `clarify` — UX copy, microcopy & labels
|
|
44
|
+
[clarify/SKILL.md](clarify/SKILL.md)
|
|
45
|
+
|
|
46
|
+
### `colorize` — Strategic color addition
|
|
47
|
+
[colorize/SKILL.md](colorize/SKILL.md)
|
|
48
|
+
|
|
49
|
+
### `critique` — UX effectiveness evaluation
|
|
50
|
+
[critique/SKILL.md](critique/SKILL.md)
|
|
51
|
+
|
|
52
|
+
### `delight` — Moments of joy & personality
|
|
53
|
+
[delight/SKILL.md](delight/SKILL.md)
|
|
54
|
+
|
|
55
|
+
### `distill` — Strip to essence
|
|
56
|
+
[distill/SKILL.md](distill/SKILL.md)
|
|
57
|
+
|
|
58
|
+
### `extract` — Reusable components & design tokens
|
|
59
|
+
[extract/SKILL.md](extract/SKILL.md)
|
|
60
|
+
|
|
61
|
+
### `frontend-design` — Design foundation & principles
|
|
62
|
+
[frontend-design/SKILL.md](frontend-design/SKILL.md)
|
|
63
|
+
|
|
64
|
+
### `harden` — Resilience, i18n & edge cases
|
|
65
|
+
[harden/SKILL.md](harden/SKILL.md)
|
|
66
|
+
|
|
67
|
+
### `normalize` — Design system consistency
|
|
68
|
+
[normalize/SKILL.md](normalize/SKILL.md)
|
|
69
|
+
|
|
70
|
+
### `onboard` — Onboarding flows & empty states
|
|
71
|
+
[onboard/SKILL.md](onboard/SKILL.md)
|
|
72
|
+
|
|
73
|
+
### `optimize` — Performance & loading speed
|
|
74
|
+
[optimize/SKILL.md](optimize/SKILL.md)
|
|
75
|
+
|
|
76
|
+
### `polish` — Final quality pass before shipping
|
|
77
|
+
[polish/SKILL.md](polish/SKILL.md)
|
|
78
|
+
|
|
79
|
+
### `quieter` — Tone down aggressive designs
|
|
80
|
+
[quieter/SKILL.md](quieter/SKILL.md)
|
|
81
|
+
|
|
82
|
+
### `teach-impeccable` — Project design context setup
|
|
83
|
+
[teach-impeccable/SKILL.md](teach-impeccable/SKILL.md)
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## How to use
|
|
88
|
+
|
|
89
|
+
Invoke with the action that matches your need:
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
@impeccable audit — full quality audit report
|
|
93
|
+
@impeccable polish — final pass before shipping
|
|
94
|
+
@impeccable critique — UX effectiveness review
|
|
95
|
+
@impeccable normalize — align with design system
|
|
96
|
+
@impeccable frontend-design — apply design foundation principles
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
When in doubt, start with `@impeccable audit` to get a full picture, then
|
|
100
|
+
use the specific action it recommends.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## After running any impeccable action
|
|
105
|
+
|
|
106
|
+
When an impeccable action produces a list of recommendations, improvements, or issues — always close with this suggestion:
|
|
107
|
+
|
|
108
|
+
```
|
|
109
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
110
|
+
impeccable ► RECOMMENDATIONS READY
|
|
111
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
112
|
+
|
|
113
|
+
[N] improvements identified. To apply them in a traceable, structured way:
|
|
114
|
+
|
|
115
|
+
▶ Run `/new-milestone` to create a dedicated "UI Polish" or "Design Quality" milestone.
|
|
116
|
+
This turns these recommendations into versioned phases with plans, commits, and
|
|
117
|
+
verification — so nothing gets lost and every improvement is auditable.
|
|
118
|
+
|
|
119
|
+
Or apply them directly now and use `/decision-log` to record what was changed and why.
|
|
120
|
+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
This applies after: `audit`, `critique`, `polish`, `normalize`, `harden`, `adapt`, `optimize`, `bolder`, `quieter`, `colorize`, `clarify`, `delight`, `onboard`, `animate`, `distill`, `extract`.
|
|
124
|
+
|
|
125
|
+
For `teach-impeccable` and `frontend-design` (which set up context, not produce recommendations), skip this suggestion.
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: adapt
|
|
3
|
+
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
|
|
4
|
+
args:
|
|
5
|
+
- name: target
|
|
6
|
+
description: The feature or component to adapt (optional)
|
|
7
|
+
required: false
|
|
8
|
+
- name: context
|
|
9
|
+
description: What to adapt for (mobile, tablet, desktop, print, email, etc.)
|
|
10
|
+
required: false
|
|
11
|
+
user-invokable: true
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
|
|
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
|
+
|