@smartsoft001-mobilems/claude-plugins 2.126.0 → 2.128.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/README.md CHANGED
@@ -30,7 +30,14 @@ Run them in this order for a new museum app — `/smart:scaffold-nx-workspace`
30
30
 
31
31
  Every scaffolding skill opens with a **Framework first — MANDATORY** section pointing at the
32
32
  [framework API catalog](../angular/README.md); they reuse framework exports rather than
33
- re-implementing them.
33
+ re-implementing them. Every skill that builds or restyles UI (all of the above except
34
+ `mobilems-devops-config` and `mobilems-docs-reader`, plus `mobilems-static-pages` and
35
+ `mobilems-search`) also has a **Design source — MANDATORY** section: it reproduces the design from
36
+ the source in context — the Figma plugin (`figma:figma-design-to-code`, `get_design_context`,
37
+ `get_screenshot`, `get_variable_defs`) when a Figma link is in context, the `docs/mockups/` exports
38
+ when the mockups live there — and maps its tokens onto the museum's Tailwind config. The shared
39
+ workflow is
40
+ [`mobilems-project-init/references/design-source.md`](src/plugins/mobilems/skills/mobilems-project-init/references/design-source.md).
34
41
 
35
42
  ## MuzaCMS API access (required for `mobilems-docs-reader` skill)
36
43
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smartsoft001-mobilems/claude-plugins",
3
- "version": "2.126.0",
3
+ "version": "2.128.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -22,6 +22,8 @@ Run order for a new museum app: `/smart:scaffold-nx-workspace` → `mobilems-pro
22
22
 
23
23
  Each of these opens with a **Framework first — MANDATORY** section pointing at the [Framework API index](https://github.com/smartsoft001/mobilems-framework/blob/main/README.md#-framework-api): reuse framework exports (`MasonryGridComponent`, `FiltersBaseComponent` / `FiltersContext`, `FileUrlService`, `SeoService`, …) rather than re-implementing them. Their bundled `scripts/verify-*.sh` fail the run on hand-rolled masonry grids and on filters that bypass `FiltersBaseComponent`.
24
24
 
25
+ Every skill that builds or restyles UI (the ones above except `mobilems-devops-config`, plus `mobilems-static-pages` and `mobilems-search`) also has a **Design source — MANDATORY** section: reproduce the design from the source in context — through the Figma plugin (`figma:figma-design-to-code` → `create_session`, `get_design_context` + `get_screenshot`, `get_variable_defs`) when a Figma link is in context, from the `docs/mockups/` exports when the mockups live there — map its tokens onto the museum's Tailwind config (`smart-` prefix), and verify the rendered page against the design at 1280/390 px. Shared workflow: `mobilems-project-init/references/design-source.md`.
26
+
25
27
  ### API docs
26
28
 
27
29
  | Type | Name | Purpose |
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "mobilems",
3
3
  "description": "MobilEMS-specific Claude Code skills (MuzaCMS / MobileMS indexer API)",
4
- "version": "2.126.0"
4
+ "version": "2.128.0"
5
5
  }
@@ -71,6 +71,27 @@ list — re-implementing framework code is a defect, not a shortcut:
71
71
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
72
72
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
73
73
 
74
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
75
+
76
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
77
+ restyling any template, follow
78
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
79
+ Screens here: the list (filters, sort, item cards), the detail page and the `/article-preview` page.
80
+
81
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
82
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
83
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
84
+ per screen / node and `get_variable_defs` for the tokens.
85
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
86
+ → Figma gives the tokens and exact values, the exports confirm the composition.
87
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
88
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
89
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
90
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
91
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
92
+ mapping go into `docs/mockups/<name>.md`; compare the rendered page at 1280 px and 390 px with
93
+ `get_screenshot` (Figma) or the matching export.
94
+
74
95
  ## Steps
75
96
 
76
97
  1. **Gather the parameters** above. Ask for the **name** and **template** at minimum; default `route`
@@ -60,6 +60,28 @@ list — re-implementing framework code is a defect, not a shortcut:
60
60
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its README) — never a
61
61
  per-module copy.
62
62
 
63
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
64
+
65
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
66
+ restyling any template, follow
67
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
68
+ Screens here: the letter index, the results view, the jump-to panel, the creator detail page and the
69
+ creators search tab.
70
+
71
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
72
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
73
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
74
+ per screen / node and `get_variable_defs` for the tokens.
75
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
76
+ → Figma gives the tokens and exact values, the exports confirm the composition.
77
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
78
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
79
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
80
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
81
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
82
+ mapping go into `docs/mockups/creators.md`; compare the rendered page at 1280 px and 390 px with
83
+ `get_screenshot` (Figma) or the matching export.
84
+
63
85
  ## Steps
