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.
- package/CITATION.cff +5 -5
- package/README.md +154 -245
- package/SKILL.md +170 -75
- package/dist/bin/unslop.d.ts +1 -1
- package/dist/bin/unslop.d.ts.map +1 -1
- package/dist/bin/unslop.js +59 -18
- package/dist/bin/unslop.js.map +1 -1
- package/dist/src/analyzer/design-craft.d.ts +38 -0
- package/dist/src/analyzer/design-craft.d.ts.map +1 -0
- package/dist/src/analyzer/design-craft.js +611 -0
- package/dist/src/analyzer/design-craft.js.map +1 -0
- package/dist/src/analyzer/refactor-plan.d.ts +49 -0
- package/dist/src/analyzer/refactor-plan.d.ts.map +1 -0
- package/dist/src/analyzer/refactor-plan.js +229 -0
- package/dist/src/analyzer/refactor-plan.js.map +1 -0
- package/dist/src/analyzer/slop-detector.d.ts +10 -2
- package/dist/src/analyzer/slop-detector.d.ts.map +1 -1
- package/dist/src/analyzer/slop-detector.js +30 -7
- package/dist/src/analyzer/slop-detector.js.map +1 -1
- package/dist/src/mcp/server.d.ts.map +1 -1
- package/dist/src/mcp/server.js +40 -2
- package/dist/src/mcp/server.js.map +1 -1
- package/dist/src/presets/anthropic-warm-editorial.json +122 -0
- package/dist/src/presets/bloomberg-terminal-dense.json +104 -0
- package/dist/src/presets/fintech-institutional.json +104 -0
- package/dist/src/presets/index.d.ts +20 -1
- package/dist/src/presets/index.d.ts.map +1 -1
- package/dist/src/presets/index.js +55 -4
- package/dist/src/presets/index.js.map +1 -1
- package/dist/src/presets/linear-precision.json +104 -0
- package/dist/src/presets/neo-brutalist-craft.json +122 -0
- package/dist/src/presets/raycast-command.json +108 -0
- package/dist/src/presets/stripe-atmospheric.json +120 -0
- package/dist/src/presets/swiss-editorial.json +122 -0
- package/dist/src/presets/teenage-engineering.json +120 -0
- package/dist/src/presets/vercel-monochrome.json +120 -0
- package/dist/src/sync/rule-writer.d.ts.map +1 -1
- package/dist/src/sync/rule-writer.js +6 -3
- package/dist/src/sync/rule-writer.js.map +1 -1
- package/dist/src/sync/token-exporter.d.ts +12 -0
- package/dist/src/sync/token-exporter.d.ts.map +1 -1
- package/dist/src/sync/token-exporter.js +176 -6
- package/dist/src/sync/token-exporter.js.map +1 -1
- package/dist/src/version.d.ts +2 -2
- package/dist/src/version.d.ts.map +1 -1
- package/dist/src/version.js +5 -2
- package/dist/src/version.js.map +1 -1
- package/glama.json +60 -10
- package/package.json +7 -2
- package/scripts/build.mjs +23 -6
- 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:
|
|
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:
|
|
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
|
|
15
|
-
|
|
16
|
-
|
|
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.
|
|
3
|
+
**Your agent can write the code. unslop gives it a measurable design engineering protocol.**
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/unslop-mcp)
|
|
6
6
|
[](https://www.npmjs.com/package/unslop-mcp)
|
|
@@ -10,177 +10,190 @@
|
|
|
10
10
|
|
|
11
11
|

|
|
12
12
|
|
|
13
|
-
`unslop` is a zero-runtime-dependency CLI, native MCP
|
|
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
|

|
|
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
|
-
|
|
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
|
-
##
|
|
27
|
+
## v2 at a glance
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
-
##
|
|
39
|
+
## The 7-Pillar Design Craft Engine
|
|
56
40
|
|
|
57
|
-
|
|
41
|
+
Run a deterministic baseline before letting an agent rewrite the interface:
|
|
58
42
|
|
|
59
43
|
```bash
|
|
60
|
-
npx -y unslop-mcp
|
|
44
|
+
npx -y unslop-mcp audit . --json
|
|
61
45
|
```
|
|
62
46
|
|
|
63
47
|
```text
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
|
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
|
-
|
|
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
|
|
95
|
-
```
|
|
83
|
+
## Design Transformation Blueprint
|
|
96
84
|
|
|
97
|
-
|
|
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
|
|
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
|
-
|
|
91
|
+
The report contains:
|
|
107
92
|
|
|
108
|
-
|
|
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
|
-
|
|
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
|
|
113
|
+
npx -y unslop-mcp refactor-plan src --preset swiss-editorial --report reports/DESIGN.md --json
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
145
|
+
Use the same deterministic exporter for a built-in archetype or extracted Design DNA.
|
|
132
146
|
|
|
133
|
-
###
|
|
147
|
+
### Tailwind v4 `@theme`
|
|
134
148
|
|
|
135
149
|
```bash
|
|
136
|
-
npx -y unslop-mcp export-tokens --preset linear-
|
|
150
|
+
npx -y unslop-mcp export-tokens --preset linear-precision --format tailwind-v4 --out tokens.css
|
|
137
151
|
```
|
|
138
152
|
|
|
139
|
-
|
|
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
|
-
|
|
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
|
-
|
|
163
|
+
### Pure CSS custom properties
|
|
146
164
|
|
|
147
|
-
```
|
|
148
|
-
|
|
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
|
-
|
|
169
|
+
Emits standalone `:root` and `.dark` variables without requiring Tailwind.
|
|
153
170
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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
|
-
|
|
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
|
|
168
|
-
npx -y unslop-mcp export-tokens --source
|
|
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
|
-
|
|
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
|
|
188
|
+
## Native MCP Server
|
|
174
189
|
|
|
175
|
-
Start the zero-dependency
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
203
|
-
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
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
|
-
|
|
222
|
+
Positional `mcp` remains a backward-compatible alias for `--mcp`.
|
|
211
223
|
|
|
212
|
-
|
|
224
|
+
## Principal UI/UX Design Engineer Skill
|
|
213
225
|
|
|
214
|
-
|
|
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
|
-
|
|
217
|
-
|
|
218
|
-
|
|
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
|
-
|
|
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
|
-
|
|
236
|
+
## Alternative: zero-build GitHub execution
|
|
224
237
|
|
|
225
|
-
The npm package is the primary installation path.
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
260
|
-
|
|
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
|
-
|
|
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
|
-
##
|
|
257
|
+
## Registry and citation metadata
|
|
306
258
|
|
|
307
|
-
|
|
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
|
-
|
|
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
|
|
270
|
+
npm run typecheck
|
|
355
271
|
npm test
|
|
272
|
+
npm run build
|
|
356
273
|
```
|
|
357
274
|
|
|
358
|
-
|
|
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
|
|
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
|