thomas-agentkit 0.8.0 → 0.9.0-alpha.1

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 (29) hide show
  1. package/README.md +101 -9
  2. package/dist/cli.js +145 -32
  3. package/dist/skill-install.js +125 -0
  4. package/package.json +3 -1
  5. package/templates/.cursor/rules/agentkit.md +1 -1
  6. package/templates/.github/copilot-instructions.md +1 -1
  7. package/templates/AGENTS.md +1 -1
  8. package/templates/WORKFLOWS.md +1 -1
  9. package/templates/design-systems/apple.md +74 -209
  10. package/templates/design-systems/cursor.md +95 -0
  11. package/templates/design-systems/framer.md +95 -0
  12. package/templates/design-systems/linear.md +95 -207
  13. package/templates/design-systems/notion.md +94 -0
  14. package/templates/design-systems/warp.md +89 -0
  15. package/templates/skills/agentkit/SKILL.md +101 -0
  16. package/templates/skills/agentkit/agents/openai.yaml +4 -0
  17. package/templates/skills/agentkit/references/design-baselines/apple.md +101 -0
  18. package/templates/skills/agentkit/references/design-baselines/cursor.md +95 -0
  19. package/templates/skills/agentkit/references/design-baselines/framer.md +95 -0
  20. package/templates/skills/agentkit/references/design-baselines/linear.md +117 -0
  21. package/templates/skills/agentkit/references/design-baselines/notion.md +94 -0
  22. package/templates/skills/agentkit/references/design-baselines/warp.md +89 -0
  23. package/templates/skills/agentkit/references/design.md +100 -0
  24. package/templates/skills/agentkit/references/doctor.md +133 -0
  25. package/templates/skills/agentkit/references/file-contract.md +164 -0
  26. package/templates/skills/agentkit/references/init.md +213 -0
  27. package/templates/skills/agentkit/references/learn.md +149 -0
  28. package/templates/skills/agentkit/references/repair.md +119 -0
  29. package/templates/skills/agentkit/references/update.md +202 -0