64
86
 
65
87
  1. **npm deps** — add `@smartsoft001-mobilems/creators-domain`, `@smartsoft001-mobilems/creators-shell-angular`,
@@ -51,6 +51,27 @@ hardest:
51
51
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
52
52
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
53
53
 
54
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
55
+
56
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
57
+ restyling any template, follow
58
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
59
+ Screens here: the events list, the event detail and every booking step (booking, confirm, cancel).
60
+
61
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
62
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
63
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
64
+ per screen / node and `get_variable_defs` for the tokens.
65
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
66
+ → Figma gives the tokens and exact values, the exports confirm the composition.
67
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
68
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
69
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
70
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
71
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
72
+ mapping go into `docs/mockups/events.md`; compare the rendered page at 1280 px and 390 px with
73
+ `get_screenshot` (Figma) or the matching export.
74
+
54
75
  ## Steps
55
76
 
56
77
  1. **npm deps (precondition check)** — events imports only foundation packages:
@@ -46,6 +46,27 @@ list — re-implementing framework code is a defect, not a shortcut:
46
46
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
47
47
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
48
48
 
49
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
50
+
51
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
52
+ restyling any template, follow
53
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
54
+ Screens here: the collections list, the collection detail and the `collections-grid-item` card.
55
+
56
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
57
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
58
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
59
+ per screen / node and `get_variable_defs` for the tokens.
60
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
61
+ → Figma gives the tokens and exact values, the exports confirm the composition.
62
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
63
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
64
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
65
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
66
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
67
+ mapping go into `docs/mockups/collections.md`; compare the rendered page at 1280 px and 390 px
68
+ with `get_screenshot` (Figma) or the matching export.
69
+
49
70
  ## Steps
50
71
 
51
72
  1. **npm deps** — add `@smartsoft001-mobilems/public-collections-domain`,
@@ -49,6 +49,28 @@ list — re-implementing framework code is a defect, not a shortcut:
49
49
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
50
50
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
51
51
 
52
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
53
+
54
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
55
+ restyling any template, follow
56
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
57
+ Screens here: the list (grid + list view, filters panel, searchbar), the detail page and each detail
58
+ tab, the grid/list item cards and the object gallery widget.
59
+
60
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
61
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
62
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
63
+ per screen / node and `get_variable_defs` for the tokens.
64
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
65
+ → Figma gives the tokens and exact values, the exports confirm the composition.
66
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
67
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
68
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
69
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
70
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
71
+ mapping go into `docs/mockups/objects.md`; compare the rendered page at 1280 px and 390 px with
72
+ `get_screenshot` (Figma) or the matching export.
73
+
52
74
  ## Steps
53
75
 
54
76
  1. **npm deps** — add `@smartsoft001-mobilems/objects-domain`, `@smartsoft001-mobilems/objects-shell-angular`,
@@ -49,6 +49,27 @@ list — re-implementing framework code is a defect, not a shortcut:
49
49
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
50
50
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
51
51
 
52
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
53
+
54
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
55
+ restyling any template, follow
56
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
57
+ Screens here: the partners list (date filter, grid/list items) and the partner detail.
58
+
59
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
60
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
61
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
62
+ per screen / node and `get_variable_defs` for the tokens.
63
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
64
+ → Figma gives the tokens and exact values, the exports confirm the composition.
65
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
66
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
67
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
68
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
69
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
70
+ mapping go into `docs/mockups/partners.md`; compare the rendered page at 1280 px and 390 px with
71
+ `get_screenshot` (Figma) or the matching export.
72
+
52
73
  ## Steps
53
74
 
54
75
  1. **npm deps** — add `@smartsoft001-mobilems/articles-domain`,
@@ -65,6 +65,28 @@ Everything the framework does **not** provide goes into the app's shared lib
65
65
  `references/shared-lib.md`) — and every module reuses it from there. If you find a shared-lib item
66
66
  that clearly belongs in the framework, name it in the final report so it can be upstreamed.
67
67
 
