@vpxa/aikit 0.1.308 → 0.1.310

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 (52) hide show
  1. package/package.json +1 -1
  2. package/packages/blocks-core/dist/index.mjs +5 -5
  3. package/packages/blocks-interactive/dist/index.d.mts +1 -1
  4. package/packages/blocks-interactive/dist/index.mjs +2 -2
  5. package/packages/browser/dist/index.js +8 -7
  6. package/packages/cli/dist/index.js +3 -3
  7. package/packages/cli/dist/{init-CyjUXjQw.js → init-DokIBPoi.js} +1 -1
  8. package/packages/cli/dist/{templates-BQ1J4HzY.js → templates-WMcV7ag2.js} +8 -8
  9. package/packages/present/dist/index.html +137 -93
  10. package/packages/server/dist/bin.js +1 -1
  11. package/packages/server/dist/index.js +1 -1
  12. package/packages/server/dist/repair-json-B6Q_HRoP.js +3 -0
  13. package/packages/server/dist/repair-json-D4mft_HA.js +4 -0
  14. package/packages/server/dist/{server-D6sJEw0I.js → server-CUEJEod-.js} +162 -164
  15. package/packages/server/dist/{server-http-B1ixOw2x.js → server-http-C2Vv-0lq.js} +1 -1
  16. package/packages/server/dist/{server-http-BurquBLf.js → server-http-DLqbe1NN.js} +1 -1
  17. package/packages/server/dist/server-stdio-RjYFfC_c.js +1 -0
  18. package/packages/server/dist/server-stdio-h8m_nhNo.js +2 -0
  19. package/packages/server/dist/{server-BSvqfFcK.js → server-uxrUzJ0L.js} +162 -164
  20. package/packages/server/viewers/c4-viewer.html +1 -1
  21. package/packages/server/viewers/canvas.html +4 -4
  22. package/packages/server/viewers/report-template.html +52 -52
  23. package/packages/server/viewers/task-plan-static.html +1 -1
  24. package/packages/server/viewers/tour-viewer.html +4 -4
  25. package/packages/tools/dist/index.d.ts +7 -0
  26. package/packages/tools/dist/index.js +71 -71
  27. package/scaffold/INSTRUCTIONS.md +273 -0
  28. package/scaffold/dist/adapters/copilot.mjs +2 -9
  29. package/scaffold/dist/adapters/hermes-agent.mjs +2 -2
  30. package/scaffold/dist/adapters/hermes.mjs +8 -4
  31. package/scaffold/dist/adapters/intellij.mjs +7 -3
  32. package/scaffold/dist/adapters/skills.mjs +3 -1
  33. package/scaffold/dist/adapters/zed.mjs +6 -2
  34. package/scaffold/dist/definitions/agents.mjs +2 -2
  35. package/scaffold/dist/definitions/bodies.mjs +100 -362
  36. package/scaffold/dist/definitions/protocols.mjs +109 -549
  37. package/scaffold/dist/definitions/skills/adr-skill.mjs +41 -197
  38. package/scaffold/dist/definitions/skills/aikit.mjs +52 -205
  39. package/scaffold/dist/definitions/skills/brainstorming.mjs +74 -112
  40. package/scaffold/dist/definitions/skills/browser-use.mjs +128 -184
  41. package/scaffold/dist/definitions/skills/c4-architecture.mjs +46 -107
  42. package/scaffold/dist/definitions/skills/docs.mjs +70 -214
  43. package/scaffold/dist/definitions/skills/frontend-design.mjs +96 -193
  44. package/scaffold/dist/definitions/skills/lesson-learned.mjs +57 -184
  45. package/scaffold/dist/definitions/skills/multi-agents-development.mjs +98 -408
  46. package/scaffold/dist/definitions/skills/present.mjs +193 -1
  47. package/scaffold/dist/definitions/skills/react.mjs +68 -111
  48. package/scaffold/dist/definitions/skills/repo-access.mjs +24 -169
  49. package/scaffold/dist/definitions/skills/requirements-clarity.mjs +45 -94
  50. package/scaffold/dist/definitions/skills/typescript.mjs +162 -230
  51. package/packages/server/dist/server-stdio-CBmXDMpq.js +0 -1
  52. package/packages/server/dist/server-stdio-z3_zG1HF.js +0 -2
@@ -12,224 +12,135 @@ metadata:
12
12
 
13
13
  # Frontend Design
14
14
 
15
- > Comprehensive frontend design system — visual design thinking, typography, color, layout, motion, accessibility, performance, and anti-pattern detection. Synthesized from Anthropic's frontend-design skill, Vercel Web Interface Guidelines, and Impeccable design patterns.
15
+ Use for UI, layout, styling, responsive behavior, accessibility, motion, theming, and visual review. Frontend agent loads this for every UI task.
16
16
 
17
- ## Quick Reference
17
+ ## Design Loop
18
18
 
19
- **Purpose:** Comprehensive design guidance — typography, color, layout, motion, accessibility, performance, anti-pattern detection.
19
+ 1. Understand user job, audience, content, and constraints.
20
+ 2. Inspect existing design system/tokens/components.
21
+ 3. Pick a direction that fits product domain; avoid generic demo styling.
22
+ 4. Implement with stable responsive dimensions and accessible interaction states.
23
+ 5. Verify desktop/mobile screenshots, keyboard flow, contrast, overflow, loading/error states.
20
24
 
21
- **Mandatory** for the Frontend agent on every task. Also for any UI, styling, responsive, or design work.
25
+ ## Context Checklist
22
26
 