@@ -1,229 +1,117 @@
1
- # [Project Name] Design System - Linear-Inspired Foundations
1
+ # [Project Name] Design Linear
2
+
3
+ Design spec for [Project Name]. Map every `{colors.*}`, `{typography.*}`, `{spacing.*}`, and `{rounded.*}` token to semantic roles in `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme. Do not hardcode literal hex values in components.
4
+
5
+ ## Overview
6
+
7
+ Dark-canvas marketing system: near-black canvas with a faint cool tint, light gray ink, and a single lavender-blue accent used scarcely on brand mark, focus rings, and primary CTAs. Hierarchy comes from a four-step surface ladder and hairline borders — not shadows. Product UI screenshots dominate section composition.
8
+
9
+ **Key characteristics:**
10
+ - Dark canvas anchor; no light-mode marketing variant
11
+ - Single chromatic accent (`{colors.primary}`) — no second brand color
12
+ - Surface ladder: canvas → surface-1 → surface-2 → surface-3 → surface-4
13
+ - Aggressive negative letter-spacing on display sizes
14
+ - Cards: `{rounded.lg}` with 1px hairlines; product panels `{rounded.xl}`
15
+ - No atmospheric gradients or spotlight cards
2
16
 
3
- This design system codifies the visual and interaction principles for [Project Name].
17
+ ## Colors
4
18
 
5
- It is the default source of truth for app shell layout, navigation, lists, controls, and page chrome in this repository.
19
+ ### Brand & Accent
20
+ - `{colors.primary}` — signature accent (CTA, brand mark, link emphasis, focus tint)
21
+ - `{colors.primary-hover}` — lighter hover state for primary CTA
22
+ - `{colors.primary-focus}` — focus-ring tint
23
+ - `{colors.on-primary}` — text on primary fills
6
24
 
7
- All colors, typography families, and radii must be consumed through semantic tokens in `[theme stylesheet path, e.g. src/styles.css]` or a dedicated theme stylesheet imported there. Components must not hardcode literal color values or font family names.
25
+ ### Surface
26
+ - `{colors.canvas}` — default page background (deepest dark)
27
+ - `{colors.surface-1}` through `{colors.surface-4}` — stepped lifts for cards, panels, sub-nav
28
+ - `{colors.hairline}`, `{colors.hairline-strong}`, `{colors.hairline-tertiary}` — 1px borders
29
+ - `{colors.inverse-canvas}`, `{colors.inverse-surface-1}`, `{colors.inverse-surface-2}` — inverse pill surfaces
8
30
 
9
- ## 1) Surface And Color
31
+ ### Text
32
+ - `{colors.ink}` — headlines and emphasized body
33
+ - `{colors.ink-muted}`, `{colors.ink-subtle}`, `{colors.ink-tertiary}` — secondary through quaternary
10
34
 
11
- ### Philosophy
35
+ ### Semantic
36
+ - `{colors.semantic-success}` — status pills only
37
+ - `{colors.semantic-overlay}` — modal scrim
12
38
 
13
- The interface is a single continuous canvas. Separation comes from spacing, typography, and occasional structural seams, not stacked containers.
39
+ ## Typography
14
40
 
15
- ### Token Roles
41
+ ### Font Family
42
+ - Display/body sans with tight tracking at large sizes; mono for code in product screenshots only
43
+ - Substitute: Inter or system UI stack; JetBrains Mono or Geist Mono for mono
16
44
 
17
- Define semantic CSS custom properties and map them to the project's theme tokens:
45
+ ### Hierarchy (map sizes to your scale)
18
46
 
19
- - `--background`: app canvas
20
- - `--foreground`: primary text
21
- - `--muted-foreground`: secondary/meta text
22
- - `--border`: structural seams
23
- - `--card`: elevated container for dialogs/popovers only
24
- - `--popover`: overlay surfaces
25
- - `--accent`: subtle hover/active in content areas
26
- - `--sidebar`: sidebar canvas
27
- - `--sidebar-accent`: hover/active in sidebar
28
- - `--primary`: brand and primary CTA
29
- - `--destructive`: danger actions
30
- - `--ring`: focus ring
47
+ | Token | Use |
48
+ |---|---|
49
+ | `{typography.display-xl}` | Largest hero headline |
50
+ | `{typography.display-lg}` | Section openers |
51
+ | `{typography.display-md}` | Sub-section headlines |
52
+ | `{typography.headline}` | Pricing tier titles, CTA banners |
53
+ | `{typography.card-title}` | Feature card titles |
54
+ | `{typography.subhead}` | Lead body |
55
+ | `{typography.body-lg}` | Hero subhead |
56
+ | `{typography.body}` | Default body |
57
+ | `{typography.body-sm}` | Card body, footer |
58
+ | `{typography.caption}` | Meta, status |
59
+ | `{typography.button}` | Button labels |
60
+ | `{typography.eyebrow}` | Section eyebrow (slight positive tracking) |
61
+ | `{typography.mono}` | Code in screenshots |
31
62
 
32
- ### Rules
63
+ ### Principles
64
+ - Negative tracking scales with display size; body near zero
65
+ - Display weight 600; body 400
66
+ - Mono only in code contexts inside mockups
33
67
 
34
- - No layered cards for routine content.
35
- - No decorative gradients on product surfaces.
36
- - Use one accent color, `--primary`, for brand and primary actions.
37
- - Prefer spacing over background differentiation.
38
- - Keep all colors tokenized and theme-ready for light and dark modes.
68
+ ## Layout
39
69
 
40
- ## 2) Typography
70
+ - Base unit: 4px (`{spacing.xxs}` 4 · `{spacing.xs}` 8 · `{spacing.sm}` 12 · `{spacing.md}` 16 · `{spacing.lg}` 24 · `{spacing.xl}` 32 · `{spacing.xxl}` 48 · `{spacing.section}` 96)
71
+ - Max content ~1280px; card grids 3-up → 2-up → 1-up
72
+ - Product screenshot panels span full content width
41
73
 
42
- ### Families
74
+ ## Elevation & Depth
43
75
 
44
- - Interface text: `font-sans` backed by `--font-sans`.
45
- - Code, IDs, and timestamps: `font-mono` backed by `--font-mono`.
76
+ Surface ladder + hairlines only. No drop shadows on dark marketing surfaces. Focus: 2px `{colors.primary-focus}` outline at reduced opacity.
46
77
 
47
- Do not reference literal font families in component files.
78
+ ## Shapes
48
79
 
49
- ### Scale
80
+ | Token | Typical use |
81
+ |---|---|
82
+ | `{rounded.xs}` 4px | Chips, badges |
83
+ | `{rounded.md}` 8px | Buttons, inputs |
84
+ | `{rounded.lg}` 12px | Cards |
85
+ | `{rounded.xl}` 16px | Screenshot panels |
86
+ | `{rounded.pill}` | Pricing tabs, status pills |
50
87
 
51
- - Page heading: `text-xl`, `font-semibold`
52
- - Section heading: `text-base`, `font-semibold`
53
- - Body / row label: `text-xs`, `font-normal` to `font-medium`
54
- - Meta / secondary: `text-[11px]`, `font-normal`
55
- - Nav section label: `text-[11px] uppercase tracking-wide`, `font-medium`
56
- - Tiny helper: `text-[10px]`, `font-normal`
88
+ ## Components
57
89
 
58
- ### Rules
90
+ - `{components.button-primary}` — primary CTA on `{colors.primary}`
91
+ - `{components.button-secondary}` — charcoal surface-1 + hairline
92
+ - `{components.button-tertiary}` — plain text on canvas
93
+ - `{components.pricing-card}`, `{components.feature-card}`, `{components.product-screenshot-card}` — surface-1 + hairline + `{rounded.lg}` or `{rounded.xl}`
94
+ - `{components.top-nav}` — sticky dark bar, 56px
95
+ - `{components.text-input}` — surface-1, focus ring on `{colors.primary-focus}`
59
96
 
60
- - Headlines are quiet and utilitarian.
61
- - Keep line height tight with `leading-tight` or `leading-snug` for dense UI.
62
- - Reserve uppercase for nav labels and compact metadata.
97
+ ## Do's and Don'ts
63
98
 
64
- ## 3) Navigation
99
+ ### Do
100
+ - Reserve `{colors.primary}` for brand mark, primary CTA, focus, links
101
+ - Use the surface ladder sequentially
102
+ - Lead sections with product UI screenshots
103
+ - Use `{rounded.md}` for CTAs
65
104
 
66
- ### Structure
105
+ ### Don't
106
+ - Don't ship light-mode marketing
107
+ - Don't use lavender as section background
108
+ - Don't add atmospheric gradients or second chromatic accents
109
+ - Don't pill-round primary CTAs (use `{rounded.md}`)
110
+
111
+ ## Responsive Behavior
112
+
113
+ Breakpoints: desktop 1280px · tablet 1024px · mobile-lg 768px · mobile 480px. Nav hamburger below 768px. Display type scales down on mobile while preserving negative tracking ratio.
114
+
115
+ ## Token Mapping
67
116
 
68
- 1. Header row: identity, search, and create action.
69
- 2. Primary links.
70
- 3. Collapsible grouped links.
71
- 4. Lightweight footer affordance for help or docs.
72
-
73
- ### Item Styling
74
-
75
- - Default: `text-xs`, muted foreground.
76
- - Hover: subtle `sidebar-accent` background.
77
- - Active: full-width pill, medium weight.
78
- - Icon size: 12px.
79
- - Nav pill baseline: `rounded-full h-7 px-2.5`.
80
-
81
- ### Collapse Behavior
82
-
83
- - Expanded width: `15rem` or 240px.
84
- - Collapsed width: `3rem` or 48px, icon-only with tooltip.
85
- - Mobile: sheet/drawer using expanded width.
86
- - Keyboard shortcut: support the project's standard sidebar toggle shortcut, e.g. `Cmd+B`.
87
-
88
- ## 4) Layout Regions
89
-
90
- ### App Shell
91
-
92
- - Sidebar: fixed left, full viewport height, right seam border.
93
- - Content: `flex-1 min-w-0`, same background canvas.
94
- - Optional inspector: right panel, `22rem` to `28rem`, collapsible.
95
-
96
- ### Common Page Patterns
97
-
98
- - List workspace: toolbar plus scrollable list.
99
- - Detail view: breadcrumbs/title plus body and optional inspector.
100
- - Editor split: left rail plus center editor.
101
- - Settings split: nav plus forms.
102
-
103
- ### Toolbar Strip
104
-
105
- - Height: `h-10` to `h-12`.
106
- - Bottom seam: `border-b border-border/50`.
107
- - No separate background block.
108
-
109
- ## 5) Interactive Elements
110
-
111
- ### Buttons
112
-
113
- - Primary: solid `primary`.
114
- - Secondary: neutral fill.
115
- - Ghost: transparent with subtle hover fill.
116
- - Destructive: `destructive` only for dangerous confirms.
117
- - Icon-only: `size-8`, ghost, tooltip.
118
-
119
- Rules:
120
-
121
- - Default radius uses the tokenized radius scale.
122
- - No shadows on standard buttons.
123
- - Primary buttons are intentionally sparse.
124
-
125
- ### Inputs
126
-
127
- - Compact defaults: `h-8`; dense contexts: `h-7`.
128
- - Tokenized input background and border.
129
- - Visible focus ring: `ring-2 ring-ring`.
130
- - Labels above fields. Do not use floating labels by default.
131
-
132
- ### Menus / Popovers / Dialogs
133
-
134
- - Tokenized `popover` surface and subtle border.
135
- - Tight typography: `text-xs`.
136
- - Compact spacing.
137
- - Dialog actions align right: secondary then primary.
138
-
139
- ## 6) Lists And Data
140
-
141
- ### Row Anatomy
142
-
143
- - Compact, single-line by default.
144
- - Hover uses subtle accent fill.
145
- - Selected row uses stronger accent fill and medium weight.
146
- - Avoid per-row borders; separate by spacing and padding rhythm.
147
-
148
- ### Grouping And Tables
149
-
150
- - Group labels are muted; children are indented.
151
- - Table headers use uppercase compact meta style.
152
- - No zebra striping or heavy gridlines.
153
-
154
- ## 7) Status And Feedback
155
-
156
- - Status: small dots or icons with semantic meaning.
157
- - Loading: skeletons for content, spinners only for inline actions.
158
- - Toasts: non-intrusive, auto-dismiss.
159
- - Empty states: icon, short message, and optional single CTA.
160
-
161
- ## 8) Motion
162
-
163
- - Motion confirms state changes; it is never decorative.
164
- - Micro interactions: about 150ms.
165
- - Layout shifts: about 200-250ms.
166
- - Preferred easing: `cubic-bezier(0.16, 1, 0.3, 1)`.
167
- - Respect `prefers-reduced-motion` with near-instant transitions.
168
-
169
- ## 9) Spacing System
170
-
171
- Base unit is 4px, using the project's spacing scale.
172
-
173
- - `p-1` or 4px: tight internals.
174
- - `p-2` or 8px: compact section padding.
175
- - `p-3` or 12px: dense content blocks.
176
- - `p-4` or 16px: page-level rhythm.
177
-
178
- Density guidelines:
179
-
180
- - Sidebar: dense, `h-7` rows.
181
- - Content: moderate, `h-8` to `h-10` rows.
182
- - Forms/settings: relaxed, `h-10` to `h-12` rows.
183
-
184
- ## 10) Accessibility
185
-
186
- - Full keyboard navigation for all controls.
187
- - Consistent visible focus styles.
188
- - Semantic landmarks such as `nav` and `main`.
189
- - Collapsibles expose `aria-expanded`.
190
- - Ensure WCAG AA contrast in both themes.
191
-
192
- ## 11) Anti-Patterns
193
-
194
- - Do not wrap normal content in elevated cards.
195
- - Do not introduce multiple accent colors.
196
- - Do not add decorative gradients behind core product surfaces.
197
- - Do not stack multiple competing toolbars.
198
- - Do not color-code nav icons.
199
- - Do not hardcode colors or font families in components.
200
-
201
- ## 12) Applying This System
202
-
203
- ### Where Values Live
204
-
205
- - Theme tokens and base layer: `[theme stylesheet path, e.g. src/styles.css]`.
206
- - App shell composition: `[route/layout path, e.g. src/routes or app]`.
207
- - Reusable UI primitives: `[components path, e.g. src/components/ui]`.
208
-
209
- ### New Component Checklist
210
-
211
- 1. Sits on canvas, not card-first?
212
- 2. Uses 2-3 text hierarchy levels max?
213
- 3. Has subtle hover and clear active states?
214
- 4. Uses primary color only where needed?
215
- 5. Uses spacing rhythm in 4px increments?
216
- 6. Has complete keyboard and focus behavior?
217
- 7. Uses token-driven colors and fonts?
218
- 8. Works in light and dark themes?
219
-
220
- ### For Coding Agents
221
-
222
- - Read this file before changing UI, layout, navigation, styling, or components.
223
- - Prefer existing UI primitives and local layout patterns.
224
- - Do not introduce new visual language without documenting the reason in the implementation brief or PR.
225
- - Before handoff, check responsive behavior, focus states, text overflow, loading states, empty states, and token usage.
226
-
227
- ### Working Rule
228
-
229
- Default to these principles unless a deliberate exception is documented in a feature-specific spec.
117
+ Bind each `{colors.*}` role to your theme (e.g. Tailwind `@theme` or CSS custom properties). Repo theme file: `[theme stylesheet path, e.g. src/styles.css]`.
@@ -0,0 +1,94 @@
1
+ # [Project Name] Design — Notion
2
+
3
+ Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
4
+
5
+ ## Overview
6
+
7
+ Document-like daylight system: warm paper-soft canvas, near-black ink, single Notion Blue for structure, and a decorative sticker palette for illustrations only. One optional dark indigo hero band inverts the otherwise light rhythm.
8
+
9
+ **Key characteristics:**
10
+ - `{colors.canvas-soft}` warm page floor; `{colors.surface}` white for cards
11
+ - Single structural accent `{colors.primary}` (blue) for CTAs and links
12
+ - Sticker colors (`accent-purple`, `accent-pink`, etc.) — decoration only
13
+ - Pill marketing CTAs vs 8px utility buttons
14
+ - Barely-there layered micro-shadows
15
+ - Optional `{colors.secondary}` night hero band
16
+
17
+ ## Colors
18
+
19
+ ### Brand & Accent
20
+ - `{colors.primary}`, `{colors.primary-active}`, `{colors.on-primary}`
21
+ - `{colors.secondary}` — dark hero band only
22
+
23
+ ### Sticker palette (decorative only)
24
+ - `{colors.accent-sky}`, `{colors.accent-purple}`, `{colors.accent-pink}`, `{colors.accent-orange}`, `{colors.accent-teal}`, `{colors.accent-green}`
25
+
26
+ ### Surface
27
+ - `{colors.canvas}` / `{colors.surface}` — white cards
28
+ - `{colors.canvas-soft}` — warm page and footer
29
+ - `{colors.hairline}` — borders
30
+
31
+ ### Text
32
+ - `{colors.ink}`, `{colors.ink-secondary}`, `{colors.ink-muted}`, `{colors.ink-faint}`
33
+
34
+ ## Typography
35
+
36
+ - NotionInter substitute: Inter with explicit negative tracking on display
37
+ - Weight 700 headlines; 400 body; 600 titles
38
+
39
+ | Token | Use |
40
+ |---|---|
41
+ | `{typography.display-1}` | Hero (64px) |
42
+ | `{typography.heading-1}` | Section headlines |
43
+ | `{typography.body-md}` | Default body (16px) |
44
+ | `{typography.button}` | Button labels |
45
+ | `{typography.eyebrow}` | Pill badges |
46
+
47
+ ## Layout
48
+
49
+ - Base 8px; max width ~1080–1300px
50
+ - Section gaps over rules; card padding `{spacing.lg}` 24px
51
+
52
+ ## Elevation
53
+
54
+ Level 0: hairline only. Level 1: multi-layer micro-shadow. Level 2: modals and elevated pills on dark hero.
55
+
56
+ ## Shapes
57
+
58
+ | Token | Use |
59
+ |---|---|
60
+ | `{rounded.xs}` 4px | Inputs |
61
+ | `{rounded.md}` 8px | Utility buttons |
62
+ | `{rounded.lg}` 12px | Feature cards |
63
+ | `{rounded.full}` | Marketing pill CTAs |
64
+
65
+ ## Components
66
+
67
+ - `{components.button-primary}` — blue pill CTA
68
+ - `{components.button-secondary}` — white pill with soft shadow
69
+ - `{components.button-utility}` — nav/plan select, `{rounded.md}`
70
+ - `{components.feature-card}`, `{components.pricing-plan-card}`
71
+ - `{components.hero-band}` — optional dark inverted hero
72
+ - `{components.nav-bar}`, `{components.footer}`
73
+
74
+ ## Do's and Don'ts
75
+
76
+ ### Do
77
+ - Reserve blue for actions and links only
78
+ - Use sticker palette in illustrations and dots only
79
+ - Apply negative tracking on display explicitly
80
+ - Use warm canvas for full pages
81
+
82
+ ### Don't
83
+ - Don't paint CTAs in sticker colors
84
+ - Don't use pill radius on form fields
85
+ - Don't add heavy drop shadows
86
+ - Don't repeat dark hero bands
87
+
88
+ ## Responsive Behavior
89
+
90
+ Nav hamburger below tablet. Grids collapse to single column. Touch targets ≥44px.
91
+
92
+ ## Token Mapping
93
+
94
+ Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.
@@ -0,0 +1,89 @@
1
+ # [Project Name] Design — Warp
2
+
3
+ Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
4
+
5
+ ## Overview
6
+
7
+ Warm dark terminal brand: brown-beige canvas (not pure black), off-white as the only "primary" — no chromatic accent. Terminal mockups carry decoration. Extremely tight 3–4px button radii. Inter for narrative, DM Mono for code.
8
+
9
+ **Key characteristics:**
10
+ - `{colors.primary}` = warm off-white (CTA fill AND default text) — not a hue
11
+ - `{colors.canvas}` warm dark (#2b2622 family) — warmth is identity
12
+ - Tight radii: `{rounded.sm}` 3px, `{rounded.md}` 4px for CTAs
13
+ - Hero display weight 400, quietly confident
14
+ - Hairline + surface contrast only; no drop shadows
15
+ - Terminal screenshots as sole decorative system
16
+
17
+ ## Colors
18
+
19
+ ### Brand (no chromatic accent)
20
+ - `{colors.primary}` — off-white (button fill, ink on canvas)
21
+ - `{colors.on-primary}` — warm dark text on off-white buttons
22
+
23
+ ### Surface
24
+ - `{colors.canvas}` — warm dark page
25
+ - `{colors.canvas-soft}` — cards, mockup chrome, partner tiles
26
+ - `{colors.hairline}` — dividers
27
+
28
+ ### Text
29
+ - `{colors.ink}` — same off-white as primary on canvas
30
+ - `{colors.body-strong}`, `{colors.body}`, `{colors.mute}` — stepped emphasis
31
+
32
+ ## Typography
33
+
34
+ - Inter 400/500 for UI; DM Mono 400 for terminal/code; Instrument Serif optional for rare editorial italics
35
+ - Negative tracking on display (-1.6px at 64px hero)
36
+
37
+ | Token | Use |
38
+ |---|---|
39
+ | `{typography.display-xl}` | Hero 64px / 400 |
40
+ | `{typography.body-md}` | Default body 16px |
41
+ | `{typography.code}` | Terminal mockup body |
42
+ | `{typography.button-md}` | Button labels |
43
+
44
+ ## Layout
45
+
46
+ - Base 4px; `{spacing.5xl}` 96px section padding; max ~1200px
47
+ - Hero 2-column terminal split; download tiles 3-up
48
+
49
+ ## Elevation
50
+
51
+ Flat hero; hairline borders on `{colors.canvas-soft}` cards. No shadows.
52
+
53
+ ## Shapes
54
+
55
+ | Token | Use |
56
+ |---|---|
57
+ | `{rounded.sm}` 3px | Primary buttons |
58
+ | `{rounded.md}` 4px | Cards |
59
+ | `{rounded.full}` | Icon circles only |
60
+
61
+ ## Components
62
+
63
+ - `{components.button-primary}` — off-white on dark, `{rounded.sm}`
64
+ - `{components.button-secondary-ghost}` — ghost nav actions
65
+ - `{components.card-mockup}`, `{components.download-tile}`, `{components.partner-logo-tile}`
66
+ - `{components.hero-band}` — display-xl + terminal split
67
+ - `{components.nav-bar}`, `{components.footer}`
68
+
69
+ ## Do's and Don'ts
70
+
71
+ ### Do
72
+ - Keep canvas warm dark — not neutral gray or pure black
73
+ - Use 3–4px button radii
74
+ - Pair Inter with DM Mono for technical surfaces
75
+ - Set hero at weight 400
76
+
77
+ ### Don't
78
+ - Don't introduce a chromatic brand accent
79
+ - Don't use generous pill CTAs
80
+ - Don't use heavy display weights (700+)
81
+ - Don't add card drop shadows
82
+
83
+ ## Responsive Behavior
84
+
85
+ Nav hamburger below 768px. Hero mockups stack vertically. Touch targets padded to 44px on mobile.
86
+
87
+ ## Token Mapping
88
+
89
+ Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.
@@ -0,0 +1,101 @@
1
+ ---
2
+ name: agentkit
3
+ description: Use when creating, syncing, auditing, repairing, or learning AgentKit-managed repository guidance and codebase changes in an agent session, especially after `agentkit skill install`, when `/agentkit init`, `/agentkit update`, `/agentkit doctor`, `/agentkit repair`, `/agentkit learn`, or `/agentkit design` is requested, or when AGENTS.md, DESIGN.md, STACK.md, companion guides, managed blocks, commands, placeholders, AI tool adapters, recent diffs, or completed changes need context-aware maintenance or explanation.
4
+ compatibility: Requires agentkit CLI and agentkit.config.json with installMode skill, or existing AgentKit-managed files with block markers.
5
+ metadata:
6
+ author: thomas-agentkit
7
+ version: "1.0"
8
+ ---
9
+
10
+ # AgentKit Skill
11
+
12
+ Create, sync, audit, repair, and teach AgentKit-managed repository guidance and codebase changes using live repository context.
13
+
14
+ ## When to use
15
+
16
+ - User ran `agentkit skill install`
17
+ - User asks `/agentkit init`, `/agentkit update`, `/agentkit doctor`, `/agentkit repair`, `/agentkit learn`, or `/agentkit design`
18
+ - `AGENTS.md`, `DESIGN.md`, `STACK.md`, companion guides, or AI adapters are missing
19
+ - Guidance has stale commands, stack details, project paths, placeholders, or broken references
20
+ - Managed blocks need context-aware update, audit, or repair
21
+ - User wants to understand recent codebase changes, a completed implementation, a diff, a bug fix, or the session
22
+ - User wants to create or refresh `DESIGN.md` from a design baseline
23
+
24
+ ## When not to use
25
+
26
+ - User wants terminal template install -> direct them to CLI `agentkit init`
27
+ - User wants terminal template update -> direct them to CLI `agentkit update` unless config says `installMode: skill`
28
+ - Generic documentation requests unrelated to AgentKit guidance
29
+ - Code review findings, debugging, or feature implementation requests
30
+ - Short summaries that do not require a guided teaching workflow
31
+
32
+ ## Route
33
+
34
+ Always read `references/file-contract.md` before editing or auditing AgentKit-managed files. Do not act from `SKILL.md` alone.
35
+
36
+ 1. User asks to **initialize** missing guidance files from repo context
37
+ → `references/init.md`
38
+
39
+ 2. User asks to **update** or **sync** existing guidance with current repo context
40
+ → `references/update.md`
41
+
42
+ 3. User asks to **doctor**, **audit**, **review**, **diagnose**, or **health check** guidance quality
43
+ → `references/doctor.md`
44
+
45
+ 4. User asks to **repair**, **fix malformed blocks**, **convert unmanaged guidance**, or **fix adapters**
46
+ → `references/repair.md`
47
+
48
+ 5. User asks to **learn**, **understand recent changes**, **explain the session**, **teach me what changed**, **ELI5**, **ELI14**, **explain like an intern**, or **check my understanding**
49
+ → `references/learn.md`
50
+
51
+ 6. User asks to **design**, set up **DESIGN.md**, choose a design baseline, or customize design language
52
+ → `references/design.md`
53
+
54
+ 7. Unsure which workflow applies
55
+ → If no guidance files exist: `references/init.md`
56
+ → If guidance exists but commands, stack, files, placeholders, adapters, or references are stale: `references/update.md`
57
+ → If user wants audit, doctor, health check, diagnosis, or review: `references/doctor.md`
58
+ → If managed blocks are malformed or unmanaged files need conversion: `references/repair.md`
59
+ → If user wants to understand completed changes or a session: `references/learn.md`
60
+ → If user wants `DESIGN.md` or design baseline selection: `references/design.md`
61
+
62
+ ## Non-negotiables
63
+
64
+ - `AGENTS.md` is the source of truth; AI tool adapters stay thin pointers
65
+ - Read the route reference and `references/file-contract.md` before file edits
66
+ - Preserve user content **outside** AgentKit managed blocks
67
+ - Skip unmanaged existing files unless conversion is explicitly requested
68
+ - Defer malformed managed blocks to `references/repair.md`
69
+ - Commands in guidance must come from `package.json` scripts or `agentkit.config.json` personalization — never invent scripts
70
+ - Prefer repo facts over config personalization
71
+ - Do not modify app source, lockfiles, package manifests, or CI config during AgentKit workflows
72
+ - `/agentkit learn` is read-only by default and keeps learning checklists in the conversation unless the user explicitly asks for notes
73
+ - CLI `agentkit init` installs **templates**; this skill's `agentkit init` **creates guidance files** — never confuse them
74
+
75
+ ## Gotchas
76
+
77
+ | Gotcha | Reality |
78
+ | --- | --- |
79
+ | `installMode: skill` but no `.md` files yet | Expected after `agentkit skill install`; run `/agentkit init` |
80
+ | `templateSet: minimal` | `AGENTS.md` only, plus selected adapters if explicitly configured |
81
+ | `templateSet: standard` | Core companions only; not testing/security/workflow docs |
82
+ | `templateSet: full` | Full guidance docs; adapters still follow `aiTools` |
83
+ | AI tool adapters | Thin pointers to `AGENTS.md`; never duplicate full guidance |
84
+ | `STACK.md` | Create/update when preset is configured, user asks, or stack is confidently inferred |
85
+ | `DESIGN.md` | Comes from bundled baseline in `designSystem` config or `/agentkit design`; map tokens to project theme |
86
+ | Existing unmanaged files | Skip unless user asks to convert |
87
+ | Malformed managed blocks | Use `/agentkit repair` before update/refresh |
88
+ | Learning workflow | `/agentkit learn` is read-only by default and should not create Markdown notes unless the user explicitly asks |
89
+ | Docs-only guidance workflow | Does not require running project tests/builds |
90
+
91
+ ## Quick reference
92
+
93
+ | User says | Load |
94
+ | --- | --- |
95
+ | "/agentkit init" / "set up AGENTS.md" | `references/init.md` |
96
+ | "/agentkit update" / "sync guidance" | `references/update.md` |
97
+ | "/agentkit doctor" / "audit AgentKit guidance" | `references/doctor.md` |
98
+ | "/agentkit repair" / "fix managed blocks" | `references/repair.md` |
99
+ | "/agentkit learn" / "teach me what changed" | `references/learn.md` |
100
+ | "/agentkit design" / "create DESIGN.md" | `references/design.md` |
101
+ | Before any file edit | `references/file-contract.md` |
@@ -0,0 +1,4 @@
1
+ interface:
2
+ display_name: "AgentKit"
3
+ short_description: "Create, maintain, and learn repo guidance"
4
+ default_prompt: "Use $agentkit to initialize, sync, audit, repair, or learn repository guidance and changes."