68
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
69
+
70
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
71
+ restyling any template, follow
72
+ [`references/design-source.md`](references/design-source.md).
73
+ Screens here: the app shell (header, menu, footer, skip links), the home page and the global
74
+ type/colour tokens.
75
+
76
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
77
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
78
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
79
+ per screen / node and `get_variable_defs` for the tokens.
80
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
81
+ → Figma gives the tokens and exact values, the exports confirm the composition.
82
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
83
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
84
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
85
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
86
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
87
+ mapping go into `docs/mockups/app-shell.md`; compare the rendered page at 1280 px and 390 px with
88
+ `get_screenshot` (Figma) or the matching export.
89
+
68
90
  ## Steps
69
91
 
70
92
  ### 0. Precondition — confirm a scaffold-nx-workspace base
@@ -155,7 +177,9 @@ SEO, translations, configs) and how to reset it.
155
177
 
156
178
  Ask the user (`AskUserQuestion`) once, up front:
157
179
 
158
- - **Brand spec available?** → apply it (fonts, palette, logos, social image, site name/domain).
180
+ - **Brand spec available?** → apply it (fonts, palette, logos, social image, site name/domain). A
181
+ Figma file is the spec: read its tokens with `get_variable_defs` and map them per
182
+ `references/design-source.md` (section 1, step 6).
159
183
  - **No spec (default)** → apply the **neutral token set**: full-latin-ext fonts (Playfair Display for
160
184
  headings, Inter for body), a neutral grey/accent palette with every text pair ≥4.5:1, placeholder
161
185
  logo + `no-image` + social image, generic site name/description keys.
