npm - @smartsoft001-mobilems/claude-plugins - Versions diffs - 2.127.0 → 2.129.0 - Mend

@smartsoft001-mobilems/claude-plugins 2.127.0 → 2.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md CHANGED Viewed

@@ -30,7 +30,14 @@ Run them in this order for a new museum app — `/smart:scaffold-nx-workspace`
 Every scaffolding skill opens with a **Framework first — MANDATORY** section pointing at the
 [framework API catalog](../angular/README.md); they reuse framework exports rather than
-re-implementing them.
+re-implementing them. Every skill that builds or restyles UI (all of the above except
+`mobilems-devops-config` and `mobilems-docs-reader`, plus `mobilems-static-pages` and
+`mobilems-search`) also has a **Design source — MANDATORY** section: it reproduces the design from
+the source in context — the Figma plugin (`figma:figma-design-to-code`, `get_design_context`,
+`get_screenshot`, `get_variable_defs`) when a Figma link is in context, the `docs/mockups/` exports
+when the mockups live there — and maps its tokens onto the museum's Tailwind config. The shared
+workflow is
+[`mobilems-project-init/references/design-source.md`](src/plugins/mobilems/skills/mobilems-project-init/references/design-source.md).
 ## MuzaCMS API access (required for `mobilems-docs-reader` skill)

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@smartsoft001-mobilems/claude-plugins",
-  "version": "2.127.0",
+  "version": "2.129.0",
   "publishConfig": {
     "access": "public"
   },

package/plugins/mobilems/.claude-plugin/README.md CHANGED Viewed

@@ -22,6 +22,8 @@ Run order for a new museum app: `/smart:scaffold-nx-workspace` → `mobilems-pro
 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`.