23
- **Context checklist** (infer from codebase if not specified):
24
- Design system? | Brand guidelines? | Accessibility level (AA default)? | Breakpoints? | Motion budget? | Dark mode? | Target platforms?
27
+ Infer from repo when not provided: design system, brand/tokens, breakpoints, dark mode, accessibility target (AA default), motion budget, content model, i18n/RTL, target devices.
25
28
 
26
- **Design cycle:** Understand → Explore → Evaluate → Refine
29
+ ## Foundations
27
30
 
28
- **Key principles:**
29
- - Typography: system font stack, modular scale, max 2 families
30
- - Color: semantic tokens (\`--color-success\`, not \`--green\`), 4.5:1+ contrast
31
- - Layout: CSS Grid for 2D, Flexbox for 1D, \`min()\`/\`clamp()\` for fluid sizing
32
- - Motion: \`prefers-reduced-motion\`, \`will-change\` sparingly, 200-300ms for UI
33
- - Accessibility: semantic HTML first, ARIA only when needed, focus visible, skip links
31
+ Typography:
32
+ - System or existing font stack; max 2 families.
33
+ - Body >=16px mobile; readable line-height; max text width around 65ch.
34
+ - Use hierarchy through size/weight/spacing; no viewport-width font scaling.
34
35
 
35
- **Anti-patterns to catch:** z-index wars, magic numbers, \`!important\` chains, px-only sizing, color-only status indicators.
36
+ Color:
37
+ - Semantic tokens over raw color names.
38
+ - Text contrast >=4.5:1; non-text >=3:1.
39
+ - Status never color-only; pair icon/text/shape.
40
+ - Dark mode rebalances surfaces, not simple invert.
36
41
 
37
- ## When to Use
42
+ Layout:
43
+ - Mobile-first; add breakpoints when layout breaks.
44
+ - Grid for 2D, flex for 1D, container queries when component-owned.
45
+ - Stable dimensions for fixed-format controls/boards/toolbars.
46
+ - Touch targets >=44px when practical.
38
47
 
39
- **MANDATORY** for the Frontend agent on every task. Also use when:
40
- - Building any UI component, page, or layout
41
- - Styling, theming, or visual design work
42
- - Reviewing UI for quality, accessibility, or design consistency
43
- - User says "make it look good", "design", "UI", "styling", "responsive", "dark mode", "animation"
48
+ Motion:
49
+ - Animate transform/opacity; respect prefers-reduced-motion.
50
+ - UI feedback 100-300ms; avoid long decorative motion.
51
+ - Skeleton/loading states should not cause layout jump.
44
52
 
45
- ## Context Gathering Protocol
53
+ ## Accessibility
46
54
 
47
- Before any design work, gather answers to these questions (infer from codebase if user doesn't specify):
55
+ - Use semantic HTML before ARIA.
56
+ - Forms need visible labels and inline errors.
57
+ - Icons-only buttons need labels/tooltips.
58
+ - Keyboard: logical tab order, visible focus, Escape closes overlays.
59
+ - Verify at 200% zoom and with reduced motion.
48
60
 
49
- 1. **Design System** — Does one exist? Tokens, variables, component library?
50
- 2. **Brand Guidelines** — Colors, fonts, logo usage, tone?
51
- 3. **Accessibility Requirements** — WCAG level (AA default), assistive tech?
52
- 4. **Responsive Breakpoints** — Mobile-first? Specific breakpoints?
53
- 5. **Motion Preferences** — Animation budget, reduced-motion support?
54
- 6. **Content Model** — CMS, static, dynamic, i18n?
55
- 7. **Dark Mode** — Required? System preference detection?
56
- 8. **Target Platforms** — Desktop, mobile web, tablet, native?
61
+ ## Product-Fit Rules
57
62
 
58
- ## Design Thinking Process
63
+ Operational/SaaS tools: quiet, dense, scannable, predictable. Avoid marketing hero/card sprawl.
59
64
 
60
- Follow this cycle: **Understand Explore Evaluate Refine**
65
+ Games/creative/editorial surfaces: expressive visuals, motion, and custom assets are appropriate when they serve the activity.
61
66
 
62
- 1. **Understand** What is the user trying to accomplish? What are the constraints?
63
- 2. **Explore** — Generate at minimum 2-3 distinct design directions. Name each direction. Describe the aesthetic and rationale.
64
- 3. **Evaluate** Compare against requirements, accessibility, performance, and the AI Slop Test.
65
- 4. **Refine** — Iterate on the chosen direction. Polish details.
67
+ Landing/brand pages: first viewport must show actual product/place/person/object; hero H1 should be brand/name/offer, not vague value prop.
68
+
69
+ ## Anti-Patterns To Remove
70
+
71
+ - Generic gradient hero, decorative blobs, one-note purple/blue/slate/beige palettes.
72
+ - Nested cards or full page sections styled as floating cards.
73
+ - SVG pseudo-product art when real/generated bitmap asset is needed.
74
+ - Magic spacing, z-index wars, !important chains.
75
+ - Text overflow, clipped labels, overlapping controls, layout shift on hover/loading.
76
+ - Raw stack traces or technical errors exposed to users.
77
+
78
+ ## Implementation Checks
79
+
80
+ - Use existing component library and icon set; lucide when available.
81
+ - Use icons for familiar tool actions; text only for clear commands.
82
+ - Provide empty/loading/error/success/disabled/focus states.
83
+ - Preserve URL/deep-link behavior for navigable app state.
84
+ - Optimize images with dimensions, lazy loading, modern formats.
85
+ - Virtualize large lists; split by route; target LCP <2.5s, INP <200ms, CLS <0.1.
86
+
87
+ ## Before Done
88
+
89
+ Run app checks/tests available in repo. For visual work, inspect with browser screenshots across desktop/mobile and fix overflow/blank/overlap issues before final.
90
+
91
+ ## References
92
+
93
+ Load on demand:
94
+ - references/design-foundations.md — Detailed typography, color, layout, motion, accessibility, forms, i18n, performance, and SSR guidance.
95
+ - references/ai-slop-test.md — Mandatory AI-generated design tell detection checklist (10 patterns to verify and fix).
96
+ `},{file:`references/design-foundations.md`,content:`# Design Foundations (Detailed)
66
97
 
67
98
  ## Typography
68
99
 
69
- ### Hierarchy
70
- - Use a **clear scale**: display → h1 → h2 → h3 → body → caption → overline
71
- - Maximum **3 font sizes** per viewport visible at once
72
- - Use \`font-weight\` to create hierarchy within same size
73
- - Line height: 1.5 for body text, 1.2-1.3 for headings
74
- - **Fluid typography**: use \`clamp()\` for responsive sizing — e.g., \`clamp(1rem, 2.5vw, 1.5rem)\`
75
-
76
- ### Rules
77
- - Never use more than 2 typeface families
78
- - Ensure minimum **16px** body text on mobile
79
- - Use \`rem\` for font sizes, \`em\` for component-relative spacing
80
- - Monospace only for code: use a dedicated code font family
81
- - Set \`max-width: 65ch\` on text blocks for readability
82
- - Use \`text-wrap: balance\` on headings, \`text-wrap: pretty\` on body
83
- - Provide room for **text expansion** (50%+) for i18n
84
-
85
- ## Color
86
-
87
- ### 60-30-10 Rule
88
- - **60%** — Background/surface (neutral)
89
- - **30%** — Secondary/container (brand subtle)
90
- - **10%** — Accent/CTA (brand strong)
91
-
92
- ### Systematic Color
93
- - Define colors as design tokens with semantic names: \`--color-surface\`, \`--color-text-primary\`, \`--color-accent\`
94
- - Every color needs **4.5:1 contrast ratio** minimum (WCAG AA) for text
95
- - Non-text elements need **3:1** minimum
96
- - Never rely on color alone to convey information — pair with icons, text, or patterns
97
- - Test with color blindness simulators
98
-
99
- ### Dark Mode
100
- - Detect system preference with \`prefers-color-scheme\`
101
- - Don't just invert — re-design surfaces: dark surfaces get lighter elevation, reduce saturation
102
- - Smooth transition between modes (CSS transitions on \`background-color\`, \`color\`)
103
- - Diagrams/images: consider \`filter: invert(1)\` or provide alternate assets
104
- - Store user preference and sync with system default
100
+ Use a clear scale: display -> h1 -> h2 -> h3 -> body -> caption. Maximum 3 font sizes visible at once. Use font-weight to create hierarchy within same size. Line height: 1.5 for body, 1.2-1.3 for headings. Use clamp() for fluid responsive sizing. Use rem for font sizes, em for component-relative spacing. Set max-width: 65ch on text blocks. Use text-wrap: balance on headings, text-wrap: pretty on body. Provide 50%+ room for i18n text expansion.
101
+
102
+ ## Color: 60-30-10 Rule
103
+
104
+ 60% Background/surface (neutral), 30% Secondary/container (brand subtle), 10% Accent/CTA (brand strong). Define colors as semantic design tokens: --color-surface, --color-text-primary, --color-accent. Every color needs 4.5:1 contrast minimum for text (WCAG AA), 3:1 for non-text. Never rely on color alone to convey information. Test with color blindness simulators.
105
+
106
+ Dark mode: detect with prefers-color-scheme. Rebalance surfaces rather than simple invert. Dark surfaces get lighter elevation. Reduce saturation. Smooth CSS transitions on background-color and color.
105
107
 
106
108
  ## Layout & Spacing
107
109
 
108
- ### Grid System
109
- - Use an **8px base grid** — all spacing is a multiple of 8 (4px for tight spaces)
110
- - CSS Grid for 2D layouts, Flexbox for 1D alignment
111
- - Consistent spacing tokens: \`--space-xs: 4px\`, \`--space-sm: 8px\`, \`--space-md: 16px\`, \`--space-lg: 24px\`, \`--space-xl: 32px\`, \`--space-2xl: 48px\`, \`--space-3xl: 64px\`
112
-
113
- ### Responsive Design
114
- - **Mobile-first**: design for 320px, scale up
115
- - Breakpoints: only add when the layout breaks, not at device widths
116
- - Use \`container queries\` for component-level responsiveness
117
- - Fluid layouts with \`minmax()\`, \`auto-fill\`, \`auto-fit\`
118
- - Every interactive target: minimum **44×44px** touch area (WCAG 2.5.5)
119
-
120
- ### Rules
121
- - Use consistent gutters — don't mix random padding values
122
- - Stacking: define a z-index scale (e.g., base: 0, dropdown: 100, modal: 200, toast: 300)
123
- - Avoid magic numbers — extract to named tokens
124
-
125
- ## Motion & Animation
126
-
127
- ### Principles
128
- - **Purpose before polish** — every animation must serve a purpose: orientation, feedback, continuity, or delight
129
- - **Spring physics** over linear easing — use \`cubic-bezier(0.175, 0.885, 0.32, 1.275)\` or spring-based libraries
130
- - Duration budget: micro-interactions **100-200ms**, transitions **200-400ms**, page transitions **300-500ms**
131
- - Never exceed **500ms** unless it's a storytelling/onboarding animation
132
-
133
- ### Performance
134
- - Animate only \`transform\` and \`opacity\` — these run on the compositor thread
135
- - Never animate \`width\`, \`height\`, \`top\`, \`left\`, \`margin\`, \`padding\` (trigger layout)
136
- - Use \`will-change\` sparingly and only before the animation starts
137
- - \`requestAnimationFrame\` for JS animations
138
-
139
- ### Accessibility
140
- - **Always respect \`prefers-reduced-motion\`**: reduce or remove animations when set
141
- - Layout animations: use \`layout\` prop (Framer Motion) or FLIP technique
142
- - Skeleton screens during loading — never an empty blank page
143
- - Skeleton loading → content: smooth fade transition, not a hard swap
144
-
145
- ### Patterns
146
- - Enter/exit transitions with stagger for lists
147
- - Shared element transitions between route changes
148
- - Micro-interactions on hover/focus: subtle scale, bg-color shift, shadow change
149
- - Pull-to-refresh, swipe gestures (mobile) with physics-based feel
110
+ Use an 8px base grid. CSS Grid for 2D, Flexbox for 1D. Define spacing tokens: --space-xs: 4px, --space-sm: 8px, --space-md: 16px, --space-lg: 24px, --space-xl: 32px.
150
111
 
151
- ## Accessibility (WCAG AA Mandatory)
112
+ Responsive: mobile-first from 320px. Add breakpoints only when layout breaks, not at device widths. Use container queries for component-level responsiveness. Fluid layouts with minmax(), auto-fill, auto-fit. Minimum 44x44px touch targets (WCAG 2.5.5). Define z-index scale (base: 0, dropdown: 100, modal: 200, toast: 300).
152
113
 
153
- ### Structure
154
- - Use **semantic HTML**: \`header\`, \`nav\`, \`main\`, \`section\`, \`article\`, \`aside\`, \`footer\`
155
- - Every \`<img>\` has a meaningful \`alt\` (or \`alt=""\` for decorative)
156
- - Every form field has a visible \`<label>\` (not just placeholder)
157
- - Headings form a logical hierarchy (\`h1\` → \`h2\` → \`h3\`, no skipping)
158
-
159
- ### Keyboard Navigation
160
- - All interactive elements reachable via **Tab** key
161
- - Logical tab order (follows visual reading order)
162
- - Focus indicators: visible, high-contrast, never \`outline: none\` without replacement
163
- - Escape to close modals/dropdowns, Enter/Space to activate
164
- - Skip-to-content link for screen readers
165
-
166
- ### Screen Readers
167
- - ARIA labels on icons-only buttons: \`aria-label="Close"\`
168
- - Live regions for dynamic content: \`aria-live="polite"\` for updates, \`"assertive"\` for errors
169
- - Landmark roles if semantic HTML is insufficient
170
- - Don't use ARIA when a native HTML element works (\`<button>\` not \`<div role="button">\`)
171
-
172
- ### Testing
173
- - Tab through entire flow without mouse
174
- - Test with screen reader (NVDA, VoiceOver)
175
- - Run Lighthouse accessibility audit
176
- - Test at 200% zoom — nothing should break or overflow
114
+ ## Motion
177
115
 
178
- ## Forms
116
+ Every animation must serve a purpose: orientation, feedback, continuity, delight. Spring physics over linear easing. Micro-interactions 100-200ms, transitions 200-400ms, never exceed 500ms except storytelling/onboarding. Animate only transform and opacity (compositor thread). Never animate width, height, top, left, margin, padding. Use will-change sparingly. Always respect prefers-reduced-motion. Skeleton screens during loading, never blank pages.
179
117
 
180
- - **Instant inline validation** — validate on blur, not on every keystroke
181
- - Show error messages below the field, not in an alert
182
- - Preserve user input on error — never clear a form on submit failure
183
- - **Auto-save** drafts for long forms (debounced)
184
- - Use \`inputmode\` for mobile: \`numeric\`, \`email\`, \`tel\`, \`url\`
185
- - Multi-step forms: show progress indicator and allow back-navigation
186
- - File uploads: drag-and-drop zone, progress indicator, file type restrictions, preview
187
- - **Optimistic UI**: show success immediately, revert on error
118
+ ## Accessibility (WCAG AA Mandatory)
188
119
 
189
- ## Navigation & State
120
+ Use semantic HTML: header, nav, main, section, article, aside, footer. Every img has meaningful alt. Every form field has visible label. Headings form logical hierarchy (no skipping).
190
121
 
191
- - URL should always reflect application state (\`/settings/profile\` not \`/settings#profile\`)
192
- - Support deep linking — any URL should be shareable and land on the right view
193
- - Breadcrumbs for hierarchical navigation (3+ levels deep)
194
- - Keyboard shortcuts for power users (document them)
195
- - Browser back/forward must work correctly — don't break history
122
+ Keyboard: all interactive elements reachable via Tab. Logical tab order. Visible focus indicators, never outline: none without replacement. Escape closes modals/dropdowns. Skip-to-content link.
196
123
 
197
- ## Performance
124
+ Screen readers: ARIA labels on icon-only buttons, live regions for dynamic content (aria-live="polite" for updates, "assertive" for errors), landmark roles if semantic HTML insufficient. Do not use ARIA when native HTML element works.
198
125
 
199
- - **Virtual scroll** for lists > 100 items don't render 10,000 DOM nodes
200
- - **Lazy load** images: use \`loading="lazy"\`, provide dimensions to prevent layout shift
201
- - **Prefetch** next-likely routes on hover/viewport intersection
202
- - **Code split** by route — each page only loads its own JavaScript
203
- - **Edge rendering** — render at the CDN edge when possible (SSR, RSC)
204
- - Optimize images: use \`<picture>\` with WebP/AVIF + fallback
205
- - Font loading: \`font-display: swap\`, preload critical fonts
206
- - Target LCP < 2.5s, INP < 200ms, CLS < 0.1
126
+ Test: tab through entire flow without mouse. Test with NVDA/VoiceOver. Run Lighthouse audit. Test at 200% zoom.
207
127
 
208
- ## Error Handling
128
+ ## Forms
209
129
 
210
- - **Graceful degradation** partial failures shouldn't crash the entire page
211
- - Show retry buttons on transient errors
212
- - Offline indicator when network is lost
213
- - Clear error messages: what happened, what the user can do about it
214
- - Error boundaries in React: catch rendering errors, show fallback UI
215
- - Never show raw error messages, stack traces, or error codes to users
130
+ Instant inline validation on blur, not every keystroke. Show error messages below the field. Preserve user input on error. Auto-save drafts for long forms (debounced). Use inputmode for mobile: numeric, email, tel, url. Multi-step forms: show progress and allow back-navigation. File uploads: drag-and-drop zone, progress, preview.
216
131
 
217
- ## SSR & Hydration
132
+ ## Internationalization
218
133
 
219
- - Prevent hydration mismatches: no \`Date.now()\`, \`Math.random()\`, \`window\` in server render
220
- - Use streaming SSR for faster TTFB
221
- - Optimistic mutations: update UI before server confirms
222
- - Handle loading states with Suspense boundaries
134
+ Use logical properties (margin-inline-start not margin-left). Format dates/numbers/currencies locale-aware. Plan for 50% text expansion for German/French. Test with CJK, Arabic, emoji. Externalize all user-visible strings.
223
135
 
224
- ## Internationalization (i18n)
136
+ ## Performance
137
+
138
+ Virtual scroll for lists >100 items. Lazy load images with loading="lazy", provide dimensions. Prefetch next-likely routes on hover/viewport intersection. Code split by route. Optimize images with picture element and WebP/AVIF. Use font-display: swap, preload critical fonts. Target LCP <2.5s, INP <200ms, CLS <0.1.
225
139
 
226
- - **RTL support**: use logical properties (\`margin-inline-start\` not \`margin-left\`)
227
- - Format dates/numbers/currencies locale-aware — never hardcode formats
228
- - Text expansion room: German/French can be 50%+ longer than English
229
- - Unicode support: test with CJK, Arabic, emoji
230
- - Externalize all user-visible strings
140
+ ## Error Handling
231
141
 
232
- ## AI Slop Test MANDATORY CHECK
142
+ Graceful degradation partial failures should not crash the entire page. Show retry buttons on transient errors. Offline indicator when network is lost. Clear error messages: what happened and what the user can do. React Error Boundaries. Never show raw stack traces or error codes to users.
143
+ `},{file:`references/ai-slop-test.md`,content:`# AI Slop Test — Mandatory Check
233
144
 
234
145
  Before shipping ANY design, verify it does NOT have these AI-generated tells:
235
146
 
@@ -237,22 +148,14 @@ Before shipping ANY design, verify it does NOT have these AI-generated tells:
237
148
  |-----------------|---------------|
238
149
  | Centered hero + gradient blob | Does it look like every AI demo landing page? ADD ASYMMETRY |
239
150
  | Lowercase geometric sans headings | Add personality: case choices, weight variation, size contrast |
240
- | Purple-to-blue gradient | If using gradients, use brand-specific or creative color stops |
151
+ | Purple-to-blue gradient | Use brand-specific or creative color stops |
241
152
  | Uniform card grid with icon + heading + text | Vary card sizes, add imagery, break the grid |
242
153
  | Stock illustration style | Use real photos, custom illustrations, or no imagery |
243
154
  | "Modern SaaS template" look | Add something unexpected: editorial layout, bold typography, color blocking |
244
- | Generic placeholder copy | Real content or clearly marked FPO (For Placement Only) |
155
+ | Generic placeholder copy | Real content or clearly marked FPO |
245
156
  | Identical padding everywhere | Vary rhythm — tight grouping inside sections, generous between |
246
157
  | No texture or depth | Add subtle noise, shadows, borders, layering |
247
158
  | Perfectly symmetrical everything | Break symmetry deliberately — offset grids, varied alignments |
248
159
 
249
- If 3+ items match **STOP and redesign**. The goal is distinctive, not generic.
250
-
251
- ## Implementation Principles
252
-
253
- 1. **Design tokens before code** — define variables/tokens first, then use them everywhere
254
- 2. **Component boundaries** — each component owns its internal layout, parent owns its placement
255
- 3. **Progressive enhancement** — works without JS, enhanced with JS
256
- 4. **Content-first** — design with real content, not lorem ipsum
257
- 5. **Test in context** — view components inside the actual page, not just in isolation
160
+ If 3+ items match -> STOP and redesign. The goal is distinctive, not generic.
258
161
  `}];export{e as default};