@@ -0,0 +1,114 @@
1
+ # Design source — Figma when it is in context, docs/mockups when the mockups live there
2
+
3
+ Every `mobilems-*` skill that builds or restyles UI reproduces the museum's **approved design**. Use
4
+ the design source that is in context — both are first-class:
5
+
6
+ - **Figma in context** — a `figma.com` link or node in the prompt, the Linear issue / project
7
+ resources, or `docs/mockups/*.md` pointing to Figma → reproduce it through the Figma plugin
8
+ (section 1).
9
+ - **Mockups in `docs/mockups/`** — PNG / MD exports stored in the repo → work from those directly
10
+ (section 2).
11
+ - **Both** → Figma gives the tokens and the exact values (spacing, sizes, colours, assets); the
12
+ exports confirm the composition and which screens are approved.
13
+ - **Neither** → ask the user for the design before styling; do not invent one.
14
+
15
+ Each skill links here from its **Design source — MANDATORY** block.
16
+
17
+ The Figma tools come from the official Figma plugin (`figma`, MCP server `figma`). Its own skills stay
18
+ authoritative for how the tools are called — this file only says how a museum module uses them.
19
+
20
+ ## 1. Figma in context → reproduce through the Figma plugin
21
+
22
+ Figma is in context when the user gives a `figma.com` URL, or when `docs/mockups/*.md` (or the Linear
23
+ issue / project resources) lists Figma links for the screens of this module.
24
+
25
+ 1. **Load `figma:figma-design-to-code` first.** It is a **MANDATORY prerequisite** before calling
26
+ `get_design_context` — never skip it. Include `figma-design-to-code` in the `skillNames` parameter
27
+ of every `get_design_context` call. (Read-only work needs nothing else; `figma:figma-use` is only
28
+ for `use_figma`, i.e. writing to or scripting the file — a module skill does not do that.)
29
+ 2. **Parse the URL.** `figma.com/design/:fileKey/:fileName?node-id=:nodeId` → `fileKey`, and
30
+ `nodeId` with `-` converted to `:` (`12-345` → `12:345`). A branch URL
31
+ (`/design/:fileKey/branch/:branchKey/…`) uses `branchKey` as the `fileKey`. A URL without
32
+ `node-id` is not enough: ask the user for a node-specific link, or call `get_metadata` with only
33
+ the `fileKey` to list the pages and pick the frames from there — never guess a node id.
34
+ 3. **`create_session`** with the `fileKey` and a short description (e.g. "Build the objects list and
35
+ detail pages for <museum>") once the file key is known, before any other file tool. Pass the
36
+ returned UUID as `sessionId` on every following Figma call for this task.
37
+ 4. **Per screen / node** of the module (list, detail, each tab, filters panel, cards, mobile
38
+ variants):
39
+ - `get_design_context` (`fileKey`, `nodeId`, `clientFrameworks: angular`,
40
+ `clientLanguages: html,css,typescript`) — it is the primary tool. Keep its screenshot: that
41
+ render is the visual target the implementation must match.
42
+ - `get_screenshot` when the context response came back without one, and for the mobile frame.
43
+ - When the response is flagged as **sparse**, correlate its child node ids with the screenshot and
44
+ request the visible children in one parallel batch of `get_design_context` calls — implement
45
+ only from high-fidelity responses.
46
+ - `get_metadata` only for an overview of a large page (node ids, names, sizes).
47
+ 5. **`get_variable_defs`** on the screen (or the design-system frame) to read the design tokens —
48
+ colours, font families, sizes, spacing, radii.
49
+ 6. **Map tokens onto the museum's Tailwind config instead of hard-coding them.** Brand tokens live in
50
+ exactly two files (see `tailwind-styles.md` / `branding-reset.md`): `tailwind.config.js`
51
+ (`theme.extend.colors`, `theme.extend.fontFamily`, …) and `apps/web/src/styles.scss`
52
+ (`@font-face` + fallbacks). Add or reuse a named token for each Figma variable
53
+ (`primary.accent`, `fontFamily.heading`, …) and use the `smart-`-prefixed utilities
54
+ (`smart-text-primary-accent`, `smart-font-heading`). No raw hex values or arbitrary
55
+ `smart-[#3f5b76]` classes in templates when a token exists or can be added. A Figma colour that
56
+ fails WCAG contrast is mapped to the nearest compliant shade (`qa-hardening.md` §5) and the
57
+ deviation is recorded.
58
+ 7. **Adapt the reference code — never paste it.** `get_design_context` returns a React/Tailwind-like
59
+ prototype. Treat it as a high-fidelity non-interactive reference and translate it into the
60
+ module's Angular templates:
61
+ - **Framework first still applies.** The page/component logic comes from the framework base the
62
+ skill names (`ObjectsCatalogBaseComponent`, `ObjectDetailsBaseComponent`, `FiltersBaseComponent`,
63
+ `MasonryGridComponent`, `TabsBaseComponent`, …). The design only shapes the museum's own
64
+ template; it is never a reason to re-implement a base, a grid or a filter state.
65
+ - Reuse the app's shared components (`libs/shared/angular`) and the module's list/grid items
66
+ before writing new markup; a design element that matches an existing component is that
67
+ component, restyled if needed.
68
+ - Translate absolute positioning into flex/grid layout with `.smart-container` and responsive
69
+ `smart-` breakpoints; implement the interactive parts (links, buttons, tabs, filters) as
70
+ interactive, keyboard-reachable code.
71
+ - Copy only static assets (icons, illustrations, logos) — download them as the
72
+ `get_design_context` response describes, store them under `apps/web/public/`, and leave no
73
+ temporary Figma asset URLs in code. Images that come from the API (object photos, article
74
+ covers) stay dynamic; the design's sample photos are placeholders.
75
+ - Every visible string goes through a translation key in `pl` and `en` — the design's text is
76
+ the source of the Polish value, not a literal in the template.
77
+
78
+ ## 2. Mockups in `docs/mockups/` → work from the exports
79
+
80
+ When the approved mockups live in `docs/mockups/` (PNG exports, often with an `.md` describing the
81
+ screens), use them directly:
82
+
83
+ - Read the exports (Read the PNGs and the `.md`) — do not guess from a link you cannot open. If the
84
+ `.md` links Figma nodes, section 1 applies as well (see "Both" above).
85
+ - Note the container width, heading scale, spacing rhythm, card layout and the mobile variant.
86
+ - Map the colours and fonts you read onto the same Tailwind tokens as in section 1 step 6 — the token
87
+ rule is the same whichever source the design comes from.
88
+ - Section 1 step 7's rules (adapt to the framework bases, reuse shared components, translation
89
+ keys) apply unchanged.
90
+
91
+ If a Figma link is in context but the Figma MCP server is not connected or the file is not shared
92
+ with the account, say so in the run report and work from `docs/mockups/` when the exports are there.
93
+
94
+ ## 3. Record the design source in the module's docs
95
+
96
+ Write (or update) `docs/mockups/<module>.md` so the next run — and the tester — can find the same
97
+ nodes:
98
+
99
+ - the Figma **file key** and the file URL,
100
+ - the **node ids** per screen (list, detail, tabs, filters, cards; desktop and mobile frames),
101
+ - the **token mapping**: Figma variable → Tailwind token → `smart-` utility, plus any WCAG
102
+ deviation (Figma value → used value, why),
103
+ - or, when the design came from the exports, which `docs/mockups/` files were used.
104
+
105
+ ## 4. Verify against the design
106
+
107
+ - Render the page (`nx serve web` + the Playwright MCP / `flow:browser-capture`) at **1280 px** and
108
+ **390 px** wide and compare each with the `get_screenshot` of the matching desktop / mobile Figma
109
+ frame; when the design came from `docs/mockups/`, compare with the matching PNG export.
110
+ - Check layout, spacing, type scale, colours (through the tokens), asset placement and geometry,
111
+ and every state the design shows (empty, hover/focus, active tab, open filters).
112
+ - Fix every in-scope mismatch; note — do not alter — pre-existing mismatches outside the module.
113
+ - Data-driven differences (real API text and images instead of the design's samples) are expected;
114
+ structural ones are not.
@@ -146,20 +146,20 @@ files duplicate exports that now exist; copying those is the single most common
146
146
 
147
147
  Framework now — do **not** generate (import from `@smartsoft001-mobilems/angular`):
148
148
 
149
- | Kind | Framework exports |
150
- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
151
- | environment | `createMobilemsEnvironment`, `MOBILEMS_ENVIRONMENT`, `EnvironmentService` |
152
- | pipes | `altText`, `fileUrl`, `backgroundUrl`, `plainText`, `stripAnchors`, `capitalize` |
153
- | tools | `classifyLink`, `isInternalLink`, `normalizeUrl`, `stripHtml`, `formatNamedEntries`, `normalizeSearchText`, `newTabText`, `pageToOffset`, `decodeHtmlEntities`, `ElementIdSequence`, `createSafeTimeouts`, `createLazyLoader` (single-flight dynamic `import()`, e.g. `online-3d-viewer`), `photoFileName`/`urlExtension`, `widgetImageUrl`, `overflowingTags`, `themeTagKey`, `themeTagsLayout`, `THEME_TAGS_VISIBLE_LIMIT`, `resolveMenuItemTarget`, `isNavigableMenuItem` (+ `MenuItemTarget`), `objectCardMeta`/`objectCardPlace`/`objectCardExhibition`/`exhibitionText` (+ `IObjectCardSource`), `SERIES_TITLES_FILTER`, `catalogEntryFilterParams` (the named-entries filter query params), `recommendedPerPage`, `widgetDomId`, `cleanWidgetText`, `formatFileSize`, `safeDecode` |
154
- | directives | `a[smartExternalLink]`, `[smartExternalLinks]`, `[smartFocusTrap]`, `[smartTruncatedTitle]`, `[smartInPageAnchors]` (`InPageAnchorsDirective`; references use `app…` — rename the attributes) |
155
- | services | `ConfirmationModalService`, `ExternalLinkConfirmationService`, `FilterPersistenceService`, `OrientationService`, `WcagChangesService`, `LineHeightService`, `BreadcrumbsService`, `ContactService`, `DataService`, `MuseumSeoService` |
156
- | interceptors | `LanguageInterceptor`, `PreviewAuthInterceptor`, `SsrTimeoutInterceptor`, `DedupeRequestInterceptor` |
157
- | bases | `CalendarBaseComponent`, `PaginationDotsBaseComponent`, `PaginationBaseComponent`, `CarouselBaseComponent`, `PartnersCarouselBaseComponent`, `NewObjectsCarouselBaseComponent`, `ArticlesCarouselBaseComponent`, `SliderBaseComponent` (+ `ISliderOptions`; `ScrollTopComponent` is server-guarded), `GalleryBaseComponent`, `GalleryFullscreenDialogBaseComponent` (`GalleryFullscreenBaseComponent` is `@deprecated`), `ConfirmationModalBaseComponent`, `NewsletterModalBaseComponent`, `MapBaseComponent`, `FilterInputBaseComponent`, `FilterDateInputBaseComponent`, `FilterCustomDictionaryInputBaseComponent`, `FilterDictionaryInputBaseComponent` (inline tree, `source`, paging), `ThemeTagsFilterBaseComponent`, `CatalogFilterBarBaseComponent`, `CatalogToolbarBaseComponent`, `SearchbarBaseComponent`, `SelectCheckboxBaseComponent` (+ `ISelectionHooks`), `DropdownBaseComponent`, `TabsBaseComponent`, `WcagBaseComponent` (+ `WCAG_OPTION_GROUPS`), `BreadcrumbsBaseComponent`, `BreadcrumbsBarBaseComponent`, `MenuItemBaseComponent`, `ObjectCardBaseComponent`, `ObjectsGridItemBaseComponent`, `ObjectsListItemBaseComponent`, `CollectionCardBaseComponent`, `CollectionsGridItemBaseComponent`, `FavoriteButtonBaseComponent` (+ `IFavoriteHooks`, `IFavoriteRef`), `FavoritesNoticeBaseComponent`, `SelectionActionsBaseComponent`, `DownloadCardsBaseComponent`, `RecommendedBaseComponent`, `WidgetImageBaseComponent`, `WidgetMediaBaseComponent`, `WidgetGalleryImageBaseComponent`, `WidgetAudioBaseComponent`, `WidgetGalleryObjectBaseComponent` (all extend `WidgetBaseComponent`) |
158
- | SSR tools | `injectServerResponseInit`, `appendPreloadLinks` (image preload `Link` headers) |
149
+ | Kind | Framework exports |
150
+ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
151
+ | environment | `createMobilemsEnvironment`, `MOBILEMS_ENVIRONMENT`, `EnvironmentService` |
152
+ | pipes | `altText`, `fileUrl`, `backgroundUrl`, `plainText`, `stripAnchors`, `capitalize` |
153
+ | tools | `isHomePath` (+ `IHomePathOptions`; lenient by default, `{ strict: true }` is the header rule), `footerSocialLinks` (+ `IFooterSocialLink`, `IFooterSocialSource`), `classifyLink`, `isInternalLink`, `normalizeUrl`, `stripHtml`, `formatNamedEntries`, `normalizeSearchText`, `newTabText`, `pageToOffset`, `decodeHtmlEntities`, `ElementIdSequence`, `createSafeTimeouts`, `createLazyLoader` (single-flight dynamic `import()`, e.g. `online-3d-viewer`), `photoFileName`/`urlExtension`, `widgetImageUrl`, `overflowingTags`, `themeTagKey`, `themeTagsLayout`, `THEME_TAGS_VISIBLE_LIMIT`, `resolveMenuItemTarget`, `isNavigableMenuItem` (+ `MenuItemTarget`), `objectCardMeta`/`objectCardPlace`/`objectCardExhibition`/`exhibitionText` (+ `IObjectCardSource`), `SERIES_TITLES_FILTER`, `catalogEntryFilterParams` (the named-entries filter query params), `recommendedPerPage`, `widgetDomId`, `cleanWidgetText`, `formatFileSize`, `safeDecode` |
154
+ | directives | `a[smartExternalLink]`, `[smartExternalLinks]`, `[smartFocusTrap]`, `[smartTruncatedTitle]`, `[smartInPageAnchors]` (`InPageAnchorsDirective`; references use `app…` — rename the attributes) |
155
+ | services | `ConfirmationModalService`, `ExternalLinkConfirmationService`, `FilterPersistenceService`, `OrientationService`, `WcagChangesService`, `LineHeightService`, `BreadcrumbsService`, `ContactService`, `DataService`, `MuseumSeoService` |
156
+ | interceptors | `LanguageInterceptor`, `PreviewAuthInterceptor`, `SsrTimeoutInterceptor`, `DedupeRequestInterceptor` |
157
+ | bases | `CalendarBaseComponent`, `PaginationDotsBaseComponent`, `PaginationBaseComponent`, `CarouselBaseComponent`, `PartnersCarouselBaseComponent`, `NewObjectsCarouselBaseComponent`, `ArticlesCarouselBaseComponent`, `SliderBaseComponent` (+ `ISliderOptions`; `ScrollTopComponent` is server-guarded), `GalleryBaseComponent`, `GalleryFullscreenDialogBaseComponent` (`GalleryFullscreenBaseComponent` is `@deprecated`), `ConfirmationModalBaseComponent`, `NewsletterModalBaseComponent`, `MapBaseComponent`, `FilterInputBaseComponent`, `FilterDateInputBaseComponent`, `FilterCustomDictionaryInputBaseComponent`, `FilterDictionaryInputBaseComponent` (inline tree, `source`, paging), `ThemeTagsFilterBaseComponent`, `CatalogFilterBarBaseComponent`, `CatalogToolbarBaseComponent`, `SearchbarBaseComponent`, `SelectCheckboxBaseComponent` (+ `ISelectionHooks`), `DropdownBaseComponent`, `TabsBaseComponent`, `WcagBaseComponent` (+ `WCAG_OPTION_GROUPS`), `BreadcrumbsBaseComponent`, `BreadcrumbsBarBaseComponent`, `MenuItemBaseComponent`, `HeaderBaseComponent<TPanel>` (home flag, contrast, mobile panels, Escape host listener; `HeaderComponent` is `@deprecated`), `FooterBaseComponent` (CMS config, contrast, year; `FooterComponent` is `@deprecated`), `LanguageSwitchBaseComponent` (+ `injectLanguageSwitch` for a header that already extends a base), `ObjectCardBaseComponent`, `ObjectsGridItemBaseComponent`, `ObjectsListItemBaseComponent`, `CollectionCardBaseComponent`, `CollectionsGridItemBaseComponent`, `FavoriteButtonBaseComponent` (+ `IFavoriteHooks`, `IFavoriteRef`), `FavoritesNoticeBaseComponent`, `SelectionActionsBaseComponent`, `DownloadCardsBaseComponent`, `RecommendedBaseComponent`, `WidgetImageBaseComponent`, `WidgetMediaBaseComponent`, `WidgetGalleryImageBaseComponent`, `WidgetAudioBaseComponent`, `WidgetGalleryObjectBaseComponent` (all extend `WidgetBaseComponent`) |
158
+ | SSR tools | `injectServerResponseInit`, `appendPreloadLinks` (image preload `Link` headers) |
159
159
 
160
160
  What stays in the app lib: the **template and styles** of every base above — the museum keeps its
161
161
  own HTML and Tailwind classes (the filter inputs, searchbar, catalog toolbar and filter bar, theme tags and select
162
- checkbox, dropdown, tabs, wcag panel, breadcrumbs and menu item are logic only — extend the base, write the markup yourself; e.g. the confirmation-modal component is markup over `ConfirmationModalBaseComponent` /
162
+ checkbox, dropdown, tabs, wcag panel, breadcrumbs, menu item, header, footer and language switch are logic only — extend the base, write the markup yourself; e.g. the confirmation-modal component is markup over `ConfirmationModalBaseComponent` /
163
163
  `ConfirmationModalService`), the `leaflet` dependency (`MapBaseComponent` asks the subclass for
164
164
  `loadLeaflet()`), `truncateHtml` and any museum-only tools. `local-storage`, `configs-cache`, `not-found-content` are gone: language lives in
165
165
  the framework `TranslationService`, the config cache in `ConfigsFacade.init()`.
@@ -173,7 +173,9 @@ barrel, documented in the app's own README so the module skills can find it.
173
173
  `./lib/configs.module`, `./lib/models`, `./lib/pipes`, `./lib/tools`, `./lib/environments` (only
174
174
  the folders that still have files).
175
175
  - `components/index.ts` — export the foundation shared components (and keep the `COMPONENTS` array,
176
- which holds `AppComponent`/`FooterComponent`/`HeaderComponent`). Module skills add their feature
176
+ which holds `AppComponent`/`FooterComponent`/`HeaderComponent`). The app's own `app-header` / `app-footer`
177
+ extend `HeaderBaseComponent` / `FooterBaseComponent` and carry the app markup (the framework
178
+ `HeaderComponent`/`FooterComponent` are `@deprecated`). Module skills add their feature
177
179
  shared components' exports when they build them.