+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`.
 ### API docs
 | Type | Name | Purpose |

package/plugins/mobilems/.claude-plugin/plugin.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
   "name": "mobilems",
   "description": "MobilEMS-specific Claude Code skills (MuzaCMS / MobileMS indexer API)",
-  "version": "2.127.0"
+  "version": "2.129.0"
 }

package/plugins/mobilems/skills/mobilems-articles/SKILL.md CHANGED Viewed

@@ -71,6 +71,27 @@ list — re-implementing framework code is a defect, not a shortcut:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the list (filters, sort, item cards), the detail page and the `/article-preview` page.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/<name>.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **Gather the parameters** above. Ask for the **name** and **template** at minimum; default `route`

package/plugins/mobilems/skills/mobilems-creators/SKILL.md CHANGED Viewed

@@ -60,6 +60,28 @@ list — re-implementing framework code is a defect, not a shortcut:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its README) — never a
 per-module copy.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the letter index, the results view, the jump-to panel, the creator detail page and the
+creators search tab.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/creators.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps** — add `@smartsoft001-mobilems/creators-domain`, `@smartsoft001-mobilems/creators-shell-angular`,

package/plugins/mobilems/skills/mobilems-events/SKILL.md CHANGED Viewed

@@ -51,6 +51,27 @@ hardest:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the events list, the event detail and every booking step (booking, confirm, cancel).
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/events.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps (precondition check)** — events imports only foundation packages:

package/plugins/mobilems/skills/mobilems-object-collections/SKILL.md CHANGED Viewed

@@ -46,6 +46,27 @@ list — re-implementing framework code is a defect, not a shortcut:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the collections list, the collection detail and the `collections-grid-item` card.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/collections.md`; compare the rendered page at 1280 px and 390 px
+   with `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps** — add `@smartsoft001-mobilems/public-collections-domain`,

package/plugins/mobilems/skills/mobilems-objects/SKILL.md CHANGED Viewed

@@ -35,20 +35,47 @@ list — re-implementing framework code is a defect, not a shortcut:
 2. [`packages/objects/README.md`](https://github.com/smartsoft001/mobilems-framework/blob/main/packages/objects/README.md) — this module's package catalog
 3. `libs/shared/angular/README.md` — the app's own shared lib (built by `mobilems-project-init`)
-| Do not hand-roll                                                                                                  | Use                                                                                                                                                               |
-| ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| a masonry grid (`new Masonry(...)`, per-page masonry JS/CSS)                                                      | `<smart-mobilems-masonry-grid>` (`MasonryGridComponent`) with a `#masonryContentTpl`; the `Masonry` provider in step 3 only feeds it                              |
-| filter state / hand-built `query` arrays                                                                          | `FiltersBaseComponent<MsObject>` + its `FiltersContext` accessors (`searchText`, `keywords`, `page`, `sort`, `onlyImage`, …)                                      |
-| list page logic (first read, persistence, SSR read, read guard, load-more, masonry lifecycle, list SEO)           | `ObjectsCatalogBaseComponent` (`pages/list` extends it; the app keeps its own markup and `sortOptions` over `isNewType`)                                          |
-| detail page logic (SSR SEO, scroll, visit counter, retry, opt-in related / related collections)                   | `ObjectDetailsBaseComponent` (extends `ObjectsItemComponent`; `pages/item` extends it, `related` and `relatedCollections` are opt-in via the constructor options) |
-| object detail field helpers (title, tags, inventory, bibliography, description, related articles, ask-about link) | the `objectTitle`, `tagValues`, `inventoryValues`, `bibliography`, `descriptionHtml`, `relatedArticles`, `askAboutObjectHref` tools                               |
-| gallery / media lists                                                                                             | `ObjectMediaService`                                                                                                                                              |
-| visit counter, related objects, collection / archaeological dictionaries                                          | `ObjectsDataService` (extends `ObjectsService`)                                                                                                                   |
-| media URLs, meta/OG tags, filter dictionaries, modals, WCAG                                                       | `FileUrlService`, `SeoService`/`MetaService`, `DictionaryService`, `ModalService`, `WcagService`                                                                  |
+| Do not hand-roll                                                                                                  | Use                                                                                                                                                                                               |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| a masonry grid (`new Masonry(...)`, per-page masonry JS/CSS)                                                      | `<smart-mobilems-masonry-grid>` (`MasonryGridComponent`) with a `#masonryContentTpl`; the `Masonry` provider in step 3 only feeds it                                                              |
+| filter state / hand-built `query` arrays                                                                          | `FiltersBaseComponent<MsObject>` + its `FiltersContext` accessors (`searchText`, `keywords`, `page`, `sort`, `onlyImage`, …)                                                                      |
+| list page logic (first read, persistence, SSR read, read guard, load-more, masonry lifecycle, list SEO)           | `ObjectsCatalogBaseComponent` (`pages/list` extends it; the app keeps its own markup and `sortOptions` over `isNewType`)                                                                          |
+| detail page logic (SSR SEO, scroll, visit counter, retry, opt-in related / related collections)                   | `ObjectDetailsBaseComponent` (extends `ObjectsItemComponent`; `pages/item` extends it, `related` and `relatedCollections` are opt-in via the constructor options)                                 |
+| object detail field helpers (title, tags, inventory, bibliography, description, related articles, ask-about link) | the `objectTitle`, `tagValues`, `inventoryValues`, `bibliography`, `descriptionHtml`, `relatedArticles`, `askAboutObjectHref` tools                                                               |
+| gallery / media lists                                                                                             | `ObjectMediaService`                                                                                                                                                                              |
+| visit counter, related objects, collection / archaeological dictionaries                                          | `ObjectsDataService` (extends `ObjectsService`)                                                                                                                                                   |
+| filter bar (sort / limit, chips, dictionary toggles, year range, theme tags)                                      | `ObjectsFiltersBarBaseComponent` (`components/filters-top` extends it; the app keeps its markup; the cycle theme tags are opt-in with `cycleTags: true`, otherwise no `dictionary/Cycle` request) |
+| search panel (phrase, tags, boolean filters) - Podlasie-style museums only                                        | `ObjectsSearchPanelBaseComponent` (S/T-style museums have no search panel: they use the filters bar only)                                                                                         |
+| advanced filters panel - Podlasie-style museums only                                                              | `ObjectsAdvancedFiltersBaseComponent` (the field config `IObjectsAdvancedFilterField[]` stays in the app, the framework exports only the types; S/T-style museums skip it)                        |
+| share results link                                                                                                | `ObjectsShareResultsBaseComponent` (extends the shared `ShareLinkBaseComponent`; set `objectsShareResultsListPath` for another list)                                                              |
+| sort / limit options, sort keys, results URL                                                                      | `OBJECTS_SORT_OPTIONS`, `OBJECTS_NEW_TYPE_SORT_OPTIONS`, `OBJECTS_LIMIT_OPTIONS`, `objectsSortKey`, `objectsSortFromKey`, `buildObjectsResultsUrl`                                                |
+| media URLs, meta/OG tags, filter dictionaries, modals, WCAG                                                       | `FileUrlService`, `SeoService`/`MetaService`, `DictionaryService`, `ModalService`, `WcagService`                                                                                                  |
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the list (grid + list view, filters panel, searchbar), the detail page and each detail
+tab, the grid/list item cards and the object gallery widget.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/objects.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps** — add `@smartsoft001-mobilems/objects-domain`, `@smartsoft001-mobilems/objects-shell-angular`,
@@ -87,7 +114,7 @@ README) — never a per-module copy. `scripts/verify-module.sh` fails the run on
 The cross-cutting rules live in `mobilems-project-init`
 `references/qa-hardening.md`; these are the objects-specific ones:
-- **Search debounce.** The panel full-text search (`app-objects-searchbar variant="panel"`, a standalone component: a live debounced search through `searchEvent` / `closeEvent`, an `autofocus` input, never navigates - it does not extend `SearchbarBaseComponent`, which navigates to the search route) must
+- **Search debounce.** For apps that render the panel full-text search with `app-objects-searchbar variant="panel"` (a standalone component: a live debounced search through `searchEvent` / `closeEvent`, an `autofocus` input, never navigates - it does not extend `SearchbarBaseComponent`, which navigates to the search route; the filter bases do not need it), the host must
   re-emit through a handler with `@debounce(250)` (`lodash-decorators`) — without it every keystroke
   hits the API. Collections and news filters already do this; keep the modules consistent.
 - **List page:** show the total result count (`facade.totalCount()`) and add the shared

package/plugins/mobilems/skills/mobilems-objects/references/lib-contents.md CHANGED Viewed

@@ -20,8 +20,10 @@ libs/museum-objects/
         └── lib/
             ├── objects.module.ts        # MuseumObjectsModule (references/module-and-routes.md)
             ├── objects.routes.ts
-            ├── components/              # description, filter-input (may extend FilterInputBaseComponent - its API is a subset), high-def-request-modal,
-            │                            #   menu, objects-searchbar (standalone, live search), tabs/*
+            ├── components/              # description, filters-top (extends ObjectsFiltersBarBaseComponent), high-def-request-modal,
+            │                            #   menu, objects-searchbar (only where the app renders the panel search), tabs/*;
+            │                            #   no filter-input (it comes from the shared lib); Podlasie-style apps also keep
+            │                            #   objects-search-panel and objects-advanced-filters (extend the framework bases)
             ├── pages/                   # list (ListComponent), item (ItemComponent) + index
             └── services/               # no local objects.service / object-media.service (framework ObjectsDataService, ObjectMediaService)
 ```
@@ -29,7 +31,10 @@ libs/museum-objects/
 `pages/list` extends `ObjectsCatalogBaseComponent` (logic only: first read, persistence, SSR read, read guard,
 load-more, masonry lifecycle, list SEO) and keeps the app's own markup and `sortOptions` over `isNewType`;
 `pages/item` extends `ObjectDetailsBaseComponent` (SSR SEO, scroll, visit counter, retry, opt-in related / related
-collections; the app keeps its markup). There is no local `objects.service` or `object-media.service`.
+collections; the app keeps its markup). `components/filters-top` extends `ObjectsFiltersBarBaseComponent` (cycle tags
+opt-in); `objects-search-panel` / `objects-advanced-filters` / `objects-share-results`, where an app has them, extend
+`ObjectsSearchPanelBaseComponent` / `ObjectsAdvancedFiltersBaseComponent` / `ObjectsShareResultsBaseComponent`
+(S/T-style museums use the filters bar only). There is no local `objects.service` or `object-media.service`.
 ## Domain entity (verbatim, thread nothing — pure types)

package/plugins/mobilems/skills/mobilems-objects/scripts/verify-module.sh CHANGED Viewed

@@ -138,6 +138,35 @@ else
   pass "no hand-rolled visit counter, SSR apply or media service"
 fi
+# 7. filter bar logic lives in the framework filters bar base; no local copies of its helpers
+FILTERSF="$LIBDIR/components/filters-top/filters-top.component.ts"
+if [ -f "$FILTERSF" ]; then
+  if grep -qE "extends[[:space:]]+ObjectsFiltersBarBaseComponent" "$FILTERSF"; then
+    pass "filters-top extends ObjectsFiltersBarBaseComponent"
+  else
+    bad "components/filters-top/filters-top.component.ts does not extend ObjectsFiltersBarBaseComponent — filter bar logic belongs to the framework base ($FILTERSF)"
+  fi
+fi
+if grep -rqE "class RedirectFiltersContext|function buildObjectsResultsUrl" "$LIBDIR" 2>/dev/null; then
+  bad "lib contains class RedirectFiltersContext or function buildObjectsResultsUrl — use ObjectsFiltersBarBaseComponent / buildObjectsResultsUrl from the framework:"
+  grep -rnE "class RedirectFiltersContext|function buildObjectsResultsUrl" "$LIBDIR" >&2 || true
+else
+  pass "no hand-rolled redirect filters context or results URL builder"
+fi
+# 8. search panel and advanced filters (Podlasie-style apps only) extend the framework bases
+for pair in "objects-search-panel.component.ts:ObjectsSearchPanelBaseComponent" "objects-advanced-filters.component.ts:ObjectsAdvancedFiltersBaseComponent"; do
+  fname="${pair%%:*}"
+  base="${pair##*:}"
+  for found in $(find "$LIBDIR" -name "$fname" 2>/dev/null); do
+    if grep -qE "extends[[:space:]]+$base" "$found"; then
+      pass "$fname extends $base"
+    else
+      bad "$fname does not extend $base — its logic belongs to the framework base ($found)"
+    fi
+  done
+done
 echo "== Translations (REF_ROOT=${REF_ROOT:-unset}) =="
 # Groups: present in pl+en, no dead references, complete vs the reference repo
 # (export REF_ROOT=<reference-repo-root> to enable the completeness diff).

package/plugins/mobilems/skills/mobilems-partners/SKILL.md CHANGED Viewed

@@ -49,6 +49,27 @@ list — re-implementing framework code is a defect, not a shortcut:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the partners list (date filter, grid/list items) and the partner detail.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/partners.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps** — add `@smartsoft001-mobilems/articles-domain`,

package/plugins/mobilems/skills/mobilems-project-init/SKILL.md CHANGED Viewed

@@ -65,6 +65,28 @@ Everything the framework does **not** provide goes into the app's shared lib
 `references/shared-lib.md`) — and every module reuses it from there. If you find a shared-lib item
 that clearly belongs in the framework, name it in the final report so it can be upstreamed.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`references/design-source.md`](references/design-source.md).
+Screens here: the app shell (header, menu, footer, skip links), the home page and the global
+type/colour tokens.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/app-shell.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
 ### 0. Precondition — confirm a scaffold-nx-workspace base
@@ -155,7 +177,9 @@ SEO, translations, configs) and how to reset it.
 Ask the user (`AskUserQuestion`) once, up front:
-- **Brand spec available?** → apply it (fonts, palette, logos, social image, site name/domain).
+- **Brand spec available?** → apply it (fonts, palette, logos, social image, site name/domain). A
+  Figma file is the spec: read its tokens with `get_variable_defs` and map them per
+  `references/design-source.md` (section 1, step 6).
 - **No spec (default)** → apply the **neutral token set**: full-latin-ext fonts (Playfair Display for
   headings, Inter for body), a neutral grey/accent palette with every text pair ≥4.5:1, placeholder
   logo + `no-image` + social image, generic site name/description keys.

package/plugins/mobilems/skills/mobilems-project-init/references/design-source.md ADDED Viewed

@@ -0,0 +1,114 @@
+# Design source — Figma when it is in context, docs/mockups when the mockups live there
+Every `mobilems-*` skill that builds or restyles UI reproduces the museum's **approved design**. Use
+the design source that is in context — both are first-class:
+- **Figma in context** — a `figma.com` link or node in the prompt, the Linear issue / project
+  resources, or `docs/mockups/*.md` pointing to Figma → reproduce it through the Figma plugin
+  (section 1).
+- **Mockups in `docs/mockups/`** — PNG / MD exports stored in the repo → work from those directly
+  (section 2).
+- **Both** → Figma gives the tokens and the exact values (spacing, sizes, colours, assets); the
+  exports confirm the composition and which screens are approved.
+- **Neither** → ask the user for the design before styling; do not invent one.
+Each skill links here from its **Design source — MANDATORY** block.
+The Figma tools come from the official Figma plugin (`figma`, MCP server `figma`). Its own skills stay
+authoritative for how the tools are called — this file only says how a museum module uses them.
+## 1. Figma in context → reproduce through the Figma plugin
+Figma is in context when the user gives a `figma.com` URL, or when `docs/mockups/*.md` (or the Linear
+issue / project resources) lists Figma links for the screens of this module.
+1. **Load `figma:figma-design-to-code` first.** It is a **MANDATORY prerequisite** before calling
+   `get_design_context` — never skip it. Include `figma-design-to-code` in the `skillNames` parameter
+   of every `get_design_context` call. (Read-only work needs nothing else; `figma:figma-use` is only
+   for `use_figma`, i.e. writing to or scripting the file — a module skill does not do that.)
+2. **Parse the URL.** `figma.com/design/:fileKey/:fileName?node-id=:nodeId` → `fileKey`, and
+   `nodeId` with `-` converted to `:` (`12-345` → `12:345`). A branch URL
+   (`/design/:fileKey/branch/:branchKey/…`) uses `branchKey` as the `fileKey`. A URL without
+   `node-id` is not enough: ask the user for a node-specific link, or call `get_metadata` with only
+   the `fileKey` to list the pages and pick the frames from there — never guess a node id.
+3. **`create_session`** with the `fileKey` and a short description (e.g. "Build the objects list and
+   detail pages for <museum>") once the file key is known, before any other file tool. Pass the
+   returned UUID as `sessionId` on every following Figma call for this task.
+4. **Per screen / node** of the module (list, detail, each tab, filters panel, cards, mobile
+   variants):
+   - `get_design_context` (`fileKey`, `nodeId`, `clientFrameworks: angular`,
+     `clientLanguages: html,css,typescript`) — it is the primary tool. Keep its screenshot: that
+     render is the visual target the implementation must match.
+   - `get_screenshot` when the context response came back without one, and for the mobile frame.
+   - When the response is flagged as **sparse**, correlate its child node ids with the screenshot and
+     request the visible children in one parallel batch of `get_design_context` calls — implement
+     only from high-fidelity responses.
+   - `get_metadata` only for an overview of a large page (node ids, names, sizes).
+5. **`get_variable_defs`** on the screen (or the design-system frame) to read the design tokens —
+   colours, font families, sizes, spacing, radii.
+6. **Map tokens onto the museum's Tailwind config instead of hard-coding them.** Brand tokens live in
+   exactly two files (see `tailwind-styles.md` / `branding-reset.md`): `tailwind.config.js`
+   (`theme.extend.colors`, `theme.extend.fontFamily`, …) and `apps/web/src/styles.scss`
+   (`@font-face` + fallbacks). Add or reuse a named token for each Figma variable
+   (`primary.accent`, `fontFamily.heading`, …) and use the `smart-`-prefixed utilities
+   (`smart-text-primary-accent`, `smart-font-heading`). No raw hex values or arbitrary
+   `smart-[#3f5b76]` classes in templates when a token exists or can be added. A Figma colour that
+   fails WCAG contrast is mapped to the nearest compliant shade (`qa-hardening.md` §5) and the
+   deviation is recorded.
+7. **Adapt the reference code — never paste it.** `get_design_context` returns a React/Tailwind-like
+   prototype. Treat it as a high-fidelity non-interactive reference and translate it into the
+   module's Angular templates:
+   - **Framework first still applies.** The page/component logic comes from the framework base the
+     skill names (`ObjectsCatalogBaseComponent`, `ObjectDetailsBaseComponent`, `FiltersBaseComponent`,
+     `MasonryGridComponent`, `TabsBaseComponent`, …). The design only shapes the museum's own
+     template; it is never a reason to re-implement a base, a grid or a filter state.
+   - Reuse the app's shared components (`libs/shared/angular`) and the module's list/grid items
+     before writing new markup; a design element that matches an existing component is that
+     component, restyled if needed.
+   - Translate absolute positioning into flex/grid layout with `.smart-container` and responsive
+     `smart-` breakpoints; implement the interactive parts (links, buttons, tabs, filters) as
+     interactive, keyboard-reachable code.
+   - Copy only static assets (icons, illustrations, logos) — download them as the
+     `get_design_context` response describes, store them under `apps/web/public/`, and leave no
+     temporary Figma asset URLs in code. Images that come from the API (object photos, article
+     covers) stay dynamic; the design's sample photos are placeholders.
+   - Every visible string goes through a translation key in `pl` and `en` — the design's text is
+     the source of the Polish value, not a literal in the template.
+## 2. Mockups in `docs/mockups/` → work from the exports
+When the approved mockups live in `docs/mockups/` (PNG exports, often with an `.md` describing the
+screens), use them directly:
+- Read the exports (Read the PNGs and the `.md`) — do not guess from a link you cannot open. If the
+  `.md` links Figma nodes, section 1 applies as well (see "Both" above).
+- Note the container width, heading scale, spacing rhythm, card layout and the mobile variant.
+- Map the colours and fonts you read onto the same Tailwind tokens as in section 1 step 6 — the token
+  rule is the same whichever source the design comes from.
+- Section 1 step 7's rules (adapt to the framework bases, reuse shared components, translation
+  keys) apply unchanged.
+If a Figma link is in context but the Figma MCP server is not connected or the file is not shared
+with the account, say so in the run report and work from `docs/mockups/` when the exports are there.
+## 3. Record the design source in the module's docs
+Write (or update) `docs/mockups/<module>.md` so the next run — and the tester — can find the same
+nodes:
+- the Figma **file key** and the file URL,
+- the **node ids** per screen (list, detail, tabs, filters, cards; desktop and mobile frames),
+- the **token mapping**: Figma variable → Tailwind token → `smart-` utility, plus any WCAG
+  deviation (Figma value → used value, why),
+- or, when the design came from the exports, which `docs/mockups/` files were used.
+## 4. Verify against the design
+- Render the page (`nx serve web` + the Playwright MCP / `flow:browser-capture`) at **1280 px** and
+  **390 px** wide and compare each with the `get_screenshot` of the matching desktop / mobile Figma
+  frame; when the design came from `docs/mockups/`, compare with the matching PNG export.
+- Check layout, spacing, type scale, colours (through the tokens), asset placement and geometry,
+  and every state the design shows (empty, hover/focus, active tab, open filters).
+- Fix every in-scope mismatch; note — do not alter — pre-existing mismatches outside the module.
+- Data-driven differences (real API text and images instead of the design's samples) are expected;
+  structural ones are not.

package/plugins/mobilems/skills/mobilems-project-init/references/shared-lib.md CHANGED Viewed

@@ -57,6 +57,8 @@ not as copies of the reference logic. The museum keeps its own template and styl
 stores (favorites, selection, downloads, recommended items) stay in the museum and reach the base
 through its hooks (`IFavoriteHooks`, `ISelectionActionsFavorites`, `IRecommendedSources`, the abstract `downloadCardsExport`).
+A share-link button (e.g. `share-results`, collection share) extends `ShareLinkBaseComponent` (`SHARE_LINK_COPIED_TIMEOUT`): implement `shareLinkUrl()`, bind `share()` and `copied()`, write the markup yourself.
 The same applies to the foundation shared components `favorite-button`, `favorites-notice`,
 `selection-actions`, `download-cards` and `recommended`: extend `FavoriteButtonBaseComponent`,
 `FavoritesNoticeBaseComponent`, `SelectionActionsBaseComponent`, `DownloadCardsBaseComponent` and

package/plugins/mobilems/skills/mobilems-search/SKILL.md CHANGED Viewed

@@ -39,12 +39,36 @@ Forking a result card for search is the classic mistake: the card then drifts
 from the module's list and the museum ends up with two visually different
 representations of the same object.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the searchbar, the results frame and tabs, the result list item, the empty /
+no-results states and pagination.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/search.md`; compare the rendered page at 1280 px and 390 px with
+   `get_screenshot` (Figma) or the matching export.
 ## Steps
-1. **Read the mockup** in `docs/mockups/` — the searchbar and the result list
-   item are usually exported as separate design-system components rather than a
-   full screen, so match the component and keep the page layout consistent with
-   the rest of the portal.
+1. **Read the design** from the source in context (see **Design source —
+   MANDATORY** above): Figma nodes or the `docs/mockups/` exports. The searchbar
+   and the result list item are usually separate design-system components rather
+   than a full screen — request their nodes with `get_design_context` (Figma) or
+   find their exports, match the
+   component and keep the page layout consistent with the rest of the portal.
 2. **Tabs come from modules.** Each feature module registers a child route under
    `wyszukaj/:text` (its search module) and the page builds its tab list from
    what is registered. When a tab is missing, fix it in that module's skill

package/plugins/mobilems/skills/mobilems-static-pages/SKILL.md CHANGED Viewed

@@ -30,18 +30,42 @@ exists. Re-implementing it is a defect, not a shortcut:
    `node_modules/@smartsoft001-mobilems/angular/README.md`) — the framework API catalog
 2. `libs/shared/angular/README.md` — the app's own shared lib
-| Do not hand-roll | Use |
-| --- | --- |
-| a rich-text renderer for CMS body HTML | the page template's existing content block + widget map |
-| per-page galleries / sliders | the widget content-type components (`WIDGET` group) |
-| menu and footer links | the API menu configuration (see pitfalls — hardcoding them was a reported bug) |
-| meta/OG tags | `SeoService` / `MetaService` |
+| Do not hand-roll                       | Use                                                                            |
+| -------------------------------------- | ------------------------------------------------------------------------------ |
+| a rich-text renderer for CMS body HTML | the page template's existing content block + widget map                        |
+| per-page galleries / sliders           | the widget content-type components (`WIDGET` group)                            |
+| menu and footer links                  | the API menu configuration (see pitfalls — hardcoding them was a reported bug) |
+| meta/OG tags                           | `SeoService` / `MetaService`                                                   |
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the CMS page template (hero, body, image, links, slides) and the contact page.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/static-pages.md`; compare the rendered page at 1280 px and 390 px
+   with `get_screenshot` (Figma) or the matching export.
 ## Steps
-1. **Read the mockup.** Exports live in `docs/mockups/`; read them (Read) rather
-   than guessing from the Figma link. Note the container width, heading scale,
-   spacing rhythm and how the page header/hero differs from the module pages.
+1. **Read the design** from the source in context (see **Design source —
+   MANDATORY** above): Figma → `get_design_context` + `get_screenshot` for the
+   CMS page and contact frames, `get_variable_defs` for the tokens; exports in
+   `docs/mockups/` → read them (Read) rather than guessing from a link you cannot
+   open. Either way note the container width, heading scale, spacing
+   rhythm and how the page header/hero differs from the module pages.
 2. **CMS data — render everything the API sends.** The page payload carries more
    than a title and body: `image`, `backgroundImage`, `links`, `slides`.
    A field that arrives and is not rendered reads to the client as a missing

package/plugins/mobilems/skills/mobilems-thematic-publications/SKILL.md CHANGED Viewed

@@ -54,6 +54,27 @@ list — re-implementing framework code is a defect, not a shortcut:
 Anything the framework genuinely lacks goes into `libs/shared/angular` **once** (and into its
 README) — never a per-module copy. `scripts/verify-module.sh` fails the run on hand-rolled masonry.
+## Design source — MANDATORY: Figma when it is in context, docs/mockups when the mockups live there
+Reproduce the museum's approved design — from the source that is in context. Before writing or
+restyling any template, follow
+[`mobilems-project-init/references/design-source.md`](../mobilems-project-init/references/design-source.md).
+Screens here: the thematic paths list, the path detail and its cards.
+1. **Figma in context** (a `figma.com` link in the prompt, the Linear issue / project, or
+   `docs/mockups/*.md` pointing to Figma) → load the `figma:figma-design-to-code` skill (MANDATORY
+   before `get_design_context`), call `create_session`, then `get_design_context` + `get_screenshot`
+   per screen / node and `get_variable_defs` for the tokens.
+2. **Mockups in `docs/mockups/`** (PNG / MD exports) → read and reproduce those directly. Both exist
+   → Figma gives the tokens and exact values, the exports confirm the composition.
+3. **Tokens, not hex.** Map the design's colours, fonts and spacing onto the museum's
+   `tailwind.config.js` and use the `smart-` utilities — never hard-code them in templates.
+4. **Adapt, never paste.** Figma's code is a reference. The logic still comes from the framework
+   exports listed above (Framework first) — the design shapes only the museum's own templates.
+5. **Record and verify:** the source (Figma file key + node ids, or the export files) and the token
+   mapping go into `docs/mockups/thematic-paths.md`; compare the rendered page at 1280 px and 390 px
+   with `get_screenshot` (Figma) or the matching export.
 ## Steps
 1. **npm deps** — add `@smartsoft001-mobilems/articles-domain`,