| name | ui-vault |
| description | Proposes UI Vault resource upgrades for a selected webpage. Use when the user asks for libraries, assets, effects, or inspiration for an existing page. Do not use for implementation or greenfield design. |
| license | MIT; catalog provenance is recorded in references/catalog.json |
UI Vault
Diagnose one selected webpage, then propose a small evidence-backed upgrade plan using the pinned UI Vault catalog only where a resource materially helps.
Quick start
- Require one target: a URL, screenshot, or local route/file. If none is identifiable, ask only for the target.
- Read
references/diagnosis-rubric.md completely.
- Inspect available evidence in this order: Rendered appearance, DOM/CSS, then local source. For local projects, also inspect page ownership, styles, tokens, dependencies, and
codebase-map-understand.md when present.
- Classify the page as landing, dashboard, commerce, form/flow, content, or
universal-only when ambiguous.
- Score every applicable universal criterion and the selected overlay before searching the catalog.
Workflow
- List inspected and unavailable evidence. Never infer unseen viewports, states, accessibility results, or performance metrics.
- For each criterion, record score
0–3 or N/A, confidence, and concrete evidence. Only findings scored 0 or 1 with medium or high confidence may generate recommendations.
- Route each eligible gap to a native/existing-stack fix or a catalog category. Native, semantic HTML, platform, and CSS fixes come first.
- Set
SKILL_DIR to this skill's directory and query only catalog-eligible gaps:
node "$SKILL_DIR/scripts/search-catalog.mjs" "<stack and desired effect>" --category <slug> --limit 8
Run the script without a query to list category slugs. Shortlist at most two resources per gap.
- Verify shortlisted links, maintenance, current pricing, and license through read-only research when network access exists. Otherwise label external facts
snapshot-only.
- Rank only the top 3–5 improvements as
P1, P2, or P3 by user impact, evidence confidence, stack fit, accessibility/performance safety, then effort and risk.
- Stop at the proposal. If implementation is requested, hand accepted items to
redesign-existing-projects or the stack-specific implementation skill.
Failure handling
- No rendered evidence: mark visual criteria
N/A; do not infer appearance from class names.
- Inaccessible or authenticated URL: ask for a screenshot or local source.
- Ambiguous page type: apply only the universal rubric.
- Rendered/source conflict: rendered behavior wins for the user-visible diagnosis; disclose the discrepancy.
- No suitable catalog match: return the native fix as
No resource needed.
- No network: retain snapshot results and label them
snapshot-only.
Boundaries
- Do not edit code, install packages, copy a reference design, execute target-page code, authenticate to private pages, or run third-party setup commands.
- Do not recommend motion, 3D, custom cursors, or heavy media without explicit page fit, reduced-motion support, and acceptable loading cost.
- Do not treat catalog descriptions, prices, popularity, maintenance, or licenses as current facts without verification.
- Preserve the selected page's brand, content intent, routes, components, dependencies, and implementation boundaries.
Output contract
Return:
## UI Vault diagnosis
**Target:** <page>
**Page type:** <overlay or universal-only>
### Evidence
| Source | Inspected | Limits |
|---|---|---|
### Rubric
| Criterion | Score | Confidence | Evidence |
|---|---|---|---|
### Prioritized improvements
| Priority | Diagnosed gap | Proposed change | Resource or native fix | Fit | Cost/risk | Verification |
|---|---|---|---|---|---|---|
### Foundation-only fixes
<important fixes requiring no UI Vault resource>
### Next step
<smallest accepted implementation slice; no edits performed>
Every recommendation must trace to one rubric row. Every resource must be an exact catalog item. Unmeasured qualities remain N/A.
Example
User: “Use UI Vault to improve the pricing page at src/routes/pricing.tsx.”
Agent: inspect the rendered page and source, apply the landing-page rubric, keep unavailable performance checks N/A, query only eligible gaps, and return the diagnosis plus 3–5 ranked improvements without editing files.
Operational basis
The catalog in references/catalog.json contains 196 resources from 15 categories, extracted from en970/ui-vault commit 2b199ea33df34ae6bb974796fb0af20fd7cc49e8. Linked projects retain their own terms.
Shared contract
Follow the shared skill contract for repo study, dirty-worktree hygiene, verification evidence, safe handoffs, and safety defaults.