178
180
 
179
181
  ## `libs/shared/angular/README.md` — required
@@ -39,12 +39,36 @@ Forking a result card for search is the classic mistake: the card then drifts
39
39
  from the module's list and the museum ends up with two visually different
40
40
  representations of the same object.
41
41
 
42
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
43
+
44
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
45
+ restyling any template, follow
46
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
47
+ Screens here: the searchbar, the results frame and tabs, the result list item, the empty /
48
+ no-results states and pagination.
49
+
50
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
51
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
52
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
53
+ per screen / node and `get_variable_defs` for the tokens.
54
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
55
+ → Figma gives the tokens and exact values, the exports confirm the composition.
56
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
57
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
58
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
59
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
60
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
61
+ mapping go into `docs/mockups/search.md`; compare the rendered page at 1280 px and 390 px with
62
+ `get_screenshot` (Figma) or the matching export.
63
+
42
64
  ## Steps
43
65
 
44
- 1. **Read the mockup** in `docs/mockups/` — the searchbar and the result list
45
- item are usually exported as separate design-system components rather than a
46
- full screen, so match the component and keep the page layout consistent with
47
- the rest of the portal.
66
+ 1. **Read the design** from the source in context (see **Design source —
67
+ MANDATORY** above): Figma nodes or the `docs/mockups/` exports. The searchbar
68
+ and the result list item are usually separate design-system components rather
69
+ than a full screen — request their nodes with `get_design_context` (Figma) or
70
+ find their exports, match the
71
+ component and keep the page layout consistent with the rest of the portal.
48
72
  2. **Tabs come from modules.** Each feature module registers a child route under
