{"_id":"@blackbelt-technology/frontend-mockup-loop","_rev":"5-16ae759fcafde2aa3d344e18606dd01f","name":"@blackbelt-technology/frontend-mockup-loop","dist-tags":{"latest":"0.8.0"},"versions":{"0.5.4":{"name":"@blackbelt-technology/frontend-mockup-loop","version":"0.5.4","keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"license":"MIT","_id":"@blackbelt-technology/frontend-mockup-loop@0.5.4","maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"pi":{"skills":[".pi/skills/frontend-mockup-loop"],"extensions":["src/extension.ts"]},"dist":{"shasum":"c9bf730116213fddf7eebd5e94a6ae08ab22f78c","tarball":"https://registry.npmjs.org/@blackbelt-technology/frontend-mockup-loop/-/frontend-mockup-loop-0.5.4.tgz","fileCount":19,"integrity":"sha512-wYTb/mreZVzkdsoyGUZf/IjXVFUAIKGntF+Iliid4ZYHBTqFanSsH3Xjhd6AcbfnbjxBmgyMWBG9rCS5z3vgnQ==","signatures":[{"sig":"MEYCIQC8OnXGlaHWiweV7558ZX7fcuSmbuv4MPpJZM6ii3kn9AIhAOa5OohCguB9nGqCpL5ZJ84eb4jiuqWE5Sna4Pry1JQ8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91720},"type":"module","gitHead":"676817fc2b61036bc861c1ca1406d37af016c072","_npmUser":{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},"repository":{"url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","type":"git","directory":"packages/mockup-loop"},"_npmVersion":"10.9.3","description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"@axe-core/playwright":"^4.10.0","eslint-plugin-tailwindcss":"^3.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependenciesMeta":{"@earendil-works/pi-coding-agent":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/frontend-mockup-loop_0.5.4_1782336709044_0.09593267966890195","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"@blackbelt-technology/frontend-mockup-loop","version":"0.6.0","keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"license":"MIT","_id":"@blackbelt-technology/frontend-mockup-loop@0.6.0","maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"pi":{"skills":[".pi/skills/frontend-mockup-loop"],"extensions":["src/extension.ts"]},"dist":{"shasum":"35c4a520cbdbd211323fdace1c09bdc173fd333b","tarball":"https://registry.npmjs.org/@blackbelt-technology/frontend-mockup-loop/-/frontend-mockup-loop-0.6.0.tgz","fileCount":22,"integrity":"sha512-QRPvKDAVCzPKZEw1GcGOy6rsP8pFqufX1s0O/3I4Xg7h6YHY1UtJ7Ub5b0k8H8dAeyeMH2Lg33TXoXrMSVmoMQ==","signatures":[{"sig":"MEQCIG9xwRkIYGPuYajhsbYyPp0srTxNdxam8zB7lUqXsUMFAiA8Ie/w1phwhFWkxat7Rby3UHFztj3bqz3EXcDbIVFHQQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blackbelt-technology%2ffrontend-mockup-loop@0.6.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":99480},"type":"module","gitHead":"70c087ba97d3b7a9997767f7c9c758ac49d998f2","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8e1cade0-434b-41aa-b810-e4eb9cbdc183"}},"repository":{"url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","type":"git","directory":"packages/mockup-loop"},"_npmVersion":"11.12.1","description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@axe-core/playwright":"^4.10.0","eslint-plugin-tailwindcss":"^3.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependenciesMeta":{"@earendil-works/pi-coding-agent":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/frontend-mockup-loop_0.6.0_1784565577188_0.38565847512551743","host":"s3://npm-registry-packages-npm-production"}},"0.6.1":{"name":"@blackbelt-technology/frontend-mockup-loop","version":"0.6.1","keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"license":"MIT","_id":"@blackbelt-technology/frontend-mockup-loop@0.6.1","maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"pi":{"skills":[".pi/skills/frontend-mockup-loop"],"extensions":["src/extension.ts"]},"dist":{"shasum":"b7373cc979801b3772076785d9ca0df889c0d267","tarball":"https://registry.npmjs.org/@blackbelt-technology/frontend-mockup-loop/-/frontend-mockup-loop-0.6.1.tgz","fileCount":22,"integrity":"sha512-xWwXSwdU60uVGx6Scd8b+InVq9wD5B9WbgUH0RwiXHzC4qzJcIaYJAAkdUpeQO+J/YJclp26GtbfB+vMhmcjwg==","signatures":[{"sig":"MEUCIA8Hh07AhS48nfnXQ2ywVEgcSNec4ZsvLYoaTLGbALY6AiEA3sTfJFg542ctpIgEWd18b/m9MQBQlNTGRwXsDIUZH/Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blackbelt-technology%2ffrontend-mockup-loop@0.6.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":99480},"type":"module","gitHead":"88a0cf3cc7d7c7c4e44eb61df3cceff19ed919ad","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8e1cade0-434b-41aa-b810-e4eb9cbdc183"}},"repository":{"url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","type":"git","directory":"packages/mockup-loop"},"_npmVersion":"11.12.1","description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@axe-core/playwright":"^4.10.0","eslint-plugin-tailwindcss":"^3.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependenciesMeta":{"@earendil-works/pi-coding-agent":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/frontend-mockup-loop_0.6.1_1784571719632_0.990304010898388","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"@blackbelt-technology/frontend-mockup-loop","version":"0.7.0","keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"license":"MIT","_id":"@blackbelt-technology/frontend-mockup-loop@0.7.0","maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"pi":{"skills":[".pi/skills/frontend-mockup-loop"],"extensions":["src/extension.ts"]},"dist":{"shasum":"b77bde969d7fb2309a71597c97e8e39c1c6005bb","tarball":"https://registry.npmjs.org/@blackbelt-technology/frontend-mockup-loop/-/frontend-mockup-loop-0.7.0.tgz","fileCount":22,"integrity":"sha512-MByYy71dwWrQfmLCGIPJYGRWQGNLz/5KS19B3BUqvmFMXjxDE5/WglS6RX2wf80F2PvtusTgmIlOZ/I2bavnpg==","signatures":[{"sig":"MEYCIQDLez6aI5djdRnrAEJklzkGH9+F3PrOtUpAnTdYRsXnpgIhAIbtsWXxl3s8+8E8OrZzNGB7s6HnAILPUJDgPdb+EHQm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blackbelt-technology%2ffrontend-mockup-loop@0.7.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":99480},"type":"module","gitHead":"9203d6a89f1b81c516e9351072ee5cb4c6579e0a","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8e1cade0-434b-41aa-b810-e4eb9cbdc183"}},"repository":{"url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","type":"git","directory":"packages/mockup-loop"},"_npmVersion":"12.0.1","description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@axe-core/playwright":"^4.10.0","eslint-plugin-tailwindcss":"^3.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependencies":{"typebox":"*","@earendil-works/pi-coding-agent":"*"},"peerDependenciesMeta":{"@earendil-works/pi-coding-agent":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/frontend-mockup-loop_0.7.0_1784899084672_0.3483620835385932","host":"s3://npm-registry-packages-npm-production"}},"0.8.0":{"name":"@blackbelt-technology/frontend-mockup-loop","version":"0.8.0","description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","type":"module","repository":{"type":"git","url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","directory":"packages/mockup-loop"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"pi":{"extensions":["src/extension.ts"],"skills":[".pi/skills/frontend-mockup-loop"]},"dependencies":{"@axe-core/playwright":"^4.10.0","eslint-plugin-tailwindcss":"^3.17.0"},"peerDependencies":{"@earendil-works/pi-coding-agent":">=0.80.10","typebox":">=1.3.6"},"peerDependenciesMeta":{"@earendil-works/pi-coding-agent":{"optional":true}},"devDependencies":{"@earendil-works/pi-coding-agent":">=0.80.10","typebox":">=1.3.6"},"gitHead":"9373dfa416660a285475febc0383608fe14270b1","_id":"@blackbelt-technology/frontend-mockup-loop@0.8.0","bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","_nodeVersion":"24.19.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-R7LRwVf5L/u46Y/PwH+ntEuC/7tEygcaT1dAI4pJARtiAVwVRT7hztu5aHEKPafBuzwKmRnImIFgrKe/eEoiQw==","shasum":"7f3632d56dcd5385d3763500330c2306c90c69dd","tarball":"https://registry.npmjs.org/@blackbelt-technology/frontend-mockup-loop/-/frontend-mockup-loop-0.8.0.tgz","fileCount":20,"unpackedSize":97024,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blackbelt-technology%2ffrontend-mockup-loop@0.8.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD/nRalULJDlbENlFZgonnKjsp0UUvuodMkLiTV8U3p3AIhAN1r/pPNwehk3VZA/0AsuwfJkv1HshF2zwJeUyGI5CHK"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:8e1cade0-434b-41aa-b810-e4eb9cbdc183"}},"directories":{},"maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/frontend-mockup-loop_0.8.0_1787745991902_0.3603000197412698"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-24T21:31:48.864Z","modified":"2026-08-26T12:06:32.392Z","0.5.4":"2026-06-24T21:31:49.178Z","0.6.0":"2026-07-20T16:39:37.322Z","0.6.1":"2026-07-20T18:21:59.759Z","0.7.0":"2026-07-24T13:18:04.828Z","0.8.0":"2026-08-26T12:06:32.041Z"},"bugs":{"url":"https://github.com/BlackBeltTechnology/pi-agent-dashboard/issues"},"license":"MIT","homepage":"https://github.com/BlackBeltTechnology/pi-agent-dashboard#readme","keywords":["pi-package","pi-extension","pi-skill","frontend","mockup","wireframe","design-system","ux","accessibility","ui"],"repository":{"type":"git","url":"git+https://github.com/BlackBeltTechnology/pi-agent-dashboard.git","directory":"packages/mockup-loop"},"description":"Pi extension + skill for a ground→contract→mockup→test→fix→learn frontend design loop. Ships a live mockup server tool, a Playwright breakpoint-screenshot tool, and a design-contract scaffolder. Works in any React/Tailwind/shadcn project.","maintainers":[{"name":"mbotond","email":"botond.molnar@blackbelt.hu"},{"name":"mrbence","email":"dbence10@gmail.com"},{"name":"robertcsakany","email":"robert.csakany@blackbelt.hu"},{"name":"norbert.herczeg","email":"norbert.herczeg@blackbelt.hu"}],"readme":"# @blackbelt-technology/frontend-mockup-loop\n\nA pi package — **extension + skill** — for a disciplined frontend design loop:\n\n```\nGROUND → CONTRACT → MOCKUP → TEST → FIX → PROMOTE → LEARN\n```\n\nIt exists to defeat *distributional convergence*: an undirected agent regresses\nto the statistical mean (generic Inter font, purple gradient, centered hero).\nThe fix — deliberate direction, a consistent token system, and a screenshot\nfeedback loop — is what this loop enforces.\n\nGeneric: works in any React/Tailwind/shadcn (or plain HTML) project.\n\n## Install\n\n```bash\npi install npm:@blackbelt-technology/frontend-mockup-loop\n# or try without installing:\npi -e npm:@blackbelt-technology/frontend-mockup-loop\n```\n\nThis registers:\n\n- **Skill** `frontend-mockup-loop` — the 7-step workflow (load via\n  `/skill:frontend-mockup-loop`).\n- **Tools** the agent can call:\n  | Tool | Purpose |\n  |------|---------|\n  | `serve_mockup` | Serve a mockup dir over HTTP on `0.0.0.0`; returns clickable **local + LAN** URLs (LAN works on a phone). Zero deps. |\n  | `score_mockup` | Capture full-page screenshots at mobile/tablet/desktop widths via Playwright; returns paths + a scoring rubric. With `system`, uses that preset's boolean rubric. |\n  | `init_ui_contract` | Scaffold a token-referencing `ui-contract.md` consistency control plane. With `system`, write that preset's DTCG token contract. |\n  | `list_design_systems` | Enumerate the selectable design-system presets. |\n  | `validate_mockup` | Run the layered validation pipeline for a system (L1+L2 gates, L3+L4 advisory); returns `{ gates, advisory, pass }`. |\n- **Command** `/mockup-loop` — print the loop and point at the skill.\n\n## Selectable design systems\n\nThe loop runs design-system **agnostic** by default. Pass `--system <id>` (the\ntools' `system` param) to target a specific system. v1 presets:\n\n| id | system | platform | substrate |\n|---|---|---|---|\n| `shadcn` | shadcn/ui + Tailwind | web | HTML + Tailwind |\n| `mui` | Material UI | web | HTML |\n| `material-3` | Material Design 3 | web | HTML |\n| `fluent-2` | Fluent 2 | web | HTML |\n| `apple-hig` | Apple HIG | iOS | HTML approximation → SwiftUI on promote |\n\n- `init_ui_contract{system:\"shadcn\"}` writes the shadcn DTCG contract from a\n  **bundled offline snapshot** (`presets-data/<id>/`); no `system` still writes\n  the generic blank template (back-compat).\n- `validate_mockup{system,dir}` gates on L1 (token-lint) + L2 (axe + WCAG\n  contrast) and scores on L3 (named-system auditor) + L4 (boolean rubric).\n- Apple HIG ships a hand-authored rule pack (`presets-data/apple-hig/rules.md`);\n  rendered as an HTML approximation in-loop, SwiftUI emitted only on PROMOTE.\n\n### Dependency posture\n\n- **Bundled** (hard deps): `@axe-core/playwright` + `eslint-plugin-tailwindcss`\n  (shadcn L1). WCAG contrast math is inline (no extra dep).\n- **Optional** (shelled out only if installed, else skipped + noted):\n  `hig-doctor`, `material3-mcp`, MUI/Fluent eslint plugins, `lumo`.\n- `score_mockup` uses Playwright if present — enable breakpoint capture with\n  `npm i -D playwright && npx playwright install chromium`; without it,\n  `score_mockup` returns the rubric plus manual-capture guidance.\n\n### Refreshing snapshots\n\nBundled token snapshots (`presets-data/<id>/contract.tokens.json`) are versioned\nwith the package and lag upstream. `init_ui_contract{system,refresh:true}`\nre-fetches the upstream source before writing. Upstream sources per preset:\n\n| preset | upstream source |\n|---|---|\n| `shadcn` | shadcn CSS variables (default theme) → DTCG |\n| `mui` | `@mui/material` `createTheme()` defaults → DTCG |\n| `material-3` | Material 3 `--md-sys-*` baseline tokens → DTCG |\n| `fluent-2` | `@fluentui/tokens` `webLightTheme` → DTCG |\n| `apple-hig` | hand-authored rule pack (no upstream token JSON) |\n\n## Expert UX designer mode\n\nThe skill acts as an expert UX designer: **every decision is grounded in an\nexternally documented, public-facing design rule** (Nielsen's 10 heuristics,\nLaws of UX, Gestalt, WCAG 2.2, GOV.UK/USWDS/Material patterns) — never invented.\nThe full citable rule corpus is bundled at\n[`references/ux-best-practices.md`](references/ux-best-practices.md): the source\nhierarchy (licensing-safe), universal laws, per-component pattern rules, the\n5-step expert evaluation protocol, and a 22-item checkable rubric seed used by\n`score_mockup` / `validate_mockup`.\n\n## The design contract\n\n`ui-contract.md` is the single source of truth for cross-screen consistency:\ncolor ramps, spacing/type scales, radius, elevation, motion, component\ninvariants — **every value references a design token, never a raw hex/px**.\n`init_ui_contract` scaffolds it; you fill it from the real tokens captured in\nthe GROUND step.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}