nk_jtb 0.25.0 → 0.26.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/.ai/prompts/create-component.md +17 -9
- package/.ai/prompts/create-documentation.md +18 -5
- package/.ai/prompts/jtb-code-review.md +1 -1
- package/.ai/prompts/jtb-review-documentation.md +21 -48
- package/.ai/skills/jtb-conversion/SKILL.md +10 -5
- package/.ai/skills/jtb-documentation/SKILL.md +51 -101
- package/.ai/skills/jtb-layouts-and-structures/SKILL.md +16 -2
- package/AGENTS.md +95 -40
- package/CLAUDE.md +95 -40
- package/docs/components/button.md +86 -86
- package/docs/installation.md +2 -2
- package/docs/introduction.md +1 -1
- package/{framework-status.md → docs/jtb-status.md} +343 -343
- package/docs/showcase-ui.md +70 -2
- package/docs/themes.md +118 -118
- package/docs/variable-system.md +89 -58
- package/package.json +1 -1
- package/scripts/jtb-nav.json +5 -84
- package/skills-lock.json +12 -2
- package/src/components/_button.scss +33 -33
- package/src/utilities/_border.scss +25 -25
- package/src/utilities/_misc.scss +8 -4
- package/src/utilities/_themes.scss +17 -17
- package/docs/components/pagination.md +0 -88
- package/index copy.html +0 -273
|
@@ -4,8 +4,10 @@ Invoke the `jtb-layouts-and-structures` skill before starting.
|
|
|
4
4
|
|
|
5
5
|
## Output
|
|
6
6
|
|
|
7
|
-
Check `index.html
|
|
8
|
-
|
|
7
|
+
Check `index.html`.
|
|
8
|
+
|
|
9
|
+
- If it contains no meaningful content, write there.
|
|
10
|
+
- If it already has content, ask whether to add to it or create a new file.
|
|
9
11
|
|
|
10
12
|
## Design Reference
|
|
11
13
|
|
|
@@ -13,7 +15,7 @@ already has content, ask whether to add to it or create a new file.
|
|
|
13
15
|
|
|
14
16
|
## Responsive Behaviour
|
|
15
17
|
|
|
16
|
-
[Describe how this should adapt, or leave blank
|
|
18
|
+
[Describe how this should adapt, or leave blank for ai to ask.]
|
|
17
19
|
|
|
18
20
|
## Target Markup
|
|
19
21
|
|
|
@@ -23,9 +25,15 @@ already has content, ask whether to add to it or create a new file.
|
|
|
23
25
|
|
|
24
26
|
After building, report only actionable items:
|
|
25
27
|
|
|
26
|
-
- **Issues** — anything that
|
|
27
|
-
and what workaround was used.
|
|
28
|
-
- **
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
- **Issues** — anything that could not be expressed cleanly in JTB. State the
|
|
29
|
+
problem and what workaround was used.
|
|
30
|
+
- **Framework Gaps** — utilities, tokens, patterns, or primitives that seem
|
|
31
|
+
missing, weak, or awkward.
|
|
32
|
+
- **Guideline Gaps** — places where the component-creation guidance or JTB docs
|
|
33
|
+
were unclear or insufficient.
|
|
34
|
+
- **Skill Gaps** — places where the invoked skill was unclear, insufficient,
|
|
35
|
+
misleading, or failed to help with a relevant decision.
|
|
36
|
+
- **Recommendations** — concrete, minimal changes worth considering.
|
|
37
|
+
|
|
38
|
+
Do not report clean decisions or resolved choices unless they expose a real
|
|
39
|
+
problem.
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
-
Create documentation for
|
|
1
|
+
Create documentation for `[component]`.
|
|
2
2
|
|
|
3
|
-
Invoke the `jtb-documentation` skill before starting.
|
|
4
|
-
— these define what is correct:
|
|
3
|
+
Invoke the `jtb-documentation` skill before starting.
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
## Type
|
|
6
|
+
|
|
7
|
+
[Component / Utility]
|
|
8
|
+
|
|
9
|
+
## What it does
|
|
10
|
+
|
|
11
|
+
[One or two sentences describing purpose — not implementation.]
|
|
12
|
+
|
|
13
|
+
## Cover
|
|
14
|
+
|
|
15
|
+
[List specific sections or aspects to document, e.g. basic usage, modifiers,
|
|
16
|
+
SCSS variables, utility examples.]
|
|
17
|
+
|
|
18
|
+
## Notes
|
|
19
|
+
|
|
20
|
+
[Optional: existing markup, decisions already made, related components.]
|
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
Review the documentation for the JTB framework.
|
|
2
2
|
|
|
3
|
-
Invoke the `jtb-documentation` skill before starting. Read these in full first
|
|
4
|
-
— these define what is correct:
|
|
3
|
+
Invoke the `jtb-documentation` skill before starting. Read these in full first — they define what is correct:
|
|
5
4
|
|
|
6
5
|
- `introduction.md`
|
|
7
6
|
- `docs/conventions-and-architecture-rules.md`
|
|
8
7
|
|
|
9
8
|
## Goals
|
|
10
9
|
|
|
11
|
-
1. Validate what exists —
|
|
12
|
-
|
|
13
|
-
2. Identify what's missing — what is absent but expected?
|
|
10
|
+
1. Validate what exists — correct, consistent, and rule-compliant?
|
|
11
|
+
2. Identify what's missing — absent but expected?
|
|
14
12
|
|
|
15
13
|
## Process
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
Three passes:
|
|
18
16
|
|
|
19
|
-
1. **Identify** — surface contradictions and gaps.
|
|
20
|
-
flag them without treating incompleteness as a failure.
|
|
17
|
+
1. **Identify** — surface contradictions and gaps. Flag incompleteness without treating it as failure.
|
|
21
18
|
2. **Triage** — decide what's worth pursuing before any work happens.
|
|
22
19
|
3. **Sweep** — act only on approved items.
|
|
23
20
|
|
|
@@ -30,64 +27,40 @@ Review only:
|
|
|
30
27
|
|
|
31
28
|
Do not review:
|
|
32
29
|
|
|
33
|
-
- `src/mixins/` — build system internals
|
|
34
|
-
- `src/functions/` — build system internals
|
|
35
|
-
- `src/base/` — output layer
|
|
30
|
+
- `src/mixins/`, `src/functions/`, `src/base/` — build system internals and output layer
|
|
36
31
|
|
|
37
32
|
## Review Questions
|
|
38
33
|
|
|
39
34
|
### Validation
|
|
40
35
|
|
|
41
|
-
1. Do
|
|
42
|
-
conventions doc describes?
|
|
36
|
+
1. Do variable files in `src/maps_and_variables/` match what the conventions doc describes?
|
|
43
37
|
2. Do all final maps follow the `-map` suffix rule?
|
|
44
|
-
3. Is the three-map pattern applied consistently
|
|
38
|
+
3. Is the three-map pattern applied consistently?
|
|
45
39
|
4. Is `smart-merge` order correct — variants first, values second?
|
|
46
|
-
5. Are `!default` flags present where
|
|
47
|
-
6. Do
|
|
48
|
-
describes?
|
|
40
|
+
5. Are `!default` flags present where required?
|
|
41
|
+
6. Do breakpoint values in `_base.scss` match `responsive-design.md`?
|
|
49
42
|
7. Does `index.scss` forward all expected files?
|
|
50
43
|
|
|
51
|
-
###
|
|
44
|
+
### Gaps
|
|
52
45
|
|
|
53
46
|
1. Are there variable files with no corresponding documentation?
|
|
54
|
-
2. Are there conventions
|
|
55
|
-
`src/maps_and_variables/`?
|
|
47
|
+
2. Are there conventions with no implementation in `src/maps_and_variables/`?
|
|
56
48
|
|
|
57
|
-
##
|
|
49
|
+
## Priorities
|
|
58
50
|
|
|
59
|
-
- `critical` — contradicts a source of truth
|
|
60
|
-
|
|
61
|
-
- `
|
|
62
|
-
fix.
|
|
63
|
-
- `low` — style, preference, or minor improvement. Fix if you want.
|
|
51
|
+
- `critical` — contradicts a source of truth. Must fix.
|
|
52
|
+
- `high` — likely causes confusion or future breakage. Should fix.
|
|
53
|
+
- `low` — minor improvement. Fix if you want.
|
|
64
54
|
- `missing` — expected content that isn't there.
|
|
65
55
|
|
|
66
|
-
## Output
|
|
56
|
+
## Output
|
|
67
57
|
|
|
68
|
-
|
|
69
|
-
- Do not praise unnecessarily.
|
|
70
|
-
- Separate findings by type clearly.
|
|
71
|
-
- Suggest improvements with trade-offs.
|
|
72
|
-
- If something is unclear or inconsistent, call it out explicitly.
|
|
58
|
+
Be direct. Do not praise. Call out anything unclear or inconsistent.
|
|
73
59
|
|
|
74
|
-
Write results to `review-docs
|
|
75
|
-
|
|
76
|
-
Use these sections in order:
|
|
77
|
-
|
|
78
|
-
- **Confirmed Issues** — rule violations, bugs, mismatches
|
|
79
|
-
- **Gaps** — missing docs, tests, examples, or conventions
|
|
80
|
-
- **Findings** — observations that don't rise to issues
|
|
81
|
-
- **Pass** — if no confirmed issues: `No blocking issues found.`
|
|
82
|
-
|
|
83
|
-
For every confirmed issue use this format:
|
|
60
|
+
Write results to `review-docs.md` in the project root using these sections:
|
|
84
61
|
|
|
62
|
+
**Confirmed Issues** — rule violations, bugs, mismatches
|
|
85
63
|
**Issue title** · `critical/high/low`
|
|
86
64
|
`file:line`
|
|
87
65
|
Rule: brief quote
|
|
88
|
-
Fix:
|
|
89
|
-
|
|
90
|
-
For every gap use this format:
|
|
91
|
-
|
|
92
|
-
**Gap title** · `missing`
|
|
93
|
-
What's absent and where it's expected.
|
|
66
|
+
Fix: on
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: jtb-conversion
|
|
3
3
|
description: >-
|
|
4
|
-
Use this skill whenever
|
|
5
|
-
components
|
|
6
|
-
PHP, JS, or
|
|
7
|
-
|
|
4
|
+
Use this skill whenever translating an existing implementation into NK JTB
|
|
5
|
+
classes and components — for example from Tailwind, custom CSS, plain HTML,
|
|
6
|
+
PHP, JS, or another framework. Do not wait for an explicit request — if
|
|
7
|
+
there is a source implementation that needs to be converted into JTB, this
|
|
8
|
+
skill applies.
|
|
8
9
|
---
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
Do not use this skill for greenfield JTB component builds, design-to-code work
|
|
12
|
+
from screenshots/mockups, or general component composition from scratch.
|
|
13
|
+
|
|
14
|
+
For layout decisions during conversion, invoke the
|
|
15
|
+
`jtb-layouts-and-structures` skill.
|
|
11
16
|
|
|
12
17
|
If the output file is not specified, ask before proceeding.
|
|
13
18
|
|
|
@@ -6,6 +6,23 @@ description: >-
|
|
|
6
6
|
updated, this skill applies.
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
+
Extends `nk-documentation-best-practices` — apply both, this skill takes
|
|
10
|
+
precedence where they conflict.
|
|
11
|
+
|
|
12
|
+
## Nav Management
|
|
13
|
+
|
|
14
|
+
Nav lives in `scripts/jtb-nav.json`. Route names follow `docs.jtb.{path}`:
|
|
15
|
+
|
|
16
|
+
- `docs/components/list.md` → `docs.jtb.components.list`
|
|
17
|
+
- `docs/variable-system.md` → `docs.jtb.variable-system`
|
|
18
|
+
|
|
19
|
+
Add a new entry to the appropriate group when a doc is confirmed complete.
|
|
20
|
+
|
|
21
|
+
## Completion Follow-Through
|
|
22
|
+
|
|
23
|
+
- Add confirmed doc to `scripts/jtb-nav.json`.
|
|
24
|
+
- Update the relevant row in `docs/jtb-status.md`.
|
|
25
|
+
|
|
9
26
|
## Documentation Locations
|
|
10
27
|
|
|
11
28
|
- **All documentation** → `docs/`
|
|
@@ -13,128 +30,74 @@ description: >-
|
|
|
13
30
|
## Workflow
|
|
14
31
|
|
|
15
32
|
- Create new documentation directly in `docs/`.
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- On confirmation: remove the `(review)` tag. If the confirmed section is in a
|
|
20
|
-
component or utility doc (not a skill, reference doc, or api doc), ask: "Do
|
|
21
|
-
you want this added to a showcase?"
|
|
33
|
+
- On section confirmation: if the section is in a component or utility doc (not
|
|
34
|
+
a skill, reference doc, or api doc), ask: "Do you want this added to a
|
|
35
|
+
showcase?"
|
|
22
36
|
- If yes, add it to the appropriate showcase file before moving on.
|
|
23
|
-
- Leave `(review)` on any headings that are still unresolved.
|
|
24
37
|
|
|
25
38
|
## Showcases
|
|
26
39
|
|
|
27
|
-
Showcases are quick visual references — not comprehensive docs.
|
|
28
|
-
showcase files:
|
|
40
|
+
Showcases are quick visual references — not comprehensive docs. Three files:
|
|
29
41
|
|
|
30
42
|
- `docs/showcase-typography.md` — font sizes, weights, families, text utilities
|
|
31
|
-
- `docs/showcase-ui.md` — components and UI elements: buttons, badges,
|
|
32
|
-
checklist, box etc.
|
|
43
|
+
- `docs/showcase-ui.md` — components and UI elements: buttons, badges, checklist, box etc.
|
|
33
44
|
- `docs/showcase-layouts.md` — grid, flex patterns, page structures
|
|
34
45
|
|
|
35
46
|
Two reasons something belongs in a showcase:
|
|
36
47
|
|
|
37
48
|
1. **Syntax reminder** — enough variations exist that you forget the class names
|
|
38
|
-
|
|
39
|
-
2. **Existence reminder** — a single component worth flagging so it doesn't get
|
|
40
|
-
overlooked (checklist)
|
|
49
|
+
2. **Existence reminder** — a single component worth flagging so it doesn't get overlooked
|
|
41
50
|
|
|
42
|
-
|
|
43
|
-
on content type:
|
|
51
|
+
Format depends on content type:
|
|
44
52
|
|
|
45
|
-
- **UI components** (`showcase-ui.md`) — use `+demo-folded` so markup is visible
|
|
46
|
-
|
|
47
|
-
- **Typography/syntax** (`showcase-typography.md`) — use raw HTML pairing
|
|
48
|
-
`<code>` class names with output
|
|
53
|
+
- **UI components** (`showcase-ui.md`) — use `+demo-folded` so markup is visible and copyable
|
|
54
|
+
- **Typography/syntax** (`showcase-typography.md`) — raw HTML pairing `<code>` class names with output
|
|
49
55
|
- **Layouts** (`showcase-layouts.md`) — case by case
|
|
50
56
|
|
|
51
|
-
Group
|
|
52
|
-
Buttons`). Individual variants sit under `###` within that group.
|
|
57
|
+
Group by component family under `##` headings. Variants sit under `###` within that group.
|
|
53
58
|
|
|
54
|
-
Do not create a new showcase file for a single component — if it doesn't fit the
|
|
55
|
-
three above, discuss with the user.
|
|
59
|
+
Do not create a new showcase file for a single component — if it doesn't fit the three above, discuss with the user.
|
|
56
60
|
|
|
57
61
|
## Documentation Types
|
|
58
62
|
|
|
59
|
-
Choose the document shape based on what is being documented.
|
|
60
|
-
|
|
61
63
|
### Utility Documentation
|
|
62
64
|
|
|
63
|
-
Use for class-based APIs such as spacing, sizing, border, position, transforms,
|
|
64
|
-
and typography helpers.
|
|
65
|
+
Use for class-based APIs such as spacing, sizing, border, position, transforms, and typography helpers.
|
|
65
66
|
|
|
66
|
-
|
|
67
|
+
Structure:
|
|
67
68
|
|
|
68
|
-
1.
|
|
69
|
-
2.
|
|
70
|
-
3.
|
|
71
|
-
|
|
72
|
-
4. Example groups within those sections as `###` headings when needed
|
|
73
|
-
5. Optional compact table of available properties or value groups
|
|
74
|
-
6. Available values at the end, when useful
|
|
69
|
+
1. Major utility groups as `##` headings when the page covers more than one family
|
|
70
|
+
2. Example groups within those sections as `###` headings when needed
|
|
71
|
+
3. Optional compact table of available properties or value groups
|
|
72
|
+
4. Available values at the end, when useful
|
|
75
73
|
|
|
76
74
|
Rules:
|
|
77
75
|
|
|
78
|
-
-
|
|
79
|
-
- Keep prose short.
|
|
80
|
-
- Use `##` for major utility families such as `Border` and `Outline` when the
|
|
81
|
-
page covers multiple related groups.
|
|
82
|
-
- Use `###` for example groups within those families such as `Width`, `Color`,
|
|
83
|
-
`Style`, or `Offset`.
|
|
84
|
-
- Keep utility heading levels parallel. Do not mix levels unevenly when the
|
|
85
|
-
groups are peers.
|
|
76
|
+
- Keep utility heading levels parallel.
|
|
86
77
|
- Use a compact table near the top when it helps scan the utility API quickly.
|
|
87
78
|
- Only add notes when behaviour is non-obvious.
|
|
88
|
-
- Keep review notes, implementation commentary, and TODOs out of the main doc.
|
|
89
79
|
- Group examples by usage, not by SCSS implementation detail.
|
|
90
80
|
- Use `+demo-folded class="bx"` for interactive examples.
|
|
91
|
-
- Use `preview-class="..."` for
|
|
92
|
-
|
|
93
|
-
- Use `class="..."` for the outer demo wrapper when the preview needs a
|
|
94
|
-
container such as `bx`.
|
|
81
|
+
- Use `preview-class="..."` for preview-only layout so copied code stays clean.
|
|
82
|
+
- Use `class="..."` for the outer demo wrapper when the preview needs a container such as `bx`.
|
|
95
83
|
|
|
96
84
|
### Component Documentation
|
|
97
85
|
|
|
98
|
-
Use for named structural classes such as `navbar`, `menu`, `bx`, or form
|
|
99
|
-
controls.
|
|
86
|
+
Use for named structural classes such as `navbar`, `menu`, `bx`, or form controls.
|
|
100
87
|
|
|
101
|
-
Every component doc must
|
|
102
|
-
suit the content:
|
|
88
|
+
Every component doc must cover:
|
|
103
89
|
|
|
104
|
-
1.
|
|
105
|
-
2.
|
|
106
|
-
3.
|
|
107
|
-
4.
|
|
90
|
+
1. What it is — one-line lead
|
|
91
|
+
2. Minimum working markup — shown early with `+code`
|
|
92
|
+
3. Examples — simple to fuller usage
|
|
93
|
+
4. Customisation — variables, modifiers, or overrides
|
|
108
94
|
|
|
109
95
|
Rules:
|
|
110
96
|
|
|
111
|
-
-
|
|
112
|
-
|
|
113
|
-
-
|
|
114
|
-
|
|
115
|
-
component's purpose does not.
|
|
116
|
-
- Heading names should match the content. A single component might use `##
|
|
117
|
-
Structure` and `## Basic Usage`. A page covering base styles and variants
|
|
118
|
-
might use `## Base` and `## Variants`. Use whatever is clearest.
|
|
119
|
-
- Show the minimum working structure early with `+code`.
|
|
120
|
-
- Use prose where structure or context-aware behaviour needs explanation.
|
|
121
|
-
- Move from simple usage to fuller examples.
|
|
122
|
-
- Wrap all interactive examples in `class="bx"` on the demo block so they are
|
|
123
|
-
visually presented in context.
|
|
124
|
-
- Include an SCSS Variables table when the component exposes overridable
|
|
125
|
-
variables. Link to `/docs/jtb/variable-system` for override instructions
|
|
126
|
-
rather than explaining inline.
|
|
127
|
-
- Include a `## Utility Examples` section when a utility-based approach to the
|
|
128
|
-
same pattern is viable. This lives in the component doc — not a separate
|
|
129
|
-
file. It shows the utility-built version alongside the component class.
|
|
130
|
-
|
|
131
|
-
## Prose vs Code
|
|
132
|
-
|
|
133
|
-
Default to code-first. Add prose only when:
|
|
134
|
-
|
|
135
|
-
- Context-aware behaviour needs explanation
|
|
136
|
-
- Non-obvious structure requires a note
|
|
137
|
-
- Foundational patterns apply across multiple examples
|
|
97
|
+
- The lead describes purpose, not implementation. Do not mention specific CSS properties.
|
|
98
|
+
- Wrap all interactive examples in `class="bx"`.
|
|
99
|
+
- Include an SCSS Variables table when the component exposes overridable variables. Link to `/docs/jtb/variable-system` for override instructions rather than explaining inline.
|
|
100
|
+
- Include a `## Utility Examples` section when a utility-based approach is viable. Lives in the component doc — not a separate file.
|
|
138
101
|
|
|
139
102
|
## Code Block Attributes
|
|
140
103
|
|
|
@@ -142,33 +105,20 @@ Default to code-first. Add prose only when:
|
|
|
142
105
|
- `preview-class="..."` → class applied to the preview container
|
|
143
106
|
- `+demo` / `+demo-folded` → render preview and code together
|
|
144
107
|
|
|
145
|
-
|
|
146
|
-
example code cleaner when copied.
|
|
147
|
-
|
|
148
|
-
For layout/responsive docs, use `class="resizable-container
|
|
149
|
-
with-docs-only-overrides"` so the example preview can respond inside the docs
|
|
150
|
-
without changing the copied markup.
|
|
108
|
+
For layout/responsive docs, use `class="resizable-container with-docs-only-overrides"`.
|
|
151
109
|
|
|
152
110
|
## Links
|
|
153
111
|
|
|
154
|
-
Docs are served from a Laravel app. Always use app-rooted paths
|
|
155
|
-
file paths:
|
|
112
|
+
Docs are served from a Laravel app. Always use app-rooted paths:
|
|
156
113
|
|
|
157
114
|
- `/docs/jtb/variable-system` ✅
|
|
158
115
|
- `../variable-system.md` ❌
|
|
159
116
|
|
|
160
|
-
|
|
161
|
-
extension — mirroring the `docs/` folder structure:
|
|
117
|
+
Base path is `/docs/jtb/` + directory and filename without extension:
|
|
162
118
|
|
|
163
119
|
- `docs/components/list.md` → `/docs/jtb/components/list`
|
|
164
|
-
- `docs/api/helpers.md` → `/docs/jtb/api/helpers`
|
|
165
120
|
- `docs/variable-system.md` → `/docs/jtb/variable-system`
|
|
166
121
|
|
|
167
122
|
## Formatting Rules
|
|
168
123
|
|
|
169
|
-
- **No
|
|
170
|
-
- **Concise** — get to the point
|
|
171
|
-
- **Show code** — examples over explanation
|
|
172
|
-
- **Document the non-obvious** — skip what's clear from context
|
|
173
|
-
- **Call out outstanding review tags** — when closing documentation work, say
|
|
174
|
-
which headings or docs still carry `(review)` tags
|
|
124
|
+
- **No `<hr>` in demo markup** — never use horizontal rules in examples
|
|
@@ -11,6 +11,7 @@ For layout or responsive work, read:
|
|
|
11
11
|
|
|
12
12
|
- `docs/responsive-design.md`
|
|
13
13
|
- `docs/layouts-and-structures.md`
|
|
14
|
+
- `docs/magic-classes.md`
|
|
14
15
|
|
|
15
16
|
## Scope
|
|
16
17
|
|
|
@@ -34,8 +35,11 @@ Do not use this skill for general documentation or for framework-internals work.
|
|
|
34
35
|
- `grid` with `cols-*` for column-based structures
|
|
35
36
|
- `flex` for linear, single-axis arrangements
|
|
36
37
|
- `container-*` for width and placement
|
|
37
|
-
3.
|
|
38
|
-
|
|
38
|
+
3. Check whether JTB already provides an approved magic or composite class that
|
|
39
|
+
reduces responsive noise for the pattern you need.
|
|
40
|
+
4. Build mobile-first. Add explicit `{bp}:` responsive utilities only when no
|
|
41
|
+
documented higher-level pattern expresses the layout cleanly.
|
|
42
|
+
5. Only escalate to custom solutions when documented primitives cannot express
|
|
39
43
|
the need cleanly.
|
|
40
44
|
|
|
41
45
|
## Markup
|
|
@@ -45,6 +49,13 @@ Do not use this skill for general documentation or for framework-internals work.
|
|
|
45
49
|
## Rules
|
|
46
50
|
|
|
47
51
|
- Prefer mobile-first base layouts with responsive enhancement.
|
|
52
|
+
- Default to the fewest structural elements that cleanly express the layout.
|
|
53
|
+
- Combine width, rhythm, and internal layout on the same element when they do
|
|
54
|
+
not need isolation.
|
|
55
|
+
- Do not split `container`, padding, and grid/flex across extra wrappers unless
|
|
56
|
+
one of those concerns genuinely needs its own box.
|
|
57
|
+
- Put shared layout/presentation utilities on the highest valid parent. Only
|
|
58
|
+
repeat them on children when a child genuinely needs a different value.
|
|
48
59
|
- Treat `container-*` as a layout primitive with built-in inline gutter. Do not
|
|
49
60
|
add extra horizontal padding on the same element.
|
|
50
61
|
- Let the component own its internal padding. Use the container for width and
|
|
@@ -52,5 +63,8 @@ Do not use this skill for general documentation or for framework-internals work.
|
|
|
52
63
|
- Default section rhythm:
|
|
53
64
|
- `py-4-3-2` for standard sections
|
|
54
65
|
- `py-5-3-2` for more prominent sections
|
|
66
|
+
- Prefer approved magic/composite classes when they express an established
|
|
67
|
+
responsive pattern more clearly than explicit breakpoint chains. Common
|
|
68
|
+
examples include `py-*`, `gap-*`, and `cols-*` patterns.
|
|
55
69
|
- Use `{bp}:` for progressive layout changes.
|
|
56
70
|
- Use `to-` and `on-` primarily for visibility windows, not layout progression.
|
package/AGENTS.md
CHANGED
|
@@ -85,7 +85,8 @@ use `gap` instead.
|
|
|
85
85
|
|
|
86
86
|
**Stop and ask when:**
|
|
87
87
|
|
|
88
|
-
- Modifying files not mentioned in the request, unless clearly required to
|
|
88
|
+
- Modifying files not mentioned in the request, unless clearly required to
|
|
89
|
+
complete the task correctly.
|
|
89
90
|
- Multiple valid approaches exist and the choice has real consequences.
|
|
90
91
|
- Something conflicts with existing patterns in a way that needs a decision.
|
|
91
92
|
- Your interpretation of the request is genuinely ambiguous.
|
|
@@ -95,13 +96,15 @@ use `gap` instead.
|
|
|
95
96
|
- "I'll also…" — unsolicited additions
|
|
96
97
|
- "While I'm at it…" — scope expansion
|
|
97
98
|
- Using flags, options, or commands not present in the existing code or docs
|
|
98
|
-
- Expanding scope because something "requires"
|
|
99
|
-
ask first
|
|
99
|
+
- Expanding scope because something "requires" extra work — name the
|
|
100
|
+
prerequisite and ask first
|
|
100
101
|
|
|
101
102
|
## Assumptions
|
|
102
103
|
|
|
103
|
-
|
|
104
|
-
|
|
104
|
+
State assumptions plainly. If an assumption has real consequences, do not
|
|
105
|
+
proceed without raising it.
|
|
106
|
+
|
|
107
|
+
If you are not sure, say so directly. Do not present guesses as facts.
|
|
105
108
|
|
|
106
109
|
## Disagreement and Pushback
|
|
107
110
|
|
|
@@ -130,13 +133,40 @@ follow the direction.
|
|
|
130
133
|
- **Name it before fixing it** — if something needs prerequisite work, say what
|
|
131
134
|
and why before doing it
|
|
132
135
|
|
|
133
|
-
##
|
|
134
|
-
|
|
135
|
-
-
|
|
136
|
-
|
|
137
|
-
-
|
|
138
|
-
|
|
139
|
-
|
|
136
|
+
## Consistency First
|
|
137
|
+
|
|
138
|
+
- Check what the codebase already does before applying any rule or pattern.
|
|
139
|
+
- Validate existing patterns against applicable skills and guidelines.
|
|
140
|
+
- If a pattern conflicts with a rule, surface it — do not silently follow the wrong pattern.
|
|
141
|
+
|
|
142
|
+
## Scope Discipline
|
|
143
|
+
|
|
144
|
+
- Do not add adjacent improvements, refactors, cleanup, renaming, formatting,
|
|
145
|
+
reorganisation, or bundled unrelated changes unless explicitly requested or
|
|
146
|
+
clearly required to complete the task correctly.
|
|
147
|
+
- Do not introduce flags, options, or commands that are not already part of the
|
|
148
|
+
existing code, docs, or agreed approach without raising them first.
|
|
149
|
+
- If something "requires" extra work, name the prerequisite and ask before
|
|
150
|
+
expanding scope.
|
|
151
|
+
- Never remove a non-obviously-wrong comment without explicit approval.
|
|
152
|
+
|
|
153
|
+
## Execution Style
|
|
154
|
+
|
|
155
|
+
- For small, explicit tasks, do the work directly and report the result.
|
|
156
|
+
- For multi-step, risky, or ambiguous work, use incremental check-ins.
|
|
157
|
+
- Show the approach before executing when scope, risk, or consequences justify
|
|
158
|
+
it.
|
|
159
|
+
- If the work starts taking a different shape than expected, surface that early
|
|
160
|
+
instead of finishing and explaining afterwards.
|
|
161
|
+
- Once a concrete change is agreed, make the update instead of asking for
|
|
162
|
+
another confirmation.
|
|
163
|
+
- Do not repeat agreement back unless there is a new risk, conflict, or
|
|
164
|
+
decision to surface.
|
|
165
|
+
- Keep responses concise. Avoid long explanations when the next action is
|
|
166
|
+
already clear.
|
|
167
|
+
- Do not summarise completed work. The result speaks for itself.
|
|
168
|
+
- Do not add filler at the end of responses ("let me know if you need
|
|
169
|
+
anything", "hope that helps", etc.).
|
|
140
170
|
|
|
141
171
|
## Frustrations to Avoid
|
|
142
172
|
|
|
@@ -146,39 +176,64 @@ follow the direction.
|
|
|
146
176
|
- Burying a concern in the middle of a response instead of leading with it
|
|
147
177
|
- Being indirect or vague to avoid conflict
|
|
148
178
|
|
|
149
|
-
##
|
|
150
|
-
|
|
151
|
-
-
|
|
152
|
-
|
|
153
|
-
-
|
|
154
|
-
|
|
155
|
-
|
|
179
|
+
## Session Management
|
|
180
|
+
|
|
181
|
+
- Work one issue at a time. Do not answer several unresolved points in a single
|
|
182
|
+
response.
|
|
183
|
+
- When multiple threads are in play, name the open threads explicitly — at the
|
|
184
|
+
top of the response, not buried at the end.
|
|
185
|
+
- If a tangent appears, state what the main thread was before engaging with it
|
|
186
|
+
so it is easy to return.
|
|
187
|
+
- If a required review, status, or process step becomes due, surface it before
|
|
188
|
+
moving on.
|
|
189
|
+
|
|
190
|
+
## Naykel Conventions
|
|
191
|
+
|
|
192
|
+
- When reviewing guidelines, skills, or conventions in a Naykel project, assume
|
|
193
|
+
they apply across all Naykel projects unless explicitly marked as
|
|
194
|
+
project-specific. Do not treat them as local decisions without evidence.
|
|
195
|
+
|
|
196
|
+
## Skills and File References
|
|
197
|
+
|
|
198
|
+
- When a skill system is available and a skill applies, invoke it before
|
|
199
|
+
proceeding unless it conflicts with the user's explicit request.
|
|
200
|
+
- Do not treat reading a `SKILL.md` file as a substitute for invoking the skill.
|
|
201
|
+
- When updating prompts, guidelines, or skills, first identify the project's
|
|
202
|
+
source-of-truth file before editing.
|
|
203
|
+
- Files under `.ai/` may be symlinks into a shared prompts/guidelines repo. If
|
|
204
|
+
so, update the symlink target.
|
|
205
|
+
- Do not update matching copies in parallel or alternate locations unless they
|
|
206
|
+
are the confirmed source of truth or the user explicitly asks.
|
|
207
|
+
- After changing project guidelines or adding/updating skills, run
|
|
208
|
+
`php artisan boost:update` in the project so the changes take effect.
|
|
209
|
+
- When a skill or prompt references a file that cannot be read, first try
|
|
210
|
+
resolving it from the repository root.
|
|
211
|
+
- If the file still cannot be found, stop and ask before proceeding.
|
|
212
|
+
- Do not make assumptions in place of missing references.
|
|
213
|
+
- Reference files and code locations using markdown links:
|
|
214
|
+
`[filename.md](path/to/file.md)` or `[file.php:42](path/file.php#L42)`.
|
|
215
|
+
Never use plain text paths.
|
|
156
216
|
|
|
157
|
-
##
|
|
158
|
-
|
|
159
|
-
When a skill system is available and a skill's trigger condition matches the
|
|
160
|
-
current task, invoke the skill before proceeding unless it conflicts with the
|
|
161
|
-
user's explicit request. Do not read SKILL.md files directly as a substitute
|
|
162
|
-
for invocation — reading is not the same as invoking.
|
|
217
|
+
## Task Tracking
|
|
163
218
|
|
|
164
|
-
|
|
219
|
+
`tasks.md` in the project root is a memory aid. It preserves useful context
|
|
220
|
+
across sessions, especially when conversations branch or go off on tangents.
|
|
165
221
|
|
|
166
|
-
|
|
167
|
-
resolving the path from the repository root. If it
|
|
168
|
-
still can't be found, stop and ask before proceeding. Do not make assumptions
|
|
169
|
-
in place of missing information.
|
|
222
|
+
**What belongs:**
|
|
170
223
|
|
|
171
|
-
|
|
224
|
+
- Specific findings or decisions that would otherwise be lost
|
|
225
|
+
- Items discussed but not being worked on right now
|
|
226
|
+
- Durable context worth remembering later
|
|
172
227
|
|
|
173
|
-
|
|
174
|
-
preserves important context across sessions.
|
|
228
|
+
**What does not belong:**
|
|
175
229
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
230
|
+
- Status of active work
|
|
231
|
+
- Things Nathan obviously knows
|
|
232
|
+
- Vague reminders
|
|
233
|
+
- Obvious next steps
|
|
179
234
|
|
|
180
|
-
|
|
181
|
-
|
|
235
|
+
Write to `tasks.md` when a decision, finding, or parked item would otherwise
|
|
236
|
+
be lost at the end of the session. Do not wait to be asked.
|
|
182
237
|
|
|
183
238
|
Three buckets:
|
|
184
239
|
|
|
@@ -188,5 +243,5 @@ Three buckets:
|
|
|
188
243
|
|
|
189
244
|
## Off-Limits Directories
|
|
190
245
|
|
|
191
|
-
-
|
|
192
|
-
reference files
|
|
246
|
+
- `/tmp` is Nathan's personal scratch space. Never read, modify, delete, or
|
|
247
|
+
reference files there unless explicitly asked.
|