unslop-mcp 1.2.1 → 2.0.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.
Files changed (51) hide show
  1. package/CITATION.cff +5 -5
  2. package/README.md +154 -245
  3. package/SKILL.md +170 -75
  4. package/dist/bin/unslop.d.ts +1 -1
  5. package/dist/bin/unslop.d.ts.map +1 -1
  6. package/dist/bin/unslop.js +59 -18
  7. package/dist/bin/unslop.js.map +1 -1
  8. package/dist/src/analyzer/design-craft.d.ts +38 -0
  9. package/dist/src/analyzer/design-craft.d.ts.map +1 -0
  10. package/dist/src/analyzer/design-craft.js +611 -0
  11. package/dist/src/analyzer/design-craft.js.map +1 -0
  12. package/dist/src/analyzer/refactor-plan.d.ts +49 -0
  13. package/dist/src/analyzer/refactor-plan.d.ts.map +1 -0
  14. package/dist/src/analyzer/refactor-plan.js +229 -0
  15. package/dist/src/analyzer/refactor-plan.js.map +1 -0
  16. package/dist/src/analyzer/slop-detector.d.ts +10 -2
  17. package/dist/src/analyzer/slop-detector.d.ts.map +1 -1
  18. package/dist/src/analyzer/slop-detector.js +30 -7
  19. package/dist/src/analyzer/slop-detector.js.map +1 -1
  20. package/dist/src/mcp/server.d.ts.map +1 -1
  21. package/dist/src/mcp/server.js +40 -2
  22. package/dist/src/mcp/server.js.map +1 -1
  23. package/dist/src/presets/anthropic-warm-editorial.json +122 -0
  24. package/dist/src/presets/bloomberg-terminal-dense.json +104 -0
  25. package/dist/src/presets/fintech-institutional.json +104 -0
  26. package/dist/src/presets/index.d.ts +20 -1
  27. package/dist/src/presets/index.d.ts.map +1 -1
  28. package/dist/src/presets/index.js +55 -4
  29. package/dist/src/presets/index.js.map +1 -1
  30. package/dist/src/presets/linear-precision.json +104 -0
  31. package/dist/src/presets/neo-brutalist-craft.json +122 -0
  32. package/dist/src/presets/raycast-command.json +108 -0
  33. package/dist/src/presets/stripe-atmospheric.json +120 -0
  34. package/dist/src/presets/swiss-editorial.json +122 -0
  35. package/dist/src/presets/teenage-engineering.json +120 -0
  36. package/dist/src/presets/vercel-monochrome.json +120 -0
  37. package/dist/src/sync/rule-writer.d.ts.map +1 -1
  38. package/dist/src/sync/rule-writer.js +6 -3
  39. package/dist/src/sync/rule-writer.js.map +1 -1
  40. package/dist/src/sync/token-exporter.d.ts +12 -0
  41. package/dist/src/sync/token-exporter.d.ts.map +1 -1
  42. package/dist/src/sync/token-exporter.js +176 -6
  43. package/dist/src/sync/token-exporter.js.map +1 -1
  44. package/dist/src/version.d.ts +2 -2
  45. package/dist/src/version.d.ts.map +1 -1
  46. package/dist/src/version.js +5 -2
  47. package/dist/src/version.js.map +1 -1
  48. package/glama.json +60 -10
  49. package/package.json +7 -2
  50. package/scripts/build.mjs +23 -6
  51. package/server.json +9 -5
package/CITATION.cff CHANGED
@@ -1,19 +1,19 @@
1
1
  cff-version: 1.2.0
2
2
  message: If you use this software, please cite it using these metadata.
3
- title: "unslop: Studio-grade design systems and anti-slop MCP tools"
3
+ title: "unslop: 7-Pillar UI/UX Design Engineering CLI and MCP Server"
4
4
  type: software
5
5
  authors:
6
6
  - name: VibeFoundry
7
7
  website: https://github.com/avivgerz-hue
8
- version: 1.2.0
8
+ version: 2.0.0
9
9
  date-released: "2026-11-07"
10
10
  license: MIT
11
11
  repository-code: https://github.com/avivgerz-hue/unslop
12
12
  url: https://github.com/avivgerz-hue/unslop
13
13
  abstract: >-
14
- unslop is a zero-runtime-dependency MCP server and CLI for auditing AI-generated
15
- interfaces, extracting versioned Design DNA, and applying complete design-system
16
- presets with real Tailwind CSS v4 tokens and WCAG contrast checks.
14
+ unslop is a zero-runtime-dependency MCP server, CLI, and Agent Skill with 72
15
+ design engineering rules, 10 studio archetypes, exact WCAG and perceptual checks,
16
+ multi-format token exports, and prioritized Design Transformation Blueprints.
17
17
  keywords:
18
18
  - model-context-protocol
19
19
  - mcp-server
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # unslop
1
+ # unslop v2.0.0
2
2
 