49
73
  `wyszukaj/:text` (its search module) and the page builds its tab list from
50
74
  what is registered. When a tab is missing, fix it in that module's skill
@@ -30,18 +30,42 @@ exists. Re-implementing it is a defect, not a shortcut:
30
30
  `node_modules/@smartsoft001-mobilems/angular/README.md`) — the framework API catalog
31
31
  2. `libs/shared/angular/README.md` — the app's own shared lib
32
32
 
33
- | Do not hand-roll | Use |
34
- | --- | --- |
35
- | a rich-text renderer for CMS body HTML | the page template's existing content block + widget map |
36
- | per-page galleries / sliders | the widget content-type components (`WIDGET` group) |
37
- | menu and footer links | the API menu configuration (see pitfalls — hardcoding them was a reported bug) |
38
- | meta/OG tags | `SeoService` / `MetaService` |
33
+ | Do not hand-roll | Use |
34
+ | -------------------------------------- | ------------------------------------------------------------------------------ |
35
+ | a rich-text renderer for CMS body HTML | the page template's existing content block + widget map |
36
+ | per-page galleries / sliders | the widget content-type components (`WIDGET` group) |
37
+ | menu and footer links | the API menu configuration (see pitfalls — hardcoding them was a reported bug) |
38
+ | meta/OG tags | `SeoService` / `MetaService` |
39
+
40
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
41
+
42
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
43
+ restyling any template, follow
44
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
45
+ Screens here: the CMS page template (hero, body, image, links, slides) and the contact page.
46
+
47
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
48
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
49
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
50
+ per screen / node and `get_variable_defs` for the tokens.
51
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
52
+ → Figma gives the tokens and exact values, the exports confirm the composition.
53
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
54
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
55
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
56
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
57
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
58
+ mapping go into `docs/mockups/static-pages.md`; compare the rendered page at 1280 px and 390 px
59
+ with `get_screenshot` (Figma) or the matching export.
39
60
 
