wizz-method 2.19.0 → 2.19.1
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/package.json +1 -1
- package/skills-registry.yaml +10 -1
- package/src/bmm-skills/2-plan-workflows/wizz-ux/references/creative-tools.md +2 -0
- package/src/bmm-skills/2-plan-workflows/wizz-ux/references/design-md-spec.md +2 -0
- package/src/skills-lib/wizz-decision-maker/references/output-format.md +21 -0
- package/src/skills-lib/wizz-decision-maker/references/references-and-extraction.md +32 -1
- package/src/skills-lib/wizz-design-needs/references/design-state.md +1 -1
- package/src/skills-lib/wizz-design-needs/references/gap-analysis.md +3 -1
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/component-sources.md +23 -23
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/source-first-protocol.md +15 -3
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/source-links.md +14 -8
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/web-access-and-evidence.md +4 -3
- package/src/skills-lib/wizz-router/references/routing-table-flat.md +1 -0
- package/src/skills-lib/wizz-ui-component-curator/SKILL.md +1 -1
- package/tools/installer/guided/labels.js +5 -0
package/package.json
CHANGED
package/skills-registry.yaml
CHANGED
|
@@ -89,7 +89,7 @@ areas:
|
|
|
89
89
|
when: "PORTA de direção: todo trabalho de decidir ANTES de construir. Brief visual inicial (6 decisões de estética + 3 lógicas) no kickoff. Puxa: wizz-design-needs (o que precisa ser pesquisado), wizz-taste-skill (direção anti-slop de brief novo) e wizz-motion-3d-director (decidir caminho motion/3D/vídeo)."
|
|
90
90
|
rel:
|
|
91
91
|
before: [wizz-design-needs, wizz-ui-ux-pro-max]
|
|
92
|
-
pairs_with: [wizz-motion-3d-director, wizz-taste-skill]
|
|
92
|
+
pairs_with: [wizz-motion-3d-director, wizz-taste-skill, dembrandt]
|
|
93
93
|
# Arquitetura (NÃO no `when:`, que é critério de seleção e fica guloso com
|
|
94
94
|
# explicação dentro): esta entrada só PRODUZ o mapa. Quem executa o mapa
|
|
95
95
|
# são os dois mineradores, que a puxam pela aresta `before` abaixo — é
|
|
@@ -317,6 +317,15 @@ areas:
|
|
|
317
317
|
# Pin de supply chain (2026-09-30): commit fixo; atualizar conscientemente.
|
|
318
318
|
install: 'mkdir -p tools/ctc-align && uv venv --python 3.12 tools/ctc-align/.venv && uv pip install --python tools/ctc-align/.venv/bin/python "git+https://github.com/MahmoudAshraf97/ctc-forced-aligner.git@64293cc6d711e57666c4a8b098e9fd93b381fd88"'
|
|
319
319
|
verify: "command -v ffmpeg >/dev/null 2>&1 && command -v uv >/dev/null 2>&1"
|
|
320
|
+
- id: dembrandt
|
|
321
|
+
when: "Medir um site de referência que já existe: extrair as cores, fontes, espaçamento e cantos reais de uma URL e gerar o DESIGN.md (ou tema Tailwind/shadcn) a partir deles. Para quando o usuário diz 'quero as cores/fontes iguais às do site X'."
|
|
322
|
+
not_when: "Criar identidade nova sem site de referência (é wizz-decision-maker) ou tirar print de página (é agent-browser)."
|
|
323
|
+
rel:
|
|
324
|
+
pairs_with: [wizz-decision-maker]
|
|
325
|
+
# Local, MIT, sem chave; roda um Chromium headless (playwright-core).
|
|
326
|
+
# Pin de supply chain (2026-10-15): versão fixa; atualizar conscientemente.
|
|
327
|
+
check: "dembrandt --version"
|
|
328
|
+
install: "npm install -g dembrandt@0.39.2"
|
|
320
329
|
- id: apple-design
|
|
321
330
|
when: "Revisar/auditar UI NATIVA (iOS/macOS: SwiftUI, Flutter, React Native, Tauri, Electron) contra o Apple HIG e o Liquid Glass — compliance com o HIG, acessibilidade, dark mode, navegação. Cobre o gap que o wizz-taste-skill declara fora de escopo ('native mobile: use Apple HIG directly')."
|
|
322
331
|
not_when: "UI web: aí é wizz-ui-ux-pro-max / wizz-impeccable."
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
Defaults ship for HTML color themes, HTML design directions, Excalidraw wireframes (Discovery), and 1:1 HTML key-screen mocks (Finalize). Teams append more via override TOML — Figma MCP, custom skills, prompt-based mood boards.
|
|
6
6
|
|
|
7
|
+
**Figma, only when the client hands over a file.** Read it through the Framelink MCP (`figma-developer-mcp`, MIT, [GLips/Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP)) with the user's own free personal access token; it imports layout, styles and components into `imports/`. Never a required step: no file, no Figma. The official Figma MCP caps the free and view seats at a handful of calls a month, so it is not a default.
|
|
8
|
+
|
|
7
9
|
## When to invoke
|
|
8
10
|
|
|
9
11
|
Decision moments where a visual beats more conversation: picking color tokens, picking a visual personality among directions, sketching IA, mocking a tricky flow. Fast-path users typically skip; coaching-path users typically lean in. Read the room.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Source of truth: [google-labs-code/design.md](https://github.com/google-labs-code/design.md) (Apache 2.0, Google Labs, April 2026). This file is a working summary; the URL wins on conflict.
|
|
4
4
|
|
|
5
|
+
Check a finished file with the spec's own CLI (local, no key): `npx -y @google/design.md@0.4.0 lint DESIGN.md`. `diff` compares two versions. When the project already has a `DESIGN.md` from `wizz-decision-maker` (path in `design-state.yaml` → `identidade.design_md`), import it instead of starting from zero.
|
|
6
|
+
|
|
5
7
|
## Structure
|
|
6
8
|
|
|
7
9
|
YAML frontmatter (machine-readable tokens) + markdown body (human-readable rationale, prose sections).
|
|
@@ -159,3 +159,24 @@ After outputting all five sections, close with:
|
|
|
159
159
|
>
|
|
160
160
|
> If you want to redo any part of the brief, type `/redo [section]` — for example `/redo decision 3` or `/redo color logic`.
|
|
161
161
|
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## The DESIGN.md file (right after the five sections)
|
|
165
|
+
|
|
166
|
+
The prompts are for copy-paste; the `DESIGN.md` is the same brief as a file every downstream tool can read (spec: [google-labs-code/design.md](https://github.com/google-labs-code/design.md)). Write it without asking.
|
|
167
|
+
|
|
168
|
+
1. **Where:** inside the Wizz Method, `{output_folder}/DESIGN.md` (default `_wizz-output/`); standalone, the project root.
|
|
169
|
+
2. **Frontmatter:** `name`, `description`, `colors`, `typography`, `rounded`, `spacing`. Start from the measured tokens when a reference was measured, then bend them to the locked logics (the brand is the user's, not the reference's). When no site was measured, derive values from the logics and say in the body which ones are a first guess.
|
|
170
|
+
3. **Body:** the nine locked sentences (six decisions + three logics) under `## Overview`, `## Colors`, `## Typography`, `## Layout`, so the rationale travels with the tokens.
|
|
171
|
+
4. **Check it:**
|
|
172
|
+
|
|
173
|
+
```bash
|
|
174
|
+
npx -y @google/design.md@0.4.0 lint DESIGN.md
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Fix every `error` before handing off; `warning` gets fixed or explained in one line.
|
|
178
|
+
5. **Record it:** inside the method, set `identidade.design_md` in `design-state.yaml` to the file's path (the `identidade` block is this skill's to write).
|
|
179
|
+
|
|
180
|
+
Tell the user in one plain sentence: *"I also saved everything as a DESIGN.md file. It's the brief in a format other AI tools understand, so you never have to explain your colors and fonts again."*
|
|
181
|
+
|
|
182
|
+
|
|
@@ -30,7 +30,9 @@ Once they have 3–5 with annotations:
|
|
|
30
30
|
>
|
|
31
31
|
> Example from the soda project: Diesel.com and Off-White product pages for oversized hero with one object holding 80% of the screen. Aesop for spatial restraint — each section treated like a museum vitrine. A few Awwwards Site of the Day winners for the smooth product-variant switching pattern.
|
|
32
32
|
>
|
|
33
|
-
> Where to look: **Awwwards** (specifically the Site of the Day *archive* — the homepage shows what's trending, the archive shows what's lasting), **
|
|
33
|
+
> Where to look: **Awwwards** (specifically the Site of the Day *archive* — the homepage shows what's trending, the archive shows what's lasting), **Recent** (recent.design, the new home of Godly), **Lapa.ninja**, **Land-book**, **Httpster**. Skip Behance and Dribbble trending feeds — generic factory.
|
|
34
|
+
>
|
|
35
|
+
> Just paste the links. You don't need to explain anything technical; I'll measure the sites myself.
|
|
34
36
|
>
|
|
35
37
|
> Give me 3–5 sites with one sentence each on what structural logic you're stealing.
|
|
36
38
|
|
|
@@ -38,6 +40,10 @@ Once they have 3–5 with annotations:
|
|
|
38
40
|
|
|
39
41
|
Same pushback rule as Bucket 1 if they're vague.
|
|
40
42
|
|
|
43
|
+
Lapa.ninja and Land-book block automated access (Cloudflare challenge): the user browses them, you only read the sites they pick. Never try to scrape the galleries.
|
|
44
|
+
|
|
45
|
+
**Measure every live site in this bucket** (see *Measuring a site* below) before moving on. The user only had to paste the link; the measurement is your job.
|
|
46
|
+
|
|
41
47
|
Once locked:
|
|
42
48
|
> Locked. Structure bucket loaded.
|
|
43
49
|
>
|
|
@@ -60,6 +66,26 @@ Then proceed to extraction.
|
|
|
60
66
|
|
|
61
67
|
---
|
|
62
68
|
|
|
69
|
+
## Measuring a site (any time the user gives a live URL)
|
|
70
|
+
|
|
71
|
+
Most users can't name a hex code or a font, and they shouldn't have to. When a reference is a live website, measure it instead of asking them to describe it:
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
npx -y dembrandt@0.39.2 <url> --design-md
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Local, free, no key (MIT, runs a headless browser). It writes `output/<domain>/DESIGN.md` with the site's real palette, type scale, spacing and radius, read from the computed styles. Add `--dark-mode` or `--mobile` when that is the version the user liked. If the command fails (no network, site blocks headless browsers), say so in one line and fall back to asking.
|
|
78
|
+
|
|
79
|
+
Show the result in plain words, never as raw tokens:
|
|
80
|
+
|
|
81
|
+
> I measured [site]. It runs on **one near-black and one off-white, with a single acid-yellow accent used only on buttons**. Headlines are **huge and tight** (72px, a very compact font), body text is small. Corners are **soft, not round**.
|
|
82
|
+
|
|
83
|
+
The measurement feeds the three logics below as evidence, it does not replace them: the logic is still the user's *rule*, the tokens just keep it honest. Keep the files; they become the starting point of the project's `DESIGN.md` (see output-format).
|
|
84
|
+
|
|
85
|
+
Measured tokens describe someone else's brand. They are a reference for relationships and proportions, never a palette to copy wholesale.
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
63
89
|
## Extraction (the three logics)
|
|
64
90
|
|
|
65
91
|
### Color logic
|
|
@@ -78,6 +104,11 @@ Then proceed to extraction.
|
|
|
78
104
|
If they give hex codes or specific color names:
|
|
79
105
|
> That's a palette, not a logic. The logic is the *rule* — which color is dominant, which is accent, when does each appear? Try again as a sentence about the relationship.
|
|
80
106
|
|
|
107
|
+
If they're stuck (non-designers often are), don't push harder; use the measurements:
|
|
108
|
+
> No problem, this is the hard one. From the sites you sent, [site A] and [site B] both [pattern you saw in the measured tokens, e.g. "keep the background almost white and put color only on the buttons"]. Is that the rule you want, or the opposite?
|
|
109
|
+
|
|
110
|
+
The same move works for typography and spatial logic: offer the pattern you measured as a yes/no question.
|
|
111
|
+
|
|
81
112
|
Once locked:
|
|
82
113
|
> Locked. Color logic: [their answer].
|
|
83
114
|
>
|
|
@@ -43,7 +43,7 @@ orcamento_motion: "15-25 animações coordenadas"
|
|
|
43
43
|
conflitos:
|
|
44
44
|
- { entre: [premium, minimalista], resolvido_para: minimalista, motivo: "restritivo vence" }
|
|
45
45
|
|
|
46
|
-
identidade: { tipografia: null, paleta: null, travada: false }
|
|
46
|
+
identidade: { tipografia: null, paleta: null, travada: false, design_md: null } # design_md: caminho do DESIGN.md do decision-maker
|
|
47
47
|
stack: { framework: next, styling: tailwind, motion: null, orcamento_bundle_kb: 180 }
|
|
48
48
|
|
|
49
49
|
superficies:
|
|
@@ -21,8 +21,10 @@ When the layers disagree or the coverage cannot be proven by reading (a CSS rule
|
|
|
21
21
|
- `~/.claude/design-sources/` (React Bits, Cult UI, Ali Imam, StyleUI, Watermelon)
|
|
22
22
|
- `modelos lp/` or whatever local reference folder the project uses
|
|
23
23
|
- anything the user pasted, linked or screenshotted in this conversation
|
|
24
|
+
- a site the user named as a reference: at the **system** layer (palette, type scale, spacing, radius), extract it instead of describing it, `npx -y dembrandt@0.39.2 <url> --design-md`, and close the need against the measured tokens
|
|
25
|
+
- a Figma file from the client, through the Framelink MCP when the user set it up (see [component-sources](../../wizz-premium-landing-ui-researcher/references/component-sources.md))
|
|
24
26
|
|
|
25
|
-
Cache freshness rule: check the revision and date before treating a cached item as current. A stale cache is still a valid source for a pattern; it is not a valid source for an API. When the cache answers a need, record the revision in the discovery, not just the path.
|
|
27
|
+
Cache freshness rule: check the revision and date before treating a cached item as current. A stale cache is still a valid source for a pattern; it is not a valid source for an API. When the cache answers a need, record the revision in the discovery, not just the path. For registry sources, the live index (`https://ui.shadcn.com/r/registries.json`, `health` per registry) is the freshness check: it costs one request and needs no clone.
|
|
26
28
|
|
|
27
29
|
User-supplied material outranks every catalogue. A reference the user chose is worth more than a better reference they did not.
|
|
28
30
|
|
|
@@ -7,10 +7,10 @@ Do not depend on paid sources as a core part of the flow.
|
|
|
7
7
|
Research flow (public sources first; log evidence per [source-first-protocol](source-first-protocol.md)):
|
|
8
8
|
|
|
9
9
|
1. references sent by the user (`modelos lp/`, screenshots, links);
|
|
10
|
-
2.
|
|
11
|
-
3.
|
|
12
|
-
4. taste/motion sources (Impeccable, Taste Skill, Design Motion Principles,
|
|
13
|
-
5. open visual sources (Landing Love, Godly, Design Spells,
|
|
10
|
+
2. public shadcn registries, checked live against the index at `https://ui.shadcn.com/r/registries.json` (React Bits, Cult UI, Watermelon, Skiper UI, Bklit UI, Componentry, StyleUI and 400+ more, each with a `health` field; see [source-first-protocol](source-first-protocol.md) Phase 3);
|
|
11
|
+
3. open source repositories when the registry does not carry the item; the local cache at `~/.claude/design-sources/` is the offline fallback, never proof of being current;
|
|
12
|
+
4. taste/motion sources (Impeccable, Taste Skill, Design Motion Principles, Vibe Code Components) and ready-made `DESIGN.md` files (Refero Styles, awesome-design-md);
|
|
13
|
+
5. open visual sources (Landing Love, Recent (ex-Godly), Design Spells, Refero, ScreensDesign, Spline, Unicorn Studio; Mobbin only with access);
|
|
14
14
|
6. with no web and no local cache: BLOCKED, per [web-access-and-evidence](web-access-and-evidence.md). Strategic hypotheses can shape the direction, never stand in for a component source.
|
|
15
15
|
|
|
16
16
|
## Mining Evidence
|
|
@@ -54,7 +54,9 @@ Use only public/open source resources, unless paid access is confirmed.
|
|
|
54
54
|
https://github.com/aliimam-in/aliimam.git
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
**Reference only: the repository has no license** (no LICENSE file at the root, checked 2026-10-15). Code without a license is all rights reserved: read it for the technique, never copy it into a project. Re-check before use; if a license appears, record it in the evidence log.
|
|
58
|
+
|
|
59
|
+
Use for studying: shaders, liquid wave, pixel grid, ripple shader, border glow, bento layouts, typewriter effects, canvas-based effects, experimental visual effects.
|
|
58
60
|
|
|
59
61
|
If the repository structure is unclear: inspect the docs first and do not assume component names without verifying.
|
|
60
62
|
|
|
@@ -64,6 +66,8 @@ If the repository structure is unclear: inspect the docs first and do not assume
|
|
|
64
66
|
https://github.com/WatermelonCorp/watermellon-registry.git
|
|
65
67
|
```
|
|
66
68
|
|
|
69
|
+
Registry: `"@watermelon": "https://registry.watermelon.sh/r/{name}.json"` → `npx shadcn@latest add @watermelon/<item>`.
|
|
70
|
+
|
|
67
71
|
Use for: SaaS components, dashboards, product UI, cards, app sections, UI blocks, product interfaces, functional layouts, startup components.
|
|
68
72
|
|
|
69
73
|
### StyleUI
|
|
@@ -74,6 +78,8 @@ https://github.com/heyfabrika/styleui.git
|
|
|
74
78
|
|
|
75
79
|
Use for: templates, landing page layouts, ready-made pages, installable sections, quick layout foundations, base pages.
|
|
76
80
|
|
|
81
|
+
As of 2026-10-15 the shadcn index marks `@styleui` as **degraded** (sampled items fail validation). Check the item's `health` before relying on it and prefer another source when it is still degraded.
|
|
82
|
+
|
|
77
83
|
### Componentry
|
|
78
84
|
|
|
79
85
|
- Site: https://componentry.dev/ (free, open source, Vercel OSS Program)
|
|
@@ -163,18 +169,6 @@ https://github.com/kylezantos/design-motion-principles.git
|
|
|
163
169
|
|
|
164
170
|
Use for: easing, timing, scroll motion, reveal logic, microinteraction rules, motion hierarchy, animation duration, element entrance and exit, avoiding chaotic animation, motion consistency.
|
|
165
171
|
|
|
166
|
-
### MotionSites
|
|
167
|
-
|
|
168
|
-
```text
|
|
169
|
-
https://github.com/aayushsoam/motionsites.ai.git
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
Classification: visual reference, motion reference, prompt/idea library, inspiration source for hero, scroll storytelling, and animations.
|
|
173
|
-
|
|
174
|
-
**Do not treat MotionSites as a primary source of installable components.** If a repository is available, it can be inspected only for reference and pattern research, not as a project dependency.
|
|
175
|
-
|
|
176
|
-
Use for: motion references, animated landing ideas, hero prompts, scroll storytelling, cinematic web sections, motion examples, animation direction.
|
|
177
|
-
|
|
178
172
|
### Vibe Code Components
|
|
179
173
|
|
|
180
174
|
```text
|
|
@@ -187,7 +181,7 @@ Classification: visual reference, prompt source, component inspiration, vibe cod
|
|
|
187
181
|
|
|
188
182
|
Use for: vibe coding references, prompt ideas, component inspiration, UI patterns, visual exploration, section ideas, quick visual direction, modern components.
|
|
189
183
|
|
|
190
|
-
> **Important rule:**
|
|
184
|
+
> **Important rule:** Vibe Code Components can appear under `Reference Sources` and `Visual Inspiration Sources`, but must not be treated as primary implementation sources like React Bits, Cult UI, Watermelon, or StyleUI.
|
|
191
185
|
|
|
192
186
|
## Visual Inspiration Sources
|
|
193
187
|
|
|
@@ -201,9 +195,9 @@ Best for researching: animated landing pages, scroll effects, WebGL, GSAP, Frame
|
|
|
201
195
|
|
|
202
196
|
When to use: the project needs animated landing page inspiration, the user wants something modern/dynamic, the skill needs to understand scroll rhythm and transitions.
|
|
203
197
|
|
|
204
|
-
### 2. Godly
|
|
198
|
+
### 2. Recent (formerly Godly)
|
|
205
199
|
|
|
206
|
-
URL: `https://
|
|
200
|
+
URL: `https://recent.design/` (the old Godly address redirects here)
|
|
207
201
|
|
|
208
202
|
Best for researching: premium sites, visual composition, typography, art direction, editorial layout, high-end aesthetics, digital brand references.
|
|
209
203
|
|
|
@@ -240,8 +234,11 @@ Work within the free plan. Respect limits and the watermark. Do not assume a pai
|
|
|
240
234
|
### 6b. Refero
|
|
241
235
|
|
|
242
236
|
- https://refero.design/ — real app and site UI/UX inspiration, by screen and by flow
|
|
243
|
-
- Use like Mobbin: visual reference of real patterns, not a code source
|
|
237
|
+
- Use like Mobbin: visual reference of real patterns, not a code source. The free plan opens about 3% of the library
|
|
238
|
+
- **Refero MCP: paid** (Pro plan, about €10/month, refero.design/pricing). Out of the main flow; use only if the user already pays for it
|
|
244
239
|
- **Refero Styles** (https://styles.refero.design/, free beta): a library of `DESIGN.md` files extracted from real sites — palette, typography, spacing, motion, and component patterns in a single markdown file. Search by brand/mood/color, copy the DESIGN.md, and paste it into the agent's context. For concrete visual direction, prioritize this over pure visual inspiration (screenshots)
|
|
240
|
+
- **awesome-design-md** (https://github.com/VoltAgent/awesome-design-md, MIT): 84 brand `DESIGN.md` files in the repo, one folder per brand (`design-md/<brand>/DESIGN.md`). Read the raw file by path; it is versionable by commit SHA, unlike a web page
|
|
241
|
+
- **Extract from a live site** when neither library has the reference: `npx -y dembrandt@0.39.2 <url> --design-md` (MIT, local, no key) writes `output/<domain>/DESIGN.md` from the site's computed styles. The tokens are a measurement of that site, not a license to copy its brand
|
|
245
242
|
|
|
246
243
|
### 6. Mobbin
|
|
247
244
|
|
|
@@ -251,9 +248,11 @@ Best for researching: real UX, app flows, onboarding, pricing pages, dashboards,
|
|
|
251
248
|
|
|
252
249
|
Rule: Mobbin may require login/payment. Use only if there is access, public previews, or references provided by the user. Do not depend on Mobbin in the main flow.
|
|
253
250
|
|
|
254
|
-
|
|
251
|
+
**Mobbin MCP: paid** (Pro plan only, about US$10/month, mobbin.com/mcp). Same rule: only when the user already has it.
|
|
252
|
+
|
|
253
|
+
### 7. ScreensDesign
|
|
255
254
|
|
|
256
|
-
|
|
255
|
+
URL: `https://screensdesign.com/` (DesignVault now redirects here; treat them as one source)
|
|
257
256
|
|
|
258
257
|
Best for researching: mobile onboarding, paywalls, app screens, subscription flows, conversion-focused screens, app UX.
|
|
259
258
|
|
|
@@ -262,6 +261,7 @@ Rule: full use may require a plan/payment. Use only when there is access or as a
|
|
|
262
261
|
### Sources the user can provide manually
|
|
263
262
|
|
|
264
263
|
- **Screenshots, videos, Figma, Behance, Dribbble, competitor sites**: treat as a high-priority source. The user's reference is worth more than a generic catalog.
|
|
264
|
+
- **A Figma file from the client**: read it through the Framelink MCP (`figma-developer-mcp`, MIT) with the user's own free personal access token. Optional, only when a file exists; the official Figma MCP needs a paid seat for real use and stays out of the flow.
|
|
265
265
|
- **Components or code snippets the user pastes into the chat**: treat as the authoritative base for style, pattern, and direction.
|
|
266
266
|
- **Premium libraries the user declares they have access to** (React Bits Pro, Cult UI Pro, Skiper UI premium, Mobbin, ScreensDesign Pro, etc.): the skill **does not assume this access**, but if the user confirms it, it may be used.
|
|
267
267
|
|
package/src/skills-lib/wizz-premium-landing-ui-researcher/references/source-first-protocol.md
CHANGED
|
@@ -18,11 +18,11 @@ Choose sources based on the effect needed, using [component-sources](component-s
|
|
|
18
18
|
|---|---|
|
|
19
19
|
| Animated text, backgrounds, hover, particles | React Bits, Componentry |
|
|
20
20
|
| Marketing sections, cards, buttons | Cult UI, public shadcn registries |
|
|
21
|
-
| Shader, liquid/ripple, experimental WebGL | Ali Imam
|
|
21
|
+
| Shader, liquid/ripple, experimental WebGL | Compatible public examples; Ali Imam only to study the technique (no license) |
|
|
22
22
|
| Dashboard and data visualization | Watermelon UI, Bklit UI |
|
|
23
23
|
| Base layout | StyleUI, existing components |
|
|
24
24
|
| Carousel | Embla, shadcn/ui |
|
|
25
|
-
| Visual direction and reference motion | Sites provided by the user, Landing Love,
|
|
25
|
+
| Visual direction and reference motion | Sites provided by the user, Landing Love, Recent, Design Spells, Refero Styles, awesome-design-md |
|
|
26
26
|
|
|
27
27
|
The set of "non-trivial components" is not improvised here: it is the list of open needs in `design-state.yaml` (produced by `wizz-design-needs`). With no state file, derive it from the approved section structure and say you did, so the gap is visible.
|
|
28
28
|
|
|
@@ -36,7 +36,19 @@ For each open need:
|
|
|
36
36
|
|
|
37
37
|
Paid components only go in with already-authorized access/cost. Inspiration sites are not a code source and don't grant a copy license.
|
|
38
38
|
|
|
39
|
-
## Phase 3:
|
|
39
|
+
## Phase 3: Live registry first, cache as fallback
|
|
40
|
+
|
|
41
|
+
Most sources are shadcn registries. Read them live instead of cloning:
|
|
42
|
+
|
|
43
|
+
1. **Check the index.** `https://ui.shadcn.com/r/registries.json` lists 400+ registries, each with its URL template and a `health` field. One line answers whether a source is usable today:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
curl -s https://ui.shadcn.com/r/registries.json | node -e 'const r=JSON.parse(require("fs").readFileSync(0,"utf8"));for(const x of r)if(["@react-bits","@cult-ui","@watermelon","@componentry","@bklit","@skiper-ui","@styleui"].includes(x.name))console.log(x.name,x.health?.status,x.url)'
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
`healthy` → use it. `degraded` → the registry answers but sampled items fail validation: prefer another source, or open the exact item and say it is from a degraded registry. Missing from the index → the source is a plain repo; go to step 3.
|
|
50
|
+
2. **Read the item.** Replace `{name}` in the URL template and fetch the JSON: it carries the files, dependencies and registry dependencies, which is the evidence the gate asks for. When the shadcn MCP is configured (`npx shadcn@latest mcp init`), it does the same lookup for you.
|
|
51
|
+
3. **Repos outside the index** (and offline work) use the local cache.
|
|
40
52
|
|
|
41
53
|
An existing design cache (for example `~/.claude/design-sources/`) can be inspected. Don't treat it as up to date just because it exists:
|
|
42
54
|
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
|
|
4
4
|
## Component / Code Sources
|
|
5
5
|
|
|
6
|
+
- shadcn registry index (400+ registries with a `health` field): https://ui.shadcn.com/r/registries.json
|
|
6
7
|
- React Bits: https://github.com/DavidHDev/react-bits.git
|
|
7
8
|
- Cult UI Docs: https://www.cult-ui.com/docs
|
|
8
9
|
- Cult UI GitHub: https://github.com/nolly-studio/cult-ui
|
|
9
|
-
- Ali Imam: https://github.com/aliimam-in/aliimam.git
|
|
10
|
-
- Watermelon UI: https://github.com/WatermelonCorp/watermellon-registry.git
|
|
11
|
-
- StyleUI: https://github.com/heyfabrika/styleui.git
|
|
10
|
+
- Ali Imam (no license: reference only, do not copy): https://github.com/aliimam-in/aliimam.git
|
|
11
|
+
- Watermelon UI: https://github.com/WatermelonCorp/watermellon-registry.git — registry `@watermelon` at https://registry.watermelon.sh/r/{name}.json
|
|
12
|
+
- StyleUI (registry degraded on 2026-10-15, check `health`): https://github.com/heyfabrika/styleui.git
|
|
12
13
|
- Skiper UI command: `npx shadcn add @skiper-ui/skiper40`
|
|
13
14
|
- Bklit UI (shadcn charts, MIT, free): https://github.com/bklit/bklit-ui — `npx shadcn@latest add @bklit/<chart>`
|
|
14
15
|
- Componentry (animated React, free/open source, Vercel OSS): https://componentry.dev/
|
|
@@ -25,18 +26,23 @@
|
|
|
25
26
|
- Impeccable: https://github.com/pbakaus/impeccable.git
|
|
26
27
|
- Taste Skill: https://github.com/Leonxlnx/taste-skill.git
|
|
27
28
|
- Design Motion Principles: https://github.com/kylezantos/design-motion-principles.git
|
|
28
|
-
- MotionSites: https://github.com/aayushsoam/motionsites.ai.git
|
|
29
29
|
- Vibe Code Components: https://vibecodecomponents.com/
|
|
30
30
|
|
|
31
31
|
## Visual Inspiration Sources
|
|
32
32
|
|
|
33
33
|
- Landing Love: https://www.landing.love/
|
|
34
|
-
- Godly: https://
|
|
34
|
+
- Recent (formerly Godly): https://recent.design/
|
|
35
35
|
- Design Spells: https://www.designspells.com/
|
|
36
36
|
- Spline: https://spline.design/
|
|
37
37
|
- Unicorn Studio: https://www.unicorn.studio/
|
|
38
|
-
- Mobbin: https://mobbin.com/
|
|
39
|
-
- Refero (UI/UX inspiration from real apps/sites): https://refero.design/
|
|
38
|
+
- Mobbin (MCP is paid): https://mobbin.com/
|
|
39
|
+
- Refero (UI/UX inspiration from real apps/sites; MCP is paid): https://refero.design/
|
|
40
40
|
- Refero Styles (free DESIGN.md for agent context): https://styles.refero.design/
|
|
41
|
+
- awesome-design-md (84 brand DESIGN.md, MIT): https://github.com/VoltAgent/awesome-design-md
|
|
41
42
|
- ScreensDesign: https://screensdesign.com/
|
|
42
|
-
|
|
43
|
+
|
|
44
|
+
## Extraction and validation (CLI, local, no key)
|
|
45
|
+
|
|
46
|
+
- dembrandt (tokens and DESIGN.md from a live site, MIT): https://github.com/dembrandt/dembrandt — `npx -y dembrandt@0.39.2 <url> --design-md`
|
|
47
|
+
- DESIGN.md spec and lint (Apache-2.0): https://github.com/google-labs-code/design.md — `npx -y @google/design.md@0.4.0 lint DESIGN.md`
|
|
48
|
+
- Framelink Figma MCP (optional, client Figma file, free personal token): https://github.com/GLips/Figma-Context-MCP
|
package/src/skills-lib/wizz-premium-landing-ui-researcher/references/web-access-and-evidence.md
CHANGED
|
@@ -10,10 +10,11 @@ A tool you do not see is not a tool you do not have. In a subagent, the web tool
|
|
|
10
10
|
|
|
11
11
|
1. **Load the web tools.** On Claude Code, WebSearch and WebFetch are deferred: load them with `ToolSearch` (`select:WebSearch,WebFetch`) before deciding they are missing. Do the same for an Exa or scrapling MCP if the session lists one. On other platforms, use that platform's native web search and fetch.
|
|
12
12
|
2. **Fallbacks, in order:** `curl -sL <url>` through the shell (raw HTML, registry JSON, `raw.githubusercontent.com` source files), then `agent-browser` (also the tool for watching hover and motion live).
|
|
13
|
-
3. **
|
|
14
|
-
4. **
|
|
13
|
+
3. **Live registry index:** `curl -s https://ui.shadcn.com/r/registries.json` tells which registries answer today (`health` per registry). A registry item JSON read live is full evidence: files, dependencies and date. Details in [source-first-protocol](source-first-protocol.md) Phase 3.
|
|
14
|
+
4. **Local source cache (offline fallback):** `~/.claude/design-sources/` holds real repositories (React Bits, Cult UI, Ali Imam, Watermelon, StyleUI). Reading a file there counts as evidence, as long as you record the path and the revision (`git -C <repo> rev-parse --short HEAD`) and say the cache may be behind the remote. Ali Imam has no license: study only, never copy.
|
|
15
|
+
5. **Record the outcome** in one line before mining: which access worked (`web`, `curl`, `agent-browser`, `registry index`, `cache only`) and which failed, with the error.
|
|
15
16
|
|
|
16
|
-
If none of
|
|
17
|
+
If none of them works, stop and return:
|
|
17
18
|
|
|
18
19
|
```text
|
|
19
20
|
BLOCKED: no web access and no local source cache.
|
|
@@ -44,6 +44,7 @@ Use this table to map skills/CLIs/MCPs directly **outside a Wizz project** (no `
|
|
|
44
44
|
| Design, UI, visual, component, style, palette, typography, design system | `wizz-ui-ux-pro-max` + `wizz-ui-component-curator` | 1 |
|
|
45
45
|
| "What do I need to research for this site", turning a brief into the list of references/effects/components to mine, before any research | `wizz-design-needs` (research map in design-state.yaml; the miners then run one need per pass) | 1 |
|
|
46
46
|
| Turn a design into React/Vite components (Stitch MCP output) | `wizz-react-components` | 2 |
|
|
47
|
+
| "I want the same colors and fonts as site X": measure an existing reference site and extract its real palette, type, spacing and radius into a DESIGN.md | CLI `dembrandt` (designer registry; `npx -y dembrandt@0.39.2 <url> --design-md`) — measures, does not decide; a new identity with no reference site is `wizz-decision-maker` | 2 |
|
|
47
48
|
| Review/audit NATIVE UI (iOS/macOS: SwiftUI, Flutter, React Native, Tauri, Electron) against the Apple HIG and Liquid Glass | CLI `apple-design` (designer registry) — covers what `wizz-taste-skill` declares out of scope; for web UI it's `wizz-ui-ux-pro-max` instead | 2 |
|
|
48
49
|
| Landing page, hero, motion, 3D animation, conversion, visual CRO | `wizz-premium-landing-ui-researcher` | 1 |
|
|
49
50
|
| Design quality, anti-slop, visual taste, aesthetics, critical eye | `wizz-taste-skill` (if installed) | 1 |
|
|
@@ -40,7 +40,7 @@ Do not ask the user to describe the style unless the project has no inspectable
|
|
|
40
40
|
|
|
41
41
|
## 2. Search and inspect public sources
|
|
42
42
|
|
|
43
|
-
Start with existing project components. Then search the public sources. The full authorized list (React Bits, Cult UI,
|
|
43
|
+
Start with existing project components. Then search the public sources. The full authorized list (React Bits, Cult UI, Watermelon, StyleUI, Skiper UI, Bklit UI, Componentry, shadcn/ui, Ali Imam for study only, plus the reference galleries) lives in one place: [component-sources](../wizz-premium-landing-ui-researcher/references/component-sources.md). Read it instead of relying on memory. Check which registries are healthy today in the live index (`https://ui.shadcn.com/r/registries.json`, see [source-first-protocol](../wizz-premium-landing-ui-researcher/references/source-first-protocol.md) Phase 3). Compare at least two suitable sources per need.
|
|
44
44
|
|
|
45
45
|
Before the first query, open the access as described in [web-access-and-evidence](../wizz-premium-landing-ui-researcher/references/web-access-and-evidence.md): load the web tools (on Claude Code, WebSearch and WebFetch are deferred and need `ToolSearch`), then fall back to `curl`, `agent-browser` and the local source cache. Search with whatever that step opened: web search (Exa when configured, WebSearch otherwise), WebFetch, scrapling, and `agent-browser` to watch hover and motion live. A tool that errors or hangs is not the end of the research: record the failure, move to the next tool, and never stop without reporting what was and was not checked. With no web and no cache, return BLOCKED instead of recommending from memory.
|
|
46
46
|
|
|
@@ -113,6 +113,11 @@ const CLI_LABELS = {
|
|
|
113
113
|
en: 'word-level timing to sync captions',
|
|
114
114
|
pt: 'timing palavra a palavra para legenda',
|
|
115
115
|
},
|
|
116
|
+
dembrandt: {
|
|
117
|
+
needs: [],
|
|
118
|
+
en: 'copy the colors and fonts of a site you like',
|
|
119
|
+
pt: 'pegar as cores e fontes de um site que você gosta',
|
|
120
|
+
},
|
|
116
121
|
'apple-design': {
|
|
117
122
|
needs: [],
|
|
118
123
|
en: 'review native iOS/macOS UI against Apple HIG',
|