@@ -136,7 +136,7 @@ Use this as a lookup table. When you spot a pattern in a diff, find the matching
136
136
  **Signals:** Multiple related parameters grouped into a single options/config object. Function signatures simplified.
137
137
  `},{file:`SKILL.md`,content:`---
138
138
  name: lesson-learned
139
- description: "Extract and persist engineering lessons from code changes into AI Kit memory. MUST use after completing ANY implementation, refactoring, debugging, or code review task do NOT wait for user to ask. Also triggers on explicit requests: 'lesson', 'takeaway', 'what did I learn', 'reflect', 'principles'. Every completed task produces reusable lessons; skipping this loses institutional knowledge that prevents future rework."
139
+ description: "Extract and persist engineering lessons from code changes into AI Kit memory. Use after implementation, refactoring, debugging, or code review tasks; also when user asks for lesson, takeaway, reflection, or principles. Produces reusable, evidence-grounded lessons without bloating memory."
140
140
  metadata:
141
141
  category: cross-cutting
142
142
  domain: general
@@ -149,214 +149,87 @@ metadata:
149
149
 
150
150
  # Lesson Learned
151
151
 
152
- Extract specific, grounded software engineering lessons from actual code changes. Not a lecture -- a mirror. Show the user what their code already demonstrates, and only elevate lessons that are earned by the diff.
152
+ Extract durable engineering lessons from actual work. Lessons are not summaries; they are reusable principles proven by diff, test, or review evidence.
153
153
 
