prototype: Compare candidate opening surfaces

[intelligentrascal]

Question

What should Skill Manager's default opening surface be for the human fleet operator?

Reference pass

Before building the prototype variants, run the reference-driven design workflow rather than inventing a direction from the current screen:

• Use npx -y mobbin-axi for real product UI references. Pull web screens and sections with specific queries, use --download, view the actual images, and cite every reference used with its returned Mobbin URL. Do not infer a design from result titles alone.
• Review 21st.dev, Land-book, and Magic UI as explicit sources for component, landing-page, and motion inspiration.
• Use the existing Outline reference shelf as additional input: AuxUI Resources, OpenCode Resources, Skills, and Customizations. Relevant candidates include Awwwards, TypeUI, FOREVER, TheGallery, and Hallmark.
• Distill the references into one committed direction and concrete tokens or a small moodboard artifact. Borrow interaction and layout patterns, not brand identity or copied screens.

Image-quality floor

• Diagnostic vision probes must be at least 32x32 pixels, or 1,024 total pixels. Tiny 8x8 probes are invalid for providers with minimum-image-size checks.
• Reference and prototype images must be at least 1,024 pixels wide, with 1,440 pixels or more preferred for UI detail review.
• Preserve downloaded reference files at their source resolution. Do not upscale a lower-resolution Mobbin download and describe it as high fidelity.
• Measure the actual dimensions of every downloaded reference. In the sampled Mobbin AXI call, the MCP short URL and cached --download file were identical 768x521 or 768x523 WebP files, and the wrapper performed no resizing. Do not assume this is Mobbin's maximum quality: if the Mobbin website or an underlying asset exposes a higher-resolution version, prefer it and record the dimensions; otherwise use the MCP image for composition and interaction patterns and supplement typography/detail review with higher-resolution captures from the reference site or the prototype itself.
• Prototype review captures should target at least a 1,280px viewport width, preferably 1,440px or more.

Prototype

Create a throwaway UI prototype that lets the user compare three shells using the same representative tasks and data:

• Attention-first: open on health, uncertainty, drift, pending reviews, and next safe actions.
• Browse/catalog-first: open on the complete skill inventory and fleet overview.
• Skill-workspace-first: open on a selected skill and its provenance, evidence, variants, and operations.

Use the approved reference direction and the current dark Genome language as inputs, but make the differences in hierarchy, navigation, density, and action discoverability obvious. Exercise at least drift diagnosis, explain, origin assignment, adaptation review, and verified apply. The prototype must be clearly throwaway, easy to run, and linked from this issue when complete.

Resolve the ticket through live human reaction: choose the default shell, record the rationale, and identify any elements borrowed from the other two shells and from the reference pass. Do not implement production UI here.

[intelligentrascal]

Updated this prototype ticket to make the reference-driven design pass explicit before the three shell variants.

The agent must:

• Use npx -y mobbin-axi to pull and view real web UI references, citing the returned Mobbin URLs.
• Review 21st.dev, Land-book, and Magic UI.
• Consult the existing Outline shelves: AuxUI Resources, OpenCode Resources, Skills, and Customizations.
• Distill the references into one direction and concrete tokens or a small moodboard before prototyping.
• Treat the references as inspiration for layout and interaction, not as screens to copy.

The prototype remains throwaway and human-in-the-loop. No production UI is authorized by this change.

[intelligentrascal]

Claiming this prototype ticket as the next frontier after the completed cross-category and direct-competitor research. I will begin with the required reference pass, then build the three throwaway opening-surface variants. This ticket will remain open until human reaction selects the default shell.

[intelligentrascal]

Added an image-quality floor to the prototype contract: 32x32 minimum for diagnostic probes, 1,024px minimum width for reference/prototype images, 1,440px preferred, and no upscaling of lower-resolution Mobbin downloads. Verified that the current Mobbin AXI download path returns roughly 768x521 WebP files and exposes no higher-resolution flag, so detail review must be supplemented with higher-resolution site or prototype captures.

[intelligentrascal]

Correction to the image-quality note: the sampled Mobbin MCP short URL and cached download were identical 768px-wide WebP files, and mobbin-axi performed no resizing. That does not prove Mobbin has no higher-resolution browser asset. The prototype agent must measure every asset, prefer the highest-resolution version available, and use a higher-resolution site capture when the MCP derivative is only 768px wide.

[intelligentrascal]

Prototype is ready for live reaction. This ticket stays open until a default shell is chosen.

Question still open: what should Skill Manager's default opening surface be?

Throwaway artifact (branch prototype/opening-surfaces, commit 25a6dcb):

• Open docs/prototypes/opening-surfaces/index.html from that branch
• Or serve it: python -m http.server 7799 --directory docs/prototypes/opening-surfaces
• Attention-first: http://127.0.0.1:7799/?variant=A
• Browse / catalog-first: http://127.0.0.1:7799/?variant=B
• Skill-workspace-first: http://127.0.0.1:7799/?variant=C
• Moodboard: http://127.0.0.1:7799/moodboard.html
• Branch tree: https://github.com/intelligentrascal/skill-manager/tree/prototype/opening-surfaces/docs/prototypes/opening-surfaces

Arrow keys and the bottom bar cycle shells. Same five tasks in every shell: diagnose drift, explain, assign origin, adaptation review, verified apply.

Direction used: dark Genome instrument; reasoned queue as the memorable move. References informed layout only.

Need: pick a default shell, plus anything to steal from the other two.

[intelligentrascal]

Correction: 7799 is already a Skill Manager instance. The throwaway prototype is on 7791.