3
- **Your agent can write the code. Stop letting it ship the same AI interface.**
3
+ **Your agent can write the code. unslop gives it a measurable design engineering protocol.**
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/unslop-mcp.svg)](https://www.npmjs.com/package/unslop-mcp)
6
6
  [![npm downloads](https://img.shields.io/npm/dm/unslop-mcp.svg)](https://www.npmjs.com/package/unslop-mcp)
@@ -10,177 +10,190 @@
10
10
 
11
11
  ![unslop preview](./assets/hero-preview.svg)
12
12
 
13
- `unslop` is a zero-runtime-dependency CLI, native MCP server, and installable Agent Skill that gives coding agents a real design system, audits frontend source for generic AI patterns and WCAG contrast failures, exports Tailwind v4 tokens, and turns live interfaces into enforceable Design DNA.
13
+ `unslop` is a zero-runtime-dependency **UI/UX Design Engineering CLI, native MCP Server, and AI Agent Skill**. It audits 72 rules across seven design craft pillars, installs ten studio-grade archetypes, extracts Design DNA, exports four token formats, and turns every finding into an exact, prioritized transformation blueprint for JSX/TSX, HTML, Vue, Svelte, CSS, and Tailwind codebases.
14
14
 
15
15
  Works with **Claude Code, OpenAI Codex, Cursor, Windsurf, Cline**, and any agent that reads project instructions.
16
16
 
17
17
  ![Before and after unslop: a generic purple-gradient AI landing page transformed into a precise, token-driven Linear Dark dashboard](https://raw.githubusercontent.com/avivgerz-hue/unslop/main/docs/assets/before-after-unslop.png)
18
18
 
19
19
  ```bash
20
- npx -y unslop-mcp init
20
+ npx -y unslop-mcp init --preset linear-precision
21
+ npx -y unslop-mcp audit .
22
+ npx -y unslop-mcp refactor-plan . --report UNSLOP-REPORT.md
21
23
  ```
22
24
 
23
- That one command installs the `linear-dark` design contract into `.claude/skills/unslop/SKILL.md`, `CLAUDE.md`, `AGENTS.md`, `.cursorrules`, `.windsurfrules`, and `.clinerules`, then merges the native server into `.mcp.json`. Existing instructions and unrelated MCP servers are preserved.
25
+ The result is not a generic prompt. It is a versioned token contract, a **Design Craft Score from 0–100**, a seven-pillar scorecard, exact before/after translations, and file-level steps your agent can execute in one coherent pass.
24
26
 
25
- ## The difference
27
+ ## v2 at a glance
26
28
 
27
- ```text
28
- BEFORE: probabilistic taste AFTER: enforceable design physics
29
- ────────────────────────────────────── ──────────────────────────────────────
30
- “Make it modern and beautiful.” 4px grid · semantic surface hierarchy
31
- ↓ ↓
32
- centered purple-gradient hero 12-column content-driven composition
33
- ↓ ↓
34
- three centered emoji cards tight display type · 45–75ch body measure
35
- ↓ ↓
36
- shadow-xl + rounded-2xl everywhere hairline borders · intentional elevation
37
- ↓ ↓
38
- another interchangeable AI page auditable tokens + complete UI states
39
- ```
40
-
41
- `unslop` does not ask a model to be more creative. It constrains the implementation with explicit typography, geometry, color roles, elevation, motion, and verification loops.
42
-
43
- ## Why teams install it
44
-
45
- - **Installable taste, not a prompt snippet.** Five complete, versioned presets compile to CSS variables and strict agent laws.
46
- - **Deterministic anti-slop audit.** Scan TSX, JSX, Vue, Svelte, HTML, and CSS with exact `file:line:column` diagnostics.
47
- - **Mathematical WCAG 2.1 checks.** Real sRGB relative luminance, alpha compositing, and normal/large-text thresholds—not approximate color heuristics.
48
- - **Native MCP tools.** Audit, extract DNA, and apply presets directly from Claude Code, Claude Desktop, Cursor, or Codex over JSON-RPC 2.0 stdio.
49
- - **Tailwind v4 token export.** Generate `@theme`, `:root`, and `.dark` contracts from any built-in preset or extracted Design DNA.
50
- - **A score your agent can act on.** Every audit includes a structured refactoring brief and acceptance criteria.
51
- - **Extract real Design DNA.** Read local CSS or a live URL, including inline styles, linked stylesheets, and `@import` graphs.
52
- - **No runtime dependency footprint.** Node.js built-ins do the analysis, extraction, synchronization, MCP transport, and CLI work.
53
- - **Safe to re-run.** Managed blocks are idempotent; your existing agent instructions and MCP servers remain intact.
29
+ | Capability | v2 contract |
30
+ | --- | --- |
31
+ | Design Craft Engine | **72 rules · 7 pillars · A+–F grades** |
32
+ | Color analysis | Exact **WCAG 2.1 AA/AAA** plus **APCA-inspired perceptual checks** |
33
+ | Studio archetypes | **10** complete production design systems; five v1 IDs remain compatible |
34
+ | Token formats | Tailwind v4 `@theme`, Tailwind v3 config, CSS custom properties, W3C Design Tokens JSON |
35
+ | Transformation | `refactor-plan` CLI and `unslop_refactor_plan` MCP tool generate `UNSLOP-REPORT.md` |
36
+ | Agent protocol | Five-step principal UI/UX design engineer [`SKILL.md`](SKILL.md) |
37
+ | Runtime | Node.js 20.19+, JSON-RPC 2.0 stdio, **zero runtime dependencies** |
54
38
 
55
- ## Quickstart
39
+ ## The 7-Pillar Design Craft Engine
56
40
 
57
- ### 1. Choose a design system
41
+ Run a deterministic baseline before letting an agent rewrite the interface:
58
42
 
59
43
  ```bash
60
- npx -y unslop-mcp init --preset linear-dark
44
+ npx -y unslop-mcp audit . --json
61
45
  ```
62
46
 
63
47
  ```text
64
- Installed the linear-dark design system:
65
- created .claude/skills/unslop/SKILL.md
66
- created CLAUDE.md
67
- created AGENTS.md
68
- created .cursorrules
69
- created .windsurfrules
70
- created .clinerules
71
- created .mcp.json
72
-
73
- Next: run npx -y unslop-mcp audit . before your agent writes more UI.
48
+ Design Craft Score: 78/100 (C)
49
+ 7-Pillar Scorecard:
50
+ Color & Contrast: 82/100 (B) · 3 findings
51
+ Typography & Hierarchy: 76/100 (C) · 4 findings
52
+ Layout & Spatial Rhythm: 70/100 (C) · 5 findings
53
+ Surface & Elevation: 88/100 (B) · 2 findings
54
+ Copy & Microcopy: 82/100 (B) · 3 findings
55
+ Interaction & Motion: 58/100 (F) · 7 findings
56
+ Theme & Token Architecture: 90/100 (A) · 2 findings
74
57
  ```
75
58
 
76
- Then ask your agent:
59
+ | Pillar | Canonical rules | What the engine detects |
60
+ | --- | --- | --- |
61
+ | **1 · Color, Atmospheric Polarity & Contrast Math** | `SLOP-COLOR-*` | Purple/pink/indigo clone gradients, neon glows, absolute black/white glare, muddy grays, hardcoded component colors, low-opacity text, exact WCAG AA/AAA, APCA-inspired polarity |
62
+ | **2 · Typography & Scannable Hierarchy** | `SLOP-TYPE-*` | Fixed display scales, monotonous heading weights, paragraphs beyond readable measure, missing `tabular-nums`, cramped body leading, loose display leading, untracked uppercase labels |
63
+ | **3 · Layout, Spatial Rhythm & Grid Craft** | `SLOP-LAYOUT-*` | Centered three-card clones, nested cards, off-grid arbitrary values, excessive container rounding, arbitrary grids, missing content measures, conflicting spacing and radii |
64
+ | **4 · Visual Restraint & Surface Elevation** | `SLOP-SURFACE-*` | Glassmorphism overuse, heavy dark-mode shadows, decorative blur blobs, icon badge clutter, unanchored raw elevation, ad-hoc shadow stacks |
65
+ | **5 · Copywriting & Microcopy Anti-Slop** | `SLOP-COPY-*` | 100+ cliché variants, including “Unleash the power,” “Revolutionize,” “Supercharge your workflow,” “Seamless integration,” “Next-generation,” hype, filler, superlatives, and emoji spam |
66
+ | **6 · Interactive Ergonomics, Motion & States** | `SLOP-UX-*` | Clickable divs, missing labels and keyboard rings, incomplete hover/active/disabled states, small targets, positive `tabindex`, `transition-all`, missing reduced-motion behavior |
67
+ | **7 · Theme Parity & Token Architecture** | `SLOP-TOKEN-*` | Broken Canvas → Surface-1 → Surface-2 → Interactive → Border order, asymmetric dark overrides, missing dark companions, off-grid or mistyped tokens |
77
68
 
78
- > Build the settings page using the unslop contract. Reuse the semantic tokens, implement every interaction state, run the audit, and resolve each finding.
69
+ Legacy `slop/*` IDs remain in output for compatibility. Canonical `SLOP-*` findings drive the v2 seven-pillar score, with location-level deduplication so compatibility output does not double-penalize a finding.
79
70
 
80
- ### 2. Audit the interface
71
+ ### Scores with an action attached
72
+
73
+ Every audit includes exact `file:line:column` diagnostics and refactoring instructions. The overall score is the rounded mean of seven independently capped pillar scores; **95–100 is A+**. Use `--fail-under` in CI or agent loops:
81
74
 
82
75
  ```bash
83
- npx -y unslop-mcp audit src
76
+ npx -y unslop-mcp audit . --fail-under 95
77
+ npx -y unslop-mcp audit . --prompt
78
+ npx -y unslop-mcp audit src --json --no-fail
84
79
  ```
85
80
 
86
- ```text
87
- src/components/Hero.tsx:4:7 WARNING slop/cliche-gradient
88
- Cliché purple/indigo AI gradient stop detected.
89
- Fix: Replace the gradient with a deliberate solid accent ...
90
-
91
- src/components/Metric.tsx:8:5 WARNING slop/numeric-alignment
92
- Numeric UI is missing tabular figures, causing unstable alignment.
81
+ Static analysis never replaces rendered verification. Keyboard operation, responsive behavior, actual contrast, content overflow, and reduced motion still need explicit inspection.
93
82
 
94
- Design Integrity Score: 86/100 (B)
95
- ```
83
+ ## Design Transformation Blueprint
96
84
 
97
- The full output also contains a copy-ready refactoring prompt. Machine-readable output is one flag away:
85
+ `unslop_refactor_plan` turns the audit into an executable **Design Transformation Blueprint** instead of a list of vague taste suggestions:
98
86
 
99
87
  ```bash
100
- npx -y unslop-mcp audit . --json
101
- npx -y unslop-mcp audit . --prompt
102
- npx -y unslop-mcp audit . --fail-under 90
103
- npx -y unslop-mcp audit . --no-fail
88
+ npx -y unslop-mcp refactor-plan . --preset linear-precision --report UNSLOP-REPORT.md
104
89
  ```
105
90
 
106
- By default, an audit exits `1` when it finds violations and `0` when clean. Invalid usage exits `2`. Unsupported or empty directories still produce a valid report with zero scanned files.
91
+ The report contains:
107
92
 
108
- ### 3. Extract a visual language
93
+ 1. **Design Craft Score and 7-Pillar Scorecard.**
94
+ 2. **Before → After Class & Token Translation Table** mapping detected classes, hex/RGB literals, off-grid values, and cliché copy to exact replacements from the selected archetype.
95
+ 3. **Prioritized P0/P1/P2 file:line steps** covering the entire interface transformation.
96
+ 4. **Acceptance criteria** for reaching 95–100 without suppressing rules or losing accessible states.
109
97
 
110
- From a local stylesheet:
98
+ Example translations:
99
+
100
+ | Before | After |
101
+ | --- | --- |
102
+ | `from-purple-500 via-pink-500 to-indigo-500` | `bg-[var(--surface-1)] text-[var(--text-primary)]` |
103
+ | `shadow-xl` | `border border-[var(--border-subtle)] shadow-[var(--shadow-md)]` |
104
+ | `p-[13px]` | `p-[var(--spacing-12)]` |
105
+ | `rounded-3xl` | `rounded-[var(--radius-lg)]` |
106
+ | `transition-all` | `transition-colors motion-reduce:transition-none` |
107
+ | `#777777` | `var(--text-primary)` |
108
+ | “Unleash the power” | A concrete product capability and verifiable user outcome |
109
+
110
+ Use `--json` for the complete machine-readable blueprint:
111
111
 
112
112
  ```bash
113
- npx -y unslop-mcp extract ./tokens.css --name acme -o .claude/skills/unslop/SKILL.md
113
+ npx -y unslop-mcp refactor-plan src --preset swiss-editorial --report reports/DESIGN.md --json
114
114
  ```
115
115
 
116
- From a live URL:
116
+ ## 10 Studio-Grade Design Archetypes
117
+
118
+ Inspect and install a complete token and agent-rule contract:
117
119
 
118
120
  ```bash
119
- npx -y unslop-mcp extract https://example.com --name example --json -o design-dna.json
121
+ npx -y unslop-mcp presets
122
+ npx -y unslop-mcp presets anthropic-warm-editorial
123
+ npx -y unslop-mcp init --preset anthropic-warm-editorial
120
124
  ```
121
125
 
122
- The extractor inventories:
126
+ | Archetype | Visual and engineering thesis |
127
+ | --- | --- |
128
+ | `swiss-editorial` | High-contrast editorial grid, warm paper, serif/grotesk pairing, crisp hairline rules |
129
+ | `linear-precision` | Obsidian craft, luminance borders, compact tracking, subtle layers, tabular precision |
130
+ | `stripe-atmospheric` | Refined slate atmosphere, crisp white surfaces, cobalt trust, layered micro-shadows |
131
+ | `vercel-monochrome` | Architectural monochrome, geometric rhythm, zero decorative bloat, semantic status color |
132
+ | `teenage-engineering` | Tactile industrial UI, monospace labels, international orange, physical grid borders |
133
+ | `anthropic-warm-editorial` | Parchment and stone, literary serif headings, calm clay accents, generous reading measure |
134
+ | `bloomberg-terminal-dense` | Ultra-high data density, strict numeric alignment, compact workflows, semantic tickers |
135
+ | `raycast-command` | Frosted graphite command palette, keyboard-first selection, crisp shortcut badges |
136
+ | `fintech-institutional` | Deep forest-navy authority, legible financial hierarchy, restrained brass and emerald |
137
+ | `neo-brutalist-craft` | Intentional ink borders, offset hard shadows, bold geometric contrast, disciplined rhythm |
138
+
139
+ Each archetype includes full surface hierarchy, explicit light/dark companions, typography scale and weights, spacing rhythm, radii, shadow/border elevation, layout contract, motion curve and spring values, plus ten archetype-specific design laws.
140
+
141
+ The v1 IDs `linear-dark`, `swiss-grid`, `stripe-minimal`, `apple-glass`, and `neo-brutalist` remain loadable for existing installations; the canonical v2 gallery contains the ten systems above.
123
142
 
124
- - surface, text, muted-text, border, accent, and on-accent colors;
125
- - CSS custom properties and font stacks;
126
- - font sizes, line heights, weights, and tracking;
127
- - radius and spacing scales;
128
- - complete layered elevation tokens and their individual shadow layers;
129
- - durations and easing functions.
143
+ ## Four token formats — presets or extracted DNA
130
144
 
131
- Markdown output is a complete Claude-compatible `SKILL.md`. `--json` emits both the raw token inventory and its validated, compiled preset. Network requests use timeouts, response-size limits, a bounded stylesheet queue, and HTTP(S)-only URLs; page JavaScript is never executed.
145
+ Use the same deterministic exporter for a built-in archetype or extracted Design DNA.
132
146
 
133
- ### 4. Export Tailwind v4 and framework-agnostic tokens
147
+ ### Tailwind v4 `@theme`
134
148
 
135
149
  ```bash
136
- npx -y unslop-mcp export-tokens --preset linear-dark --out tokens.css
150
+ npx -y unslop-mcp export-tokens --preset linear-precision --format tailwind-v4 --out tokens.css
137
151
  ```
138
152
 
139
- The generated stylesheet contains three complementary contracts:
153
+ Produces `@theme`, `:root`, and `.dark` contracts with semantic colors, fonts, fluid type, tracking, weights, radii, shadows, spacing, motion, and layout values.
154
+
155
+ ### Tailwind v3 configuration fragment
156
+
157
+ ```bash
158
+ npx -y unslop-mcp export-tokens --preset linear-precision --format tailwind-v3 --out tailwind.config.js
159
+ ```
140
160
 
141
- - **Tailwind v4 `@theme`** with literal `--color-*`, `--font-*`, `--text-*`, `--radius-*`, `--shadow-*`, `--spacing-*`, motion, and container tokens.
142
- - **`:root` semantic variables** such as `--surface-0`, `--surface-1`, `--text-primary`, `--border-subtle`, and `--font-display` for CSS Modules, vanilla CSS, styled-components, or any other framework.
143
- - **`.dark` overrides** for semantic and Tailwind color variables. Dark presets retain their native palette; light presets receive a deterministic dark companion derived from their source colors.
161
+ Emits a mergeable `theme.extend` fragment with semantic utilities.
144
162
 
145
- Use it with Tailwind v4:
163
+ ### Pure CSS custom properties
146
164
 
147
- ```css
148
- @import "tailwindcss";
149
- @import "./tokens.css";
165
+ ```bash
166
+ npx -y unslop-mcp export-tokens --preset linear-precision --format css --out tokens.css
150
167
  ```
151
168
 
152
- Or without Tailwind:
169
+ Emits standalone `:root` and `.dark` variables without requiring Tailwind.
153
170
 
154
- ```css
155
- .panel {
156
- color: var(--text-primary);
157
- background: var(--surface-1);
158
- border: var(--border-width) solid var(--border-subtle);
159
- border-radius: var(--radius-lg);
160
- box-shadow: var(--shadow-md);
161
- }
171
+ ### W3C Design Tokens JSON
172
+
173
+ ```bash
174
+ npx -y unslop-mcp export-tokens --preset linear-precision --format w3c-json --out tokens.json
162
175
  ```
163
176
 
164
- Compile tokens directly from extracted DNA instead of a built-in preset:
177
+ Emits typed `$type` / `$value` groups for light and dark colors, typography, dimensions, radii, spacing, shadows, motion, and layout. A `.json` output path infers this format automatically.
178
+
179
+ ### Extract Design DNA from CSS or a URL
165
180
 
166
181
  ```bash
167
- npx -y unslop-mcp export-tokens --source https://example.com --name example --out example-tokens.css
168
- npx -y unslop-mcp export-tokens --source ./tokens.css --name acme
182
+ npx -y unslop-mcp extract https://example.com --name reference --json -o design-dna.json
183
+ npx -y unslop-mcp export-tokens --source https://example.com --name reference --format w3c-json --out tokens.json
169
184
  ```
170
185
 
171
- `--preset` and `--source` are mutually exclusive. Without `--out`, CSS is written to stdout.
186
+ The extractor reads local CSS or live HTML, inline styles, linked stylesheets, and `@import` graphs with explicit byte, request, and stylesheet budgets. Extraction warnings remain visible rather than silently inventing missing tokens.
172
187
 
173
- ## Native MCP server
188
+ ## Native MCP Server
174
189
 
175
- Start the zero-dependency Model Context Protocol server over stdio:
190
+ Start the zero-dependency JSON-RPC 2.0 stdio server:
176
191
 
177
192
  ```bash
178
193
  npx -y unslop-mcp --mcp
179
194
  ```
180
195
 
181
- **Published 1.2.0 compatibility:** this source update adds `--mcp`; that alias and the `unslop-mcp` executable name require a subsequent npm publish. Until then, the published tarball accepts the equivalent positional form `npx -y unslop-mcp@1.2.0 mcp`.
182
-
183
- `init` creates or updates this project configuration automatically:
196
+ `init` merge-safely creates or updates `.mcp.json` without replacing unrelated servers, top-level settings, or custom fields on the unslop entry:
184
197
 
185
198
  ```json
186
199
  {
@@ -193,178 +206,74 @@ npx -y unslop-mcp --mcp
193
206
  }
194
207
  ```
195
208
 
196
- The merge preserves unrelated entries in `mcpServers`, other top-level settings, and custom fields on the unslop entry. Invalid JSON is rejected rather than overwritten. Claude Code can also register the server explicitly:
209
+ Claude Code can register it explicitly:
197
210
 
198
211
  ```bash
199
212
  claude mcp add --scope project unslop -- npx -y unslop-mcp --mcp
200
213
  ```
201
214
 
202
- For Claude Desktop, add the same `mcpServers.unslop` entry to the application's MCP configuration. Cursor reads project `.mcp.json`; Codex and other MCP-compatible clients can launch the same stdio command.
203
-
204
- | MCP tool | Required input | Result |
205
- | --- | --- | --- |
206
- | `unslop_audit` | None; optional `path` and `ignore` | Full audit, integrity score, exact diagnostics, and refactoring instructions |
207
- | `unslop_extract_dna` | `source` CSS path or HTTP(S) URL | Raw DNA, validated compiled preset, and ready-to-use Agent Skill |
208
- | `unslop_apply_preset` | `preset`; optional `projectDir` | Six synchronized agent-rule files plus merge-safe `.mcp.json` |
215
+ | MCP tool | Purpose |
216
+ | --- | --- |
217
+ | `unslop_audit` | 72-rule diagnostic, Design Craft Score, seven-pillar scorecard, exact findings |
218
+ | `unslop_extract_dna` | CSS/URL extraction and a complete compiled Design DNA preset |
219
+ | `unslop_apply_preset` | Install any canonical archetype and merge project agent rules/MCP configuration |
220
+ | `unslop_refactor_plan` | Generate `UNSLOP-REPORT.md` with exact translations and prioritized transformation steps |
209
221
 
210
- The transport supports `initialize`, `ping`, `tools/list`, `tools/call`, JSON-RPC errors, notifications, and newline-delimited stdio framing. Protocol messages are the only stdout output. Tool execution failures return MCP `isError` results without terminating the server.
222
+ Positional `mcp` remains a backward-compatible alias for `--mcp`.
211
223
 
212
- ### Production Docker image
224
+ ## Principal UI/UX Design Engineer Skill
213
225
 
214
- Build the minimal Node 22 Alpine image from the committed runtime; no TypeScript compiler, source files, or development dependencies enter the build context:
226
+ The rewritten [`SKILL.md`](SKILL.md) is a five-step execution protocol for Claude Code, Cursor, Windsurf, and other coding agents:
215
227
 
216
- ```bash
217
- docker build -t unslop:mcp .
218
- docker run --rm -i unslop:mcp
219
- ```
228
+ 1. **Anti-Slop Diagnostic:** baseline all seven pillars with `unslop_audit`.
229
+ 2. **Aesthetic Direction & Token Foundation:** choose one archetype or extract Design DNA; install tokens before editing components.
230
+ 3. **Structural & Layout Transformation:** use `unslop_refactor_plan` to replace clone layouts, enforce rhythm, and apply exact translations.
231
+ 4. **Surface, Typography & Copy Polish:** implement semantic colors, WCAG contrast, fluid type, tabular numbers, and concrete product copy.
232
+ 5. **Interactive Ergonomics & Verification:** complete focus and state behavior, then re-audit to **95–100/100 (A+)** and inspect the rendered result.
220
233
 
221
- The image entrypoint is `node dist/bin/unslop.js mcp`. CI builds this image and verifies the `initialize` response, silent handling of `notifications/initialized`, and the three-tool `tools/list` response over stdio with networking disabled.
234
+ `init` installs the selected contract into `.claude/skills/unslop/SKILL.md`, `CLAUDE.md`, `AGENTS.md`, `.cursorrules`, `.windsurfrules`, and `.clinerules`. Existing content outside managed blocks is preserved and repeated installs are byte-for-byte idempotent.
222
235
 
223
- ### Alternative: zero-build GitHub execution
236
+ ## Alternative: zero-build GitHub execution
224
237
 
225
- The npm package is the primary installation path. As an alternative, run the committed distribution directly from GitHub without installing TypeScript or any other development dependency:
238
+ The npm package is the primary installation path. To execute the committed distribution directly from GitHub:
226
239
 
227
240
  ```bash
228
241
  npx -y github:avivgerz-hue/unslop --version
229
- npx -y github:avivgerz-hue/unslop init
242
+ npx -y github:avivgerz-hue/unslop init --preset linear-precision
230
243
  npx -y github:avivgerz-hue/unslop --mcp
231
244
  ```
232
245
 
233
- The repository includes `dist/`. During a GitHub install, `prepare` uses the local TypeScript compiler for development when it is available and otherwise validates and reuses the committed runtime and all five preset JSON files. A cold `npx` invocation still needs to download the package; no local compilation step is required.
246
+ The repository includes `dist/`. During a GitHub install, `prepare` uses TypeScript when available and otherwise validates and reuses the committed runtime and all fifteen canonical-plus-legacy preset JSON files. No production dependency or local compilation step is required.
234
247
 
235
- ### Registry and citation metadata
236
-
237
- Machine-readable discovery documents live at the repository root:
238
-
239
- - [`server.json`](server.json) follows the official MCP Registry schema, declares the published `unslop-mcp` npm package with the `npx` runtime and fixed `--mcp` argument, and carries the three tool summaries in the registry-approved publisher metadata extension. `package.json` includes the matching `mcpName` ownership declaration.
240
- - [`smithery.yaml`](smithery.yaml) starts `npx -y unslop-mcp --mcp` over stdio without requiring configuration.
241
- - [`glama.json`](glama.json) uses Glama's schema and mirrors the exact runtime tool names, descriptions, and input schemas.
242
- - [`CITATION.cff`](CITATION.cff) provides CFF 1.2.0 software citation metadata for VibeFoundry and powers GitHub's citation widget.
243
-
244
- The npm package is published as [`unslop-mcp`](https://www.npmjs.com/package/unslop-mcp). These files support registry indexing but do not claim that a registry listing has occurred.
245
-
246
- ## Preset gallery
247
-
248
- | Preset | Mode | Visual thesis | Best suited for |
249
- | --- | --- | --- | --- |
250
- | `linear-dark` | Dark | Quiet neutral layers, hairline borders, compact type, restrained indigo | Developer tools, operational dashboards, engineering products |
251
- | `swiss-grid` | Light | Editorial scale, exposed grid, black rules, one signal-red accent | Publications, portfolios, cultural and typographic sites |
252
- | `stripe-minimal` | Light | Cool atmospheric canvas, crisp white surfaces, layered soft elevation | SaaS, financial products, marketing with dense product UI |
253
- | `apple-glass` | Light | Optical hierarchy, sparse translucent materials, continuous corners, springs | Consumer products, media experiences, spatial interfaces |
254
- | `neo-brutalist` | Light | Opaque surfaces, stark ink borders, hard offset shadows, one loud accent | Experiments, communities, campaigns, playful tools |
255
-
256
- Inspect every token and law before choosing:
248
+ ## Docker MCP
257
249
 
258
250
  ```bash
259
- npx -y unslop-mcp presets
260
- npx -y unslop-mcp presets swiss-grid
261
- npx -y unslop-mcp presets apple-glass --json
262
- ```
263
-
264
- ## What the audit detects
265
-
266
- | Rule ID | Detection |
267
- | --- | --- |
268
- | `slop/cliche-gradient` | Purple, indigo, violet, and fuchsia gradient utility stops and matching CSS gradients |
269
- | `slop/low-contrast` | WCAG 2.1 AA failures for detected CSS, inline-style, and Tailwind foreground/background pairs |
270
- | `slop/neon-glow` | Cyan, magenta, and fuchsia cyber-glow box shadows |
271
- | `slop/emoji-feature-grid` | Three-column grids combined with centered content and emoji in the same component region |
272
- | `slop/raw-elevation` | `shadow-xl`/`shadow-2xl` without a subtle border token, or a single heavy CSS shadow without support |
273
- | `slop/display-tracking` | Large `h1`/`h2` typography without tight or negative tracking |
274
- | `slop/numeric-alignment` | Static numeric UI and marked dynamic metrics without `tabular-nums` |
275
- | `slop/font-weight-mixing` | Four or more distinct weights in one component source tree |
276
- | `slop/conflicting-spacing` | Different values for the same spacing property and responsive variant on one element |
277
- | `slop/off-grid-spacing` | Arbitrary pixel/rem spacing outside the 4px grid, excluding deliberate 1px and 2px optical stops |
278
- | `slop/conflicting-radius` | Competing radius utilities for one element and corner axis |
279
- | `slop/radius-scale` | Four or more unrelated non-pill surface radii in a component tree |
280
-
281
- **WCAG 2.1 contrast:** colors are converted from hex, RGB(A), HSL(A), named colors, CSS variables, or supported Tailwind utilities into sRGB. Channels are linearized with the official WCAG formula, translucent foregrounds are composited over their backgrounds, and contrast is `(L1 + 0.05) / (L2 + 0.05)`. Normal text requires **4.5:1**; large text (at least 24px, or 18.66px at 700+) requires **3:1**. Unsupported or indeterminate color functions are skipped rather than guessed.
282
-
283
- **Design Integrity Score:** start at 100; subtract 12 per error, 7 per warning, and 3 per informational finding, clamped to `0–100`. Low-contrast findings are errors. The score is comparable and deterministic, not a claim that static analysis can replace rendered design review.
284
-
285
- ## CLI reference
286
-
287
- ```text
288
- unslop init [--preset <name>] [--dir <path>] [--force] [--json]
289
- unslop mcp
290
- unslop audit [dir] [--json | --prompt] [--fail-under <0-100>]
291
- [--ignore <directory>] [--no-fail]
292
- unslop extract <url-or-css-path> [--name <preset-name>] [--json]
293
- [--output <path>] [--timeout <ms>] [--max-stylesheets <n>]
294
- unslop export-tokens [--preset <name> | --source <url-or-css-path>]
295
- [--name <preset-name>] [--out <file>]
296
- unslop presets [name] [--json]
297
- unslop help
298
- unslop --version
251
+ docker build --tag unslop:mcp .
252
+ docker run --rm -i unslop:mcp
299
253
  ```
300
254
 
301
- ### Safe rule synchronization
302
-
303
- Each generated agent-rule file contains an `unslop` managed block. Running `init` again updates only that block. Existing rule content is preserved byte-for-byte. `.mcp.json` is merged structurally and never replaces unrelated MCP servers. `--force` intentionally replaces whole agent-rule files, including unmanaged content—use it only when that is what you want; it does not erase other MCP servers.
255
+ The image entrypoint is `node dist/bin/unslop.js mcp`. CI builds the image and verifies `initialize`, silent handling of `notifications/initialized`, and all four tools in `tools/list` over stdio with networking disabled.
304
256
 
305
- ## Agent Skill usage
257
+ ## Registry and citation metadata
306
258
 
307
- ### Claude Code
259
+ - [`server.json`](server.json) follows the official MCP Registry schema and declares `unslop-mcp` 2.0.0 with the `npx -y … --mcp` startup contract and four tool summaries.
260
+ - [`glama.json`](glama.json) mirrors the exact MCP tool schemas and canonical archetype enum.
261
+ - [`smithery.yaml`](smithery.yaml) starts the native stdio server without additional configuration.
262
+ - [`CITATION.cff`](CITATION.cff) provides software citation metadata for VibeFoundry.
308
263
 
309
- `init` writes `.claude/skills/unslop/SKILL.md` with valid frontmatter and the selected design contract. `CLAUDE.md` points to the same managed rules so the constraints remain visible in project context.
310
-
311
- ### OpenAI Codex
312
-
313
- Codex reads `AGENTS.md`. Keep the generated file at the repository root and ask Codex to run `npx -y unslop-mcp audit .` after implementing UI.
314
-
315
- ### Cursor, Windsurf, and Cline
316
-
317
- The same contract is compiled into `.cursorrules`, `.windsurfrules`, and `.clinerules`. No plugin, MCP server, or additional runtime is required.
318
-
319
- ### Manual installation
320
-
321
- Copy this repository’s root `SKILL.md` into `.claude/skills/unslop/SKILL.md` for the preset-agnostic anti-slop contract, or run `init` to include a complete preset. The compiled rules are plain Markdown and can be adapted to other agents without changing the CLI.
322
-
323
- ## Programmatic API
324
-
325
- ```ts
326
- import { auditTarget, contrastRatio } from "unslop/analyzer";
327
- import { extractDesignDNA, createPresetFromDNA } from "unslop/extractor";
328
- import { startMcpServer } from "unslop/mcp";
329
- import { loadPreset } from "unslop/presets";
330
- import { installUnslop, renderAgentSkill } from "unslop/sync";
331
- import { renderTokenStylesheet } from "unslop/tokens";
332
-
333
- const report = await auditTarget("./src");
334
- const dna = await extractDesignDNA("./tokens.css");
335
- const extractedPreset = createPresetFromDNA(dna, "acme");
336
- const skill = renderAgentSkill(extractedPreset);
337
- const stylesheet = renderTokenStylesheet(extractedPreset);
338
-
339
- await installUnslop({ cwd: process.cwd(), preset: loadPreset("linear-dark") });
340
- console.log(report.score, contrastRatio("#111111", "#ffffff"), skill, stylesheet);
341
-
342
- // Blocks until the MCP client's stdio stream closes:
343
- await startMcpServer({ cwd: process.cwd() });
344
- ```
345
-
346
- The analyzer also exposes `analyzeSource` for in-memory fixtures and editor integrations.
264
+ The npm package is published as [`unslop-mcp`](https://www.npmjs.com/package/unslop-mcp). These files support registry indexing but do not claim that a registry listing has occurred.
347
265
 
348
- ## Development
266
+ ## Development and verification
349
267
 
350
268
  ```bash
351
- git clone https://github.com/avivgerz-hue/unslop.git
352
- cd unslop
353
269
  npm ci
354
- npm run build
270
+ npm run typecheck
355
271
  npm test
272
+ npm run build
356
273
  ```
357
274
 
358
- See [CONTRIBUTING.md](CONTRIBUTING.md) for analyzer-rule design, extraction safety, preset requirements, and pull-request guidelines.
275
+ CI verifies Node.js 20 and 22, a production install without TypeScript, reproducible committed `dist/`, real CLI/MCP stdio negotiation, and the Docker MCP handshake. The v2 suite covers all seven pillars, all ten archetypes, every token format, extracted DNA, refactor blueprints, and manifest-driven 2.0.0 version output.
359
276
 
360
277
  ## License
361
278
 
362
- MIT © 2026 VibeFoundry. See [LICENSE](LICENSE).
363
-
364
- ## Part of the VibeFoundry Agent Suite
365
-
366
- | Tool | Purpose |
367
- | --- | --- |
368
- | 🎨 [unslop](https://github.com/avivgerz-hue/unslop) | Studio-grade UI design systems & Anti-Slop engine for coding agents. |
369
- | 🛡️ [vibe-shield](https://github.com/avivgerz-hue/vibe-shield) | Automated security scanner & MCP guard for AI-generated codebases. |
370
- | 👻 [ghost-qa](https://github.com/avivgerz-hue/ghost-qa) | Autonomous headless browser QA & self-healing verification loop. |
279
+ MIT · VibeFoundry