40
61
  ## Steps
41
62
 
42
- 1. **Read the mockup.** Exports live in `docs/mockups/`; read them (Read) rather
43
- than guessing from the Figma link. Note the container width, heading scale,
44
- spacing rhythm and how the page header/hero differs from the module pages.
63
+ 1. **Read the design** from the source in context (see **Design source —
64
+ MANDATORY** above): Figma → `get_design_context` + `get_screenshot` for the
65
+ CMS page and contact frames, `get_variable_defs` for the tokens; exports in
66
+ `docs/mockups/` → read them (Read) rather than guessing from a link you cannot
67
+ open. Either way note the container width, heading scale, spacing
68
+ rhythm and how the page header/hero differs from the module pages.
45
69
  2. **CMS data — render everything the API sends.** The page payload carries more
46
70
  than a title and body: `image`, `backgroundImage`, `links`, `slides`.
47
71
  A field that arrives and is not rendered reads to the client as a missing
@@ -54,6 +54,27 @@ list — re-implementing framework code is a defect, not a shortcut:
54
54
  Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
55
55
  README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
56
56
 
57
+ ## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
58
+
59
+ Reproduce the museum's approved design — from the source that is in context. Before writing or
60
+ restyling any template, follow
61
+ [`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
62
+ Screens here: the thematic paths list, the path detail and its cards.
63
+
64
+ 1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
65
+ `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
66
+ before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
67
+ per screen / node and `get_variable_defs` for the tokens.
68
+ 2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
69
+ → Figma gives the tokens and exact values, the exports confirm the composition.
70
+ 3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
71
+ `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
72
+ 4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
73
+ exports listed above (Framework first) — the design shapes only the museum's own templates.
74
+ 5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
75
+ mapping go into `docs/mockups/thematic-paths.md`; compare the rendered page at 1280 px and 390 px
76
+ with `get_screenshot` (Figma) or the matching export.
77
+
57
78
  ## Steps
58
79
 
59
80
  1. **npm deps** — add `@smartsoft001-mobilems/articles-domain`,