154
- ## Auto-Trigger Protocol
154
+ ## When
155
155
 
156
- This skill MUST activate after any task that modifies code. The agent does NOT need user permission.
156
+ Run after implementation, refactor, debugging, or review. Skip pure formatting/config churn unless it revealed a reusable process lesson.
157
157
 
158
- **Activation flow:**
159
- 1. Task complete (implementation/refactor/debug/review done)
160
- 2. Load this skill
161
- 3. Run Phase 1-5 (takes ~30 seconds of analysis)
162
- 4. Present lesson to user and persist to AI Kit memory
158
+ ## Flow
163
159
 
164
- **Skip conditions (ONLY skip if ALL are true):**
165
- - Changes are pure config/formatting (no logic changed)
166
- - Less than 5 lines of substantive code modified
167
- - Change is a trivial typo or import reorder
160
+ 1. Inspect diff and verification results.
161
+ 2. Identify 1-2 non-obvious principles future agents can reuse.
162
+ 3. Ground each lesson in file/line, commit, test, or tool receipt.
163
+ 4. Check existing lessons to avoid duplicates.
164
+ 5. Store with knowledge lesson create or remember, confidence 60-70 for single observation, 80+ for repeated pattern.
168
165
 
169
- ## Phase 1: Determine Scope
170
-
171
- Ask the user or infer from context what to analyze.
172
-
173
- | Scope | Git Commands | When to Use |
174
- |-------|-------------|-------------|
175
- | Feature branch | \`git log main..HEAD --oneline\` + \`git diff main...HEAD\` | User is on a non-main branch (default) |
176
- | Last N commits | \`git log --oneline -N\` + \`git diff HEAD~N..HEAD\` | User specifies a range, or on main (default N=5) |
177
- | Specific commit | \`git show <sha>\` | User references a specific commit |
178
- | Working changes | \`git diff\` + \`git diff --cached\` | User says "what about these changes?" before committing |
179
-
180
- **Default behavior:**
181
- - If on a feature branch: analyze branch commits vs main
182
- - If on main: analyze the last 5 commits
183
- - If the user provides a different scope, use that
184
-
185
- ## Phase 2: Gather Changes
186
-
187
- Use git log/diff to collect the changeset. Expert constraints:
188
- - **500-line threshold:** If diff > 500 lines, focus on the 3-5 most-changed files only
189
- - **Only read changed files** -- never speculatively read unchanged code for "context"
190
- - **Commit messages are clues** -- scan first, read code second
191
-
192
- ## Phase 3: Analyze
166
+ ## Good Lesson Shape
193
167
 
194
- Apply this decision tree to find the dominant lesson:
168
+ - Situation: when this applies.
169
+ - Insight: principle or pattern.
170
+ - Evidence: exact file/test/tool receipt.
171
+ - Boundary: when not to apply it.
195
172
 
196
- 1. **Is there a structural change?** (files split/merged, new module boundary, layer introduced)
197
- -> Lesson is about architecture principles (SRP, Separation of Concerns, Cohesion)
173
+ Bad: vague praise, task summary, restating code, or broad universal claims from one tiny change.
198
174
 
199
- 2. **Is there a removed or simplified path?** (deleted code, simplified conditionals, fewer dependencies)
200
- -> Lesson is about simplicity principles (YAGNI, KISS, Premature Abstraction avoidance)
175
+ ## Memory Hygiene
201
176
 
202
- 3. **Is there error handling or edge case work?** (try/catch added, validation, fallbacks)
203
- -> Lesson is about robustness principles (Fail Fast, Defensive Programming)
177
+ Search before storing. Confirm/contradict existing lessons when new evidence supports or invalidates them. Prune/group/promote only during maintenance or when asked.
204
178
 
205
- 4. **Is there duplication resolved?** (extracted shared logic, parameterized, DRY applied)
206
- -> Lesson is about DRY and Rule of Three
179
+ ## References
207
180
 
208
- 5. **Is there a naming or API change?** (renames, interface changes, contract adjustments)
209
- -> Lesson is about Principle of Least Surprise and Encapsulation
181
+ Load anti-patterns.md for low-quality lesson smells. Load se-principles.md for naming/generalization help. Load references/extraction-workflow.md for the detailed 5-phase extraction workflow with git commands and categorization rubric.
210
182
 
211
- 6. **None of the above clearly dominate?**
212
- -> The changes may be routine. Check commit messages for unstated intent. If still nothing emerges, be honest that no deep lesson exists.
183
+ ## Output
213
184
 
214
- For the dominant pattern, map to the specific principle from \`references/se-principles.md\` when needed and cite the concrete code change that demonstrates it.
185
+ Report created/updated/skipped lessons, confidence, evidence, and reason if skipped.
186
+ `},{file:`references/extraction-workflow.md`,content:`# Lesson Extraction Workflow
215
187
 
216
- ## Quality Gate
217
-
218
- A lesson is only worth presenting if ALL of these are true:
219
- - **Non-obvious** -- someone reading the diff would not immediately see it without prompting
220
- - **Actionable** -- it changes future behavior, not just "interesting observation"
221
- - **Specific** -- cites actual file:line, not generic advice
222
- - **Earned** -- emerges naturally from the code, not force-fit to a principle
223
-
224
- If no lesson meets all four criteria, say so honestly: "These changes are solid execution -- no deep lesson here beyond good engineering practice."
225
-
226
- ## Phase 4: Present the Lesson
227
-
228
- Use this template:
188
+ ## Phase 1: Determine Scope
229
189
 
230
- \`\`\`markdown
231
- ## Lesson: [Principle Name]
190
+ | Scope | Git Commands | When to Use |
191
+ |-------|-------------|-------------|
192
+ | Feature branch | \`git log main..HEAD --oneline\` + \`git diff main...HEAD\` | User is on a non-main branch (default) |
193
+ | Last N commits | \`git log --oneline -N\` + \`git diff HEAD~N..HEAD\` | User specifies a range, or on main (default N=5) |
194
+ | Single commit | \`git show --stat <sha>\` | User specifies a specific commit |
195
+ | Working tree only | \`git diff --stat\` | Pre-commit review, no commits yet |
232
196
 
233
- **What happened in the code:**
234
- [2-3 sentences describing the specific change, referencing files and commits]
197
+ Ask the user or infer from context what to analyze.
235
198
 
236
- **The principle at work:**
237
- [1-2 sentences explaining the SE principle]
199
+ ## Phase 2: Extract Patterns
238
200
 
239
- **Why it matters:**
240
- [1-2 sentences on the practical consequence -- what would go wrong without this, or what goes right because of it]
201
+ Read the diff output and identify recurring patterns. Look for:
202
+ - Repeated structural changes (extract method, add interface, remove duplication)
203
+ - Error handling or validation additions
204
+ - Naming or API improvements
205
+ - Performance or correctness fixes
241
206
 
242
- **Takeaway for next time:**
243
- [One concrete, actionable sentence the user can apply to future work]
244
- \`\`\`
207
+ Filter out: pure formatting, whitespace changes, import reordering, mechanical renames.
245
208
 
246
- If there is a second lesson worth noting, include at most one more:
209
+ ## Phase 3: Validate
247
210
 
248
- \`\`\`markdown
249
- ---
211
+ For each candidate lesson:
212
+ - Is it evidenced by the diff? (file/line reference required)
213
+ - Is it non-obvious? (not "use const instead of let")
214
+ - Is it reusable? (would another agent benefit from knowing this?)
215
+ - Is it specific? (not "write better code")
250
216
 
251
- ### Also worth noting: [Principle Name]
217
+ Discard candidates that fail two or more checks.
252
218
 
253
- **In the code:** [1 sentence]
254
- **The principle:** [1 sentence]
255
- **Takeaway:** [1 sentence]
256
- \`\`\`
219
+ ## Phase 4: Categorize
257
220
 
258
- Do not present more than 2 lessons total. If the diff is mostly clean execution with no deeper pattern, say that directly.
221
+ | Category | Store as | Confidence | Example |
222
+ |----------|----------|------------|---------|
223
+ | Reusable principle | lesson create | 70-90 | "Extract IO from business logic for testability" |
224
+ | One-time observation | remember | 50-60 | "This project uses Biome over ESLint" |
225
+ | Not useful | Skip | 0 | "Changed variable name" |
259
226
 
260
227
  ## Phase 5: Persist
261
228
 
262
- After presenting, store the lesson for cross-session recall using the confidence-tracked lesson system:
263
-
264
- ~~~
265
- knowledge({ action: "lesson", subAction: "create", title: "<short principle name>", context: "<what happened the code situation>", insight: "<what was learned — the principle applied>", evidence: "<proof — commit SHA, file:line, test result>", confidence: 70 })
266
- ~~~
267
-
268
- **Confidence scale:**
269
- - 50-60: Single observation, no corroboration yet
270
- - 60-70: Clear pattern from one changeset (default starting point)
271
- - 70-80: Same pattern observed in 2+ independent changes
272
- - 80-90: Pattern confirmed across multiple PRs/sessions
273
- - 90+: Fundamental principle validated repeatedly -- treat as convention
274
-
275
- Confidence decays over time based on access recency (Ebbinghaus curve). Accessing a lesson via \`withdraw\` or \`list-lessons\` implicitly reinforces it.
276
-
277
- If you encounter a lesson that CONFIRMS a previously stored one:
278
- ~~~
279
- knowledge({ action: "lesson", subAction: "confirm", id: "<lesson-path>" })
280
- ~~~
281
-
282
- If a lesson CONTRADICTS a previously stored one:
283
- ~~~
284
- knowledge({ action: "lesson", subAction: "contradict", id: "<lesson-path>", reason: "<why the old lesson no longer holds>" })
285
- ~~~
286
-
287
- Before creating a new lesson, check existing ones: \`knowledge({ action: "lesson", subAction: "list-lessons" })\`
288
- Only create if no existing lesson already covers this insight.
289
-
290
- ### Passive Learning (auto-observe)
291
- The server automatically observes tool output patterns and can detect:
292
- - Repeated error -> fix cycles (suggests lessons about common pitfalls)
293
- - Consistent code patterns across files (suggests convention lessons)
294
- - Recurring search queries (suggests documentation gaps)
295
-
296
- Trigger manually: \`knowledge({ action: "lesson", subAction: "auto-observe", buffer: "<tool output>" })\`
297
- Usually runs automatically via exec-hooks -- agents don't need to call this directly.
298
-
299
- ## Phase 6: Lifecycle Maintenance (Periodic)
300
-
301
- Run these periodically (every few sessions) to maintain knowledge quality:
302
-
303
- ### Prune Stale Lessons
304
- \`\`\`
305
- knowledge({ action: "lesson", subAction: "prune" }) // dry-run: shows candidates
306
- knowledge({ action: "lesson", subAction: "prune", dryRun: false }) // execute: archives stale lessons
307
- \`\`\`
308
- Archives lessons where: decayed confidence < 15 AND last accessed > 30 days ago.
309
- Safety: minimum 3 lessons always retained, dry-run by default.
310
-
311
- ### Group Similar Lessons
312
- \`\`\`
313
- knowledge({ action: "lesson", subAction: "group" }) // dry-run: shows proposed groups
314
- knowledge({ action: "lesson", subAction: "group", dryRun: false }) // execute: adds group tags
315
- \`\`\`
316
- Clusters lessons with similar titles (Jaccard > 0.7), adds \`group:<label>\` tags.
317
- Non-destructive -- only adds tags, never modifies content.
318
-
319
- ### Cross-Project Promotion
320
- \`\`\`
321
- knowledge({ action: "lesson", subAction: "promote" }) // dry-run: shows candidates
322
- knowledge({ action: "lesson", subAction: "promote", dryRun: false }) // execute: copies to global
323
- knowledge({ action: "lesson", subAction: "demote", path: "<path>" }) // remove from global
324
- \`\`\`
325
- Requires user-level install. Scans all workspaces for similar lessons (Jaccard > 0.7 on insight text).
326
- Promotes when: found in 2+ workspaces AND average confidence >= 80.
327
- Global lessons available to ALL workspaces via \`workspaces: ["*"]\`.
328
-
329
- ### Recommended Maintenance Cadence
330
- - **Every 5 sessions**: \`prune\` (dry-run review)
331
- - **Every 10 sessions**: \`group\` to organize
332
- - **Monthly**: \`promote\` to share universal lessons across projects
333
-
334
- ## What NOT to Do
335
-
336
- | Avoid | Why | Instead |
337
- |-------|-----|---------|
338
- | Listing every principle that vaguely applies | Overwhelming and generic | Pick the 1-2 most relevant |
339
- | Analyzing files that were not changed | Scope creep | Stick to the diff |
340
- | Ignoring commit messages | They contain intent that diffs miss | Read them as primary context |
341
- | Abstract advice disconnected from the code | Not actionable | Always reference specific files/lines |
342
- | Negative-only feedback | Demoralizing | Lead with what works, then suggest improvements |
343
- | More than 2 lessons | Dilutes the insight | One well-grounded lesson beats seven vague ones |
344
-
345
- ## NEVER
346
-
347
- - **NEVER present obvious refactoring as a lesson** ("the code got cleaner") -- this is table stakes, not insight
348
- - **NEVER force-fit a principle** that does not naturally emerge from the diff -- if you have to stretch to connect code to principle, the connection is not there
349
- - **NEVER produce more than 2 lessons** per analysis -- one well-grounded insight beats seven vague observations
350
- - **NEVER use "best practice" without citing WHICH practice and WHY it is best HERE** -- "best practice" is the refuge of those who cannot explain the reasoning
351
- - **NEVER analyze files that were not changed** -- scope creep dilutes focus
352
- - **NEVER start with criticism** -- lead with what the code demonstrates well, then optionally note opportunities
353
- - **NEVER produce a lesson without a concrete code reference** -- if you cannot point to a specific line or commit, the lesson is too abstract
354
-
355
- ## Conversation Style
356
-
357
- - **Reflective, not prescriptive.** Use the user's own code as primary evidence.
358
- - **Never say "you should have..."** -- instead use "the approach here shows..." or "next time you face this, consider..."
359
- - **If the code is good, say so.** Not every lesson is about what went wrong. Recognizing good patterns reinforces them.
360
- - **If the changes are trivial** (a single config tweak, a typo fix), say so honestly rather than forcing a lesson. "These changes are straightforward -- no deep lesson here, just good housekeeping."
361
- - **Be specific.** Generic advice is worthless. Every claim must point to a concrete code change.
229
+ - Use \`knowledge({ action: "lesson", subAction: "create" })\` for new lessons
230
+ - Use \`knowledge({ action: "lesson", subAction: "confirm" })\` when new evidence supports an existing lesson
231
+ - Use \`knowledge({ action: "lesson", subAction: "contradict" })\` when new evidence invalidates an existing lesson
232
+ - Set confidence 60-70 for single observation, 80+ when multiple diffs confirm the same pattern
233
+
234
+ After persisting, report: created/updated/skipped lessons, confidence, evidence citation, and reason if skipped.
362
235
  `}];export{e as default};