@minhspark/spacing-skill 2.12.1 → 2.13.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/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Bùi Đăng Minh (buidangminh23)
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Bùi Đăng Minh (buidangminh23)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,223 +1,245 @@
1
- <div align="center">
2
-
3
- # 📐 spacing-skill
4
-
5
- ### The Anti-Cramped Spacing Skill for AI Agents
6
-
7
- *One scale. Real rhythm. Optical alignment. UI that breathes instead of looking templated.*
8
-
9
- [![License: MIT](https://img.shields.io/badge/License-MIT-0078D4?style=for-the-badge)](LICENSE)
10
- [![npm](https://img.shields.io/npm/v/@minhspark/spacing-skill?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@minhspark/spacing-skill)
11
- [![Release](https://img.shields.io/github/v/release/buidangminh23/spacing-skill?style=for-the-badge&label=release)](https://github.com/buidangminh23/spacing-skill/releases/latest)
12
- [![CI](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml/badge.svg)](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml)
13
- [![Agent Skills](https://img.shields.io/badge/Agent-Skills-E53935?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
14
- [![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-FFB300?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
15
- [![Tools](https://img.shields.io/badge/Works_with-Claude_·_Cursor_·_Codex_·_Gemini-43A047?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
16
-
17
- </div>
18
-
19
- [Latest release](https://github.com/buidangminh23/spacing-skill/releases/latest) · [CI checks](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml) · [npm package](https://www.npmjs.com/package/@minhspark/spacing-skill) · [Release policy](CONTRIBUTING.md#releasing)
20
-
21
- ---
22
-
23
- ## Why
24
-
25
- The fastest tell of AI-generated UI is **spacing**, not color or typography:
26
- `p-4` on every container, `gap-2` between unrelated things, magic numbers like
27
- `13px`, headings orphaned by symmetric margins, everything equally cramped.
28
-
29
- `spacing-skill` gives an agent a spacing *system* — read the layout, set three
30
- dials, pull every value from one scale, encode relationships with proximity, and
31
- let type drive vertical rhythm. It's contextual: nothing fires automatically, so
32
- a dashboard doesn't get marketing-hero air and a hero doesn't get table density.
33
-
34
- ---
35
-
36
- ## Install
37
-
38
- #### npm package
39
-
40
- Download the versioned bundle from [npm](https://www.npmjs.com/package/@minhspark/spacing-skill):
41
-
42
- ```bash
43
- npm install @minhspark/spacing-skill
44
- ```
45
-
46
- The files are installed under node_modules/@minhspark/spacing-skill. This command
47
- does not register the skill with an agent; use the agent installation commands below
48
- or copy the bundled skill into the agent's skill directory.
49
-
50
- Stable downloads and release notes: [GitHub Releases](https://github.com/buidangminh23/spacing-skill/releases).
51
- Each release includes a portable ZIP and `SHA256SUMS.txt`. Extract the ZIP to retain the native plugin directory structure.
52
-
53
- Pick your tool. Every block below has a **copy button** (hover its top-right corner).
54
-
55
- #### `npx` · skills
56
-
57
- The [`skills` CLI on npm](https://www.npmjs.com/package/skills) installs and
58
- registers this skill from GitHub. It is an alternative to downloading the npm bundle.
59
-
60
- ```bash
61
- npx skills add buidangminh23/spacing-skill
62
- ```
63
-
64
- #### `npx` · add-skill
65
-
66
- ```bash
67
- npx add-skill buidangminh23/spacing-skill
68
- ```
69
-
70
- #### Claude Code &nbsp;·&nbsp; native plugin (run inside Claude Code)
71
-
72
- ```text
73
- /plugin marketplace add buidangminh23/spacing-skill
74
- /plugin install spacing-skill@spacing-skill
75
- ```
76
-
77
- #### Cursor
78
-
79
- ```bash
80
- npx skills add buidangminh23/spacing-skill -a cursor
81
- ```
82
-
83
- #### Codex &nbsp;·&nbsp; native marketplace
84
-
85
- ```text
86
- codex plugin marketplace add buidangminh23/spacing-skill
87
- ```
88
-
89
- #### Gemini CLI &nbsp;·&nbsp; native extension
90
-
91
- ```bash
92
- gemini extensions install https://github.com/buidangminh23/spacing-skill
93
- ```
94
-
95
- **Works with:** Claude Code · Cursor · Codex · Gemini CLI.
96
- Skill name once loaded: **`design-spacing-rhythm`** → then prompt *"Use the spacing-rhythm skill."*
97
-
98
- <details>
99
- <summary><b>More options</b> — global flags, other agents (Cline, opencode…), manual install</summary>
100
-
101
- The `skills` CLI targets any agent with `-a` and installs to the user directory with `-g`:
102
-
103
- | Tool | Command |
104
- |---|---|
105
- | Claude Code | `npx skills add buidangminh23/spacing-skill -a claude-code -g` |
106
- | Codex | `npx skills add buidangminh23/spacing-skill -a codex -g` |
107
- | Cursor | `npx skills add buidangminh23/spacing-skill -a cursor -g` |
108
- | Cline | `npx skills add buidangminh23/spacing-skill -a cline -g` |
109
- | opencode | `npx skills add buidangminh23/spacing-skill -a opencode -g` |
110
- | Several at once | `npx skills add buidangminh23/spacing-skill -a claude-code -a cursor -a codex` |
111
-
112
- Drop `-g` for a project-local install. Manage with `npx skills list`, `npx skills update`, `npx skills remove`.
113
-
114
- **Manual (portable)** — fetch the file once, then place it where your agent looks:
115
-
116
- ```bash
117
- curl -fsSL https://raw.githubusercontent.com/buidangminh23/spacing-skill/main/skills/spacing-skill/SKILL.md -o SKILL.md
118
- ```
119
-
120
- | Tool | Where it goes |
121
- |---|---|
122
- | Claude Code | `~/.claude/skills/design-spacing-rhythm/SKILL.md` (global) or `.claude/skills/…` (project) |
123
- | Codex | save in repo, then reference from `AGENTS.md` |
124
- | Cursor | rename to `.cursor/rules/spacing-skill.mdc` |
125
- | Cline / opencode / others | drop into the agent's skills/rules folder, or paste `SKILL.md` as context |
126
-
127
- </details>
128
-
129
- ---
130
-
131
- ## Skills
132
-
133
- | Folder | Install name | What it does |
134
- |---|---|---|
135
- | `skills/spacing-skill` | `design-spacing-rhythm` | Anti-cramped spacing: one scale, vertical rhythm, whitespace hierarchy, optical alignment, responsive density, accessibility floors, document & long-form (Word/Docs/PDF) spacing, and a pre-flight checklist. |
136
-
137
- ---
138
-
139
- ## Settings — The Three Dials
140
-
141
- Every spacing decision is gated by three dials. Defaults assume a general product
142
- UI; override them conversationally ("make it denser", "this feels cramped").
143
-
144
- | Dial | Range | Default | Meaning |
145
- |---|---|---|---|
146
- | `SPACING_STEP` | 4 / 8 | **8** | Base grid unit (px). `4` for dense data UI, `8` for clean general layout. |
147
- | `DENSITY` | 1–10 | **4** | `1` = art-gallery airy (marketing) → `10` = cockpit packed (tables/terminals). |
148
- | `ALIGNMENT_RIGOR` | 1–10 | **7** | `1` = freeform/editorial → `10` = strict grid- and baseline-locked. |
149
-
150
- The skill infers these from a one-line **"Space Read"** before generating any
151
- code — e.g. *"Spacing this as: a SaaS landing at density 3, on an 8px scale, with
152
- generous section rhythm."*
153
-
154
- ---
155
-
156
- ## What's inside the skill
157
-
158
- 16 sections, all dial-driven and contextual:
159
-
160
- - **§0 Space Inference** — read signals, emit a one-line "Space Read", anti-default discipline.
161
- - **§1 The three dials** — inference tables mapping the situation to dial values.
162
- - **§2 One spacing scale** — px-keyed, Tailwind-aligned; primitive vs semantic tokens; modular macro tier. No magic numbers, ever.
163
- - **§3 Primitives & gap ownership** — stack / inline / inset / grid-gap, and the single-owner law.
164
- - **§4 Layout grid & alignment** — 12-col grid, measure (45–75ch), flex/grid alignment toolkit, subgrid for aligned card internals.
165
- - **§5 Vertical rhythm** — type drives spacing; asymmetric heading margins; control heights from line-height + inset.
166
- - **§6 Whitespace hierarchy** — the proximity ladder (intra < inter-item < inter-group, ≥1.5×).
167
- - **§7 Optical alignment** — asymmetric glyph nudges, icon↔text cap-band, hanging punctuation, overshoot.
168
- - **§8 Responsive & fluid spacing** — `clamp()`, mobile density step-down, container queries, logical properties, safe-area insets.
169
- - **§9 Accessibility floors** — verified WCAG numbers (2.5.8 / 2.5.5 / 1.4.12 / 1.4.10), Apple 44pt / Material 48dp.
170
- - **§10 Component recipes** — buttons, inputs, forms, cards, nav, modals, tables, chips, menus, sections, media.
171
- - **§11 Anti-pattern catalog** — 14 AI spacing tells, each with the fix.
172
- - **§12 Implementation per stack** — Tailwind, plain CSS, MUI/Chakra/Radix/shadcn, design tokens, debugging.
173
- - **§13 Operating procedure** — 8-step pipeline, conversational override protocol, full pre-flight checklist.
174
- - **§14 Document & long-form** — Word / Google Docs / PDF / Markdown: page margins, line spacing, the indent-vs-space rule, heading styles, print pagination, and a concept→tool mapping.
175
- - **§15 Continuous improvement** — a field-learnings loop: every real spacing edit is logged in `LEARNINGS.md` and distilled back into the skill, so it gets sharper with use.
176
-
177
- ---
178
-
179
- ## Continuous improvement
180
-
181
- This skill is built to **get sharper with use** (§15). Every real spacing or
182
- alignment edit is captured in [`LEARNINGS.md`](LEARNINGS.md) — a one-line Space
183
- Read, the real numbers, and a `covered` / `gap` / `refinement` verdict — and any
184
- lesson that generalizes is distilled back into `SKILL.md` with a `CHANGELOG.md`
185
- version bump. The journal stays out of the context-loaded skill, so the brain
186
- stays lean while the experience compounds.
187
-
188
- ## Release policy
189
-
190
- Releases follow Semantic Versioning: patch for corrections, minor for compatible
191
- skill additions, major for incompatible installation or behavior changes.
192
- `package.json` is the version source; the skill and plugin manifests are
193
- published to npm. See [CONTRIBUTING.md](CONTRIBUTING.md#releasing) for the full procedure.
194
-
195
- A `vX.Y.Z` tag triggers validation on Windows, macOS, and Linux with Node 22 and
196
- 24. Every versioned manifest and the latest changelog entry must match the tag.
197
- Only passing releases publish: notes come from that changelog entry, and the ZIP
198
- contains the committed skill, native plugin metadata, license, and documentation.
199
- Existing releases are verified on rerun instead of overwritten. Published tags
200
- and assets must not be moved or replaced; corrections require a new version.
201
-
202
- ---
203
-
204
- ## Common Questions
205
-
206
- **Does it work outside Claude Code?**
207
- Yes. `SKILL.md` is a portable instruction file. Drop it into Codex, Cursor, or
208
- any agent that can load skill/instruction files, or paste it as context.
209
-
210
- **Tailwind only?**
211
- No. The default scale matches Tailwind so it drops in cleanly, but §12
212
- (Implementation per stack) covers plain CSS variables, component libraries, and
213
- design tokens.
214
-
215
- ---
216
-
217
- <div align="center">
218
-
219
- **MIT Licensed** · Built by [buidangminh23](https://github.com/buidangminh23)
220
-
221
- *Give it room — but give it measured room.*
222
-
223
- </div>
1
+ <div align="center">
2
+
3
+ # 📐 spacing-skill
4
+
5
+ ### The Anti-Cramped Spacing Skill for AI Agents
6
+
7
+ *One scale. Real rhythm. Optical alignment. UI that breathes instead of looking templated.*
8
+
9
+ [![License: MIT](https://img.shields.io/badge/License-MIT-0078D4?style=for-the-badge)](LICENSE)
10
+ [![npm](https://img.shields.io/npm/v/@minhspark/spacing-skill?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@minhspark/spacing-skill)
11
+ [![Release](https://img.shields.io/github/v/release/buidangminh23/spacing-skill?style=for-the-badge&label=release)](https://github.com/buidangminh23/spacing-skill/releases/latest)
12
+ [![CI](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml/badge.svg)](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml)
13
+ [![Agent Skills](https://img.shields.io/badge/Agent-Skills-E53935?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
14
+ [![Claude Code](https://img.shields.io/badge/Claude_Code-Plugin-FFB300?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
15
+ [![Tools](https://img.shields.io/badge/Works_with-Claude_·_Cursor_·_Codex_·_Gemini-43A047?style=for-the-badge)](https://github.com/buidangminh23/spacing-skill)
16
+
17
+ </div>
18
+
19
+ [Latest release](https://github.com/buidangminh23/spacing-skill/releases/latest) · [CI checks](https://github.com/buidangminh23/spacing-skill/actions/workflows/ci.yml) · [npm package](https://www.npmjs.com/package/@minhspark/spacing-skill) · [Release policy](CONTRIBUTING.md#releasing)
20
+
21
+ ---
22
+
23
+ ## Release notifications
24
+
25
+ To receive new release notifications, open [this repository](https://github.com/buidangminh23/spacing-skill), select **Watch → Custom → Releases**, then click **Apply**. Choose GitHub or email delivery in your [notification settings](https://github.com/settings/notifications).
26
+
27
+ Starring the repository or downloading/installing a package does not subscribe you to release notifications. Notifications do not update your installed copy; follow the installation instructions to update.
28
+
29
+ [View release notes](https://github.com/buidangminh23/spacing-skill/releases).
30
+
31
+ ## Why
32
+
33
+ The fastest tell of AI-generated UI is **spacing**, not color or typography:
34
+ `p-4` on every container, `gap-2` between unrelated things, magic numbers like
35
+ `13px`, headings orphaned by symmetric margins, everything equally cramped.
36
+
37
+ `spacing-skill` gives an agent a spacing *system* — read the layout, set three
38
+ dials, pull every value from one scale, encode relationships with proximity, and
39
+ let type drive vertical rhythm. It's contextual: nothing fires automatically, so
40
+ a dashboard doesn't get marketing-hero air and a hero doesn't get table density.
41
+
42
+ ---
43
+
44
+ ## Install
45
+ #### GitHub Packages
46
+
47
+ A repository-linked copy is available as `@buidangminh23/spacing-skill` on
48
+ [GitHub Packages](https://github.com/buidangminh23/spacing-skill/packages).
49
+ The npmjs.com package remains `@minhspark/spacing-skill`.
50
+ GitHub's npm registry requires authentication with a classic token with
51
+ `read:packages` even for public packages. Authenticate locally, never commit a token:
52
+
53
+ ```bash
54
+ npm login --scope=@buidangminh23 --registry=https://npm.pkg.github.com --auth-type=legacy
55
+ npm install @buidangminh23/spacing-skill --registry=https://npm.pkg.github.com
56
+ ```
57
+
58
+ This downloads the bundle; use the agent-specific instructions below to register it.
59
+
60
+ #### npm package
61
+
62
+ Download the versioned bundle from [npm](https://www.npmjs.com/package/@minhspark/spacing-skill):
63
+
64
+ ```bash
65
+ npm install @minhspark/spacing-skill
66
+ ```
67
+
68
+ The files are installed under node_modules/@minhspark/spacing-skill. This command
69
+ does not register the skill with an agent; use the agent installation commands below
70
+ or copy the bundled skill into the agent's skill directory.
71
+
72
+ Stable downloads and release notes: [GitHub Releases](https://github.com/buidangminh23/spacing-skill/releases).
73
+ Each release includes a portable ZIP and `SHA256SUMS.txt`. Extract the ZIP to retain the native plugin directory structure.
74
+
75
+ Pick your tool. Every block below has a **copy button** (hover its top-right corner).
76
+
77
+ #### `npx` · skills
78
+
79
+ The [`skills` CLI on npm](https://www.npmjs.com/package/skills) installs and
80
+ registers this skill from GitHub. It is an alternative to downloading the npm bundle.
81
+
82
+ ```bash
83
+ npx skills add buidangminh23/spacing-skill
84
+ ```
85
+
86
+ #### `npx` · add-skill
87
+
88
+ ```bash
89
+ npx add-skill buidangminh23/spacing-skill
90
+ ```
91
+
92
+ #### Claude Code &nbsp;·&nbsp; native plugin (run inside Claude Code)
93
+
94
+ ```text
95
+ /plugin marketplace add buidangminh23/spacing-skill
96
+ /plugin install spacing-skill@spacing-skill
97
+ ```
98
+
99
+ #### Cursor
100
+
101
+ ```bash
102
+ npx skills add buidangminh23/spacing-skill -a cursor
103
+ ```
104
+
105
+ #### Codex &nbsp;·&nbsp; native marketplace
106
+
107
+ ```text
108
+ codex plugin marketplace add buidangminh23/spacing-skill
109
+ ```
110
+
111
+ #### Gemini CLI &nbsp;·&nbsp; native extension
112
+
113
+ ```bash
114
+ gemini extensions install https://github.com/buidangminh23/spacing-skill
115
+ ```
116
+
117
+ **Works with:** Claude Code · Cursor · Codex · Gemini CLI.
118
+ Skill name once loaded: **`design-spacing-rhythm`** → then prompt *"Use the spacing-rhythm skill."*
119
+
120
+ <details>
121
+ <summary><b>More options</b> — global flags, other agents (Cline, opencode…), manual install</summary>
122
+
123
+ The `skills` CLI targets any agent with `-a` and installs to the user directory with `-g`:
124
+
125
+ | Tool | Command |
126
+ |---|---|
127
+ | Claude Code | `npx skills add buidangminh23/spacing-skill -a claude-code -g` |
128
+ | Codex | `npx skills add buidangminh23/spacing-skill -a codex -g` |
129
+ | Cursor | `npx skills add buidangminh23/spacing-skill -a cursor -g` |
130
+ | Cline | `npx skills add buidangminh23/spacing-skill -a cline -g` |
131
+ | opencode | `npx skills add buidangminh23/spacing-skill -a opencode -g` |
132
+ | Several at once | `npx skills add buidangminh23/spacing-skill -a claude-code -a cursor -a codex` |
133
+
134
+ Drop `-g` for a project-local install. Manage with `npx skills list`, `npx skills update`, `npx skills remove`.
135
+
136
+ **Manual (portable)** — fetch the file once, then place it where your agent looks:
137
+
138
+ ```bash
139
+ curl -fsSL https://raw.githubusercontent.com/buidangminh23/spacing-skill/main/skills/spacing-skill/SKILL.md -o SKILL.md
140
+ ```
141
+
142
+ | Tool | Where it goes |
143
+ |---|---|
144
+ | Claude Code | `~/.claude/skills/design-spacing-rhythm/SKILL.md` (global) or `.claude/skills/…` (project) |
145
+ | Codex | save in repo, then reference from `AGENTS.md` |
146
+ | Cursor | rename to `.cursor/rules/spacing-skill.mdc` |
147
+ | Cline / opencode / others | drop into the agent's skills/rules folder, or paste `SKILL.md` as context |
148
+
149
+ </details>
150
+
151
+ ---
152
+
153
+ ## Skills
154
+
155
+ | Folder | Install name | What it does |
156
+ |---|---|---|
157
+ | `skills/spacing-skill` | `design-spacing-rhythm` | Anti-cramped spacing: one scale, vertical rhythm, whitespace hierarchy, optical alignment, responsive density, accessibility floors, document & long-form (Word/Docs/PDF) spacing, and a pre-flight checklist. |
158
+
159
+ ---
160
+
161
+ ## Settings — The Three Dials
162
+
163
+ Every spacing decision is gated by three dials. Defaults assume a general product
164
+ UI; override them conversationally ("make it denser", "this feels cramped").
165
+
166
+ | Dial | Range | Default | Meaning |
167
+ |---|---|---|---|
168
+ | `SPACING_STEP` | 4 / 8 | **8** | Base grid unit (px). `4` for dense data UI, `8` for clean general layout. |
169
+ | `DENSITY` | 1–10 | **4** | `1` = art-gallery airy (marketing) → `10` = cockpit packed (tables/terminals). |
170
+ | `ALIGNMENT_RIGOR` | 1–10 | **7** | `1` = freeform/editorial → `10` = strict grid- and baseline-locked. |
171
+
172
+ The skill infers these from a one-line **"Space Read"** before generating any
173
+ code — e.g. *"Spacing this as: a SaaS landing at density 3, on an 8px scale, with
174
+ generous section rhythm."*
175
+
176
+ ---
177
+
178
+ ## What's inside the skill
179
+
180
+ 16 sections, all dial-driven and contextual:
181
+
182
+ - **§0 Space Inference** — read signals, emit a one-line "Space Read", anti-default discipline.
183
+ - **§1 The three dials** — inference tables mapping the situation to dial values.
184
+ - **§2 One spacing scale** — px-keyed, Tailwind-aligned; primitive vs semantic tokens; modular macro tier. No magic numbers, ever.
185
+ - **§3 Primitives & gap ownership** — stack / inline / inset / grid-gap, and the single-owner law.
186
+ - **§4 Layout grid & alignment** — 12-col grid, measure (45–75ch), flex/grid alignment toolkit, subgrid for aligned card internals.
187
+ - **§5 Vertical rhythm** — type drives spacing; asymmetric heading margins; control heights from line-height + inset.
188
+ - **§6 Whitespace hierarchy** — the proximity ladder (intra < inter-item < inter-group, ≥1.5×).
189
+ - **§7 Optical alignment** — asymmetric glyph nudges, icon↔text cap-band, hanging punctuation, overshoot.
190
+ - **§8 Responsive & fluid spacing** — `clamp()`, mobile density step-down, container queries, logical properties, safe-area insets.
191
+ - **§9 Accessibility floors** — verified WCAG numbers (2.5.8 / 2.5.5 / 1.4.12 / 1.4.10), Apple 44pt / Material 48dp.
192
+ - **§10 Component recipes** — buttons, inputs, forms, cards, nav, modals, tables, chips, menus, sections, media.
193
+ - **§11 Anti-pattern catalog** — 14 AI spacing tells, each with the fix.
194
+ - **§12 Implementation per stack** — Tailwind, plain CSS, MUI/Chakra/Radix/shadcn, design tokens, debugging.
195
+ - **§13 Operating procedure** — 8-step pipeline, conversational override protocol, full pre-flight checklist.
196
+ - **§14 Document & long-form** — Word / Google Docs / PDF / Markdown: page margins, line spacing, the indent-vs-space rule, heading styles, print pagination, and a concept→tool mapping.
197
+ - **§15 Continuous improvement** — a field-learnings loop: every real spacing edit is logged in `LEARNINGS.md` and distilled back into the skill, so it gets sharper with use.
198
+
199
+ ---
200
+
201
+ ## Continuous improvement
202
+
203
+ This skill is built to **get sharper with use** (§15). Every real spacing or
204
+ alignment edit is captured in [`LEARNINGS.md`](LEARNINGS.md) — a one-line Space
205
+ Read, the real numbers, and a `covered` / `gap` / `refinement` verdict — and any
206
+ lesson that generalizes is distilled back into `SKILL.md` with a `CHANGELOG.md`
207
+ version bump. The journal stays out of the context-loaded skill, so the brain
208
+ stays lean while the experience compounds.
209
+
210
+ ## Release policy
211
+
212
+ Releases follow Semantic Versioning: patch for corrections, minor for compatible
213
+ skill additions, major for incompatible installation or behavior changes.
214
+ `package.json` is the version source; the skill and plugin manifests are
215
+ published to npm. See [CONTRIBUTING.md](CONTRIBUTING.md#releasing) for the full procedure.
216
+
217
+ A `vX.Y.Z` tag triggers validation on Windows, macOS, and Linux with Node 22 and
218
+ 24. Every versioned manifest and the latest changelog entry must match the tag.
219
+ Only passing releases publish: notes come from that changelog entry, and the ZIP
220
+ contains the committed skill, native plugin metadata, license, and documentation.
221
+ Existing releases are verified on rerun instead of overwritten. Published tags
222
+ and assets must not be moved or replaced; corrections require a new version.
223
+
224
+ ---
225
+
226
+ ## Common Questions
227
+
228
+ **Does it work outside Claude Code?**
229
+ Yes. `SKILL.md` is a portable instruction file. Drop it into Codex, Cursor, or
230
+ any agent that can load skill/instruction files, or paste it as context.
231
+
232
+ **Tailwind only?**
233
+ No. The default scale matches Tailwind so it drops in cleanly, but §12
234
+ (Implementation per stack) covers plain CSS variables, component libraries, and
235
+ design tokens.
236
+
237
+ ---
238
+
239
+ <div align="center">
240
+
241
+ **MIT Licensed** · Built by [buidangminh23](https://github.com/buidangminh23)
242
+
243
+ *Give it room — but give it measured room.*
244
+
245
+ </div>
@@ -1,6 +1,6 @@
1
- {
2
- "name": "spacing-skill",
3
- "version": "2.12.1",
4
- "description": "Anti-cramped spacing skill for AI-generated UI — one spacing scale, vertical rhythm, optical alignment, and density discipline.",
5
- "contextFileName": "skills/spacing-skill/SKILL.md"
6
- }
1
+ {
2
+ "name": "spacing-skill",
3
+ "version": "2.13.0",
4
+ "description": "Anti-cramped spacing skill for AI-generated UI — one spacing scale, vertical rhythm, optical alignment, and density discipline.",
5
+ "contextFileName": "skills/spacing-skill/SKILL.md"
6
+ }
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
- {
2
- "name": "@minhspark/spacing-skill",
3
- "version": "2.12.1",
4
- "description": "Portable spacing and rhythm skill for AI coding agents",
5
- "license": "MIT",
6
- "repository": { "type": "git", "url": "git+https://github.com/buidangminh23/spacing-skill.git" },
7
- "homepage": "https://github.com/buidangminh23/spacing-skill#readme",
8
- "bugs": { "url": "https://github.com/buidangminh23/spacing-skill/issues" },
9
- "keywords": ["agent-skills", "spacing", "design", "claude", "codex", "gemini"],
10
- "publishConfig": { "access": "public" },
11
- "files": ["skills/", ".agents/", ".claude-plugin/", ".codex-plugin/", "gemini-extension.json", "CHANGELOG.md", "LEARNINGS.md"],
12
- "type": "module",
13
- "scripts": {
14
- "test": "node --test",
15
- "check": "node scripts/release.mjs check",
16
- "prepublishOnly": "npm test && npm run check",
17
- "version": "node scripts/release.mjs sync && git add .claude-plugin .codex-plugin gemini-extension.json",
18
- "release:notes": "node scripts/release.mjs notes",
19
- "release:pack": "node scripts/release.mjs pack"
20
- },
21
- "engines": { "node": ">=22" }
22
- }
1
+ {
2
+ "name": "@minhspark/spacing-skill",
3
+ "version": "2.13.0",
4
+ "description": "Portable spacing and rhythm skill for AI coding agents",
5
+ "license": "MIT",
6
+ "repository": { "type": "git", "url": "git+https://github.com/buidangminh23/spacing-skill.git" },
7
+ "homepage": "https://github.com/buidangminh23/spacing-skill#readme",
8
+ "bugs": { "url": "https://github.com/buidangminh23/spacing-skill/issues" },
9
+ "keywords": ["agent-skills", "spacing", "design", "claude", "codex", "gemini"],
10
+ "publishConfig": { "access": "public" },
11
+ "files": ["skills/", ".agents/", ".claude-plugin/", ".codex-plugin/", "gemini-extension.json", "CHANGELOG.md", "LEARNINGS.md"],
12
+ "type": "module",
13
+ "scripts": {
14
+ "test": "node --test",
15
+ "check": "node scripts/release.mjs check",
16
+ "prepublishOnly": "npm test && npm run check",
17
+ "version": "node scripts/release.mjs sync && git add .claude-plugin .codex-plugin gemini-extension.json",
18
+ "release:notes": "node scripts/release.mjs notes",
19
+ "release:pack": "node scripts/release.mjs pack"
20
+ },
21
+ "engines": { "node": ">=22" }
22
+ }