Nexus UI Mockups
SkillMediaDesign a Nexus UI change as a standalone mockup under docs/mockups/ before any production code, then hand it off as the visual contract a plan implements against. Use when asked for a new view, panel, modal, settings tab, chat surface, or layout refactor, when revising or superseding an existing mockup, or when a plan needs something visual to be blessed against.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Nexus UI Mockups skill
What this skill tells your AI
The instructions your AI receives, as published by profsynapse/nexus in .skills/nexus-ui-mockups/SKILL.md and read by ahel’s review.
Context: a mockup is a standalone HTML/CSS/JS page in docs/mockups/ that shows
a proposed Nexus surface before the plugin code exists. It is worth building only
if it looks like the real product and promises only what the plugin can actually
render; otherwise it is a drawing that costs a rewrite later. This router points
at the procedures — the detail loads when you take the path.
Workflow
- Decide the artifact. A new or substantially reshaped surface gets a mockup first. A tweak inside an existing layout does not — say so and implement.
- New mockup: follow
protocols/build-mockup.mdstep by step. - Existing mockup to change, supersede, or retire: follow
protocols/revise-mockup.mdfirst — you MUST NOT overwrite a mockup a plan already cites as its visual contract. - Before showing anyone: run
python3 .claude/skills/nexus-ui-mockups/scripts/check_mockup.pyfrom the repo root and fix every error it prints. Nothing else in the repo checks mockups —eslintand the build both ignoredocs/. - Implementation is a separate job under
src/, governed by CLAUDE.md's hard rules and the sibling skills (nexus-mobile-compatfor phone and plugin-store constraints,nexus-agentsfor tools behind the UI,nexus-testingfor proving it in the running plugin). Mockup-only liberties never travel there.
Map
references/fidelity.md— how to make it look like Obsidian and like Nexus: the token block, both themes, production class naming, icons, phone widths.references/honest-mockups.md— keeping the mockup buildable: Obsidian form primitives, labelling simulation, flagging what will not ship as drawn.references/handoff.md— serving it, review, blessing it as a plan's visual contract, and what happens to it after the UI ships.protocols/—build-mockup.md,revise-mockup.md,self-refine.md.scripts/—check_mockup.py(validate a mockup),theme_tokens.py(extract the token set production actually relies on). Run them, do not reimplement.
Refine
At the end of a session that used this skill, run protocols/self-refine.md.
Signals
- GitHub stars
- 153
- Forks
- 19
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
nexus-ui-mockups- Source
- github.com/profsynapse/nexus