portal-ux-patterns

Validates UI designs and deliverables against six committed Portal UX patterns with acceptance criteria.

Updated Jul 27, 2026
One-click install
npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-ux-patterns-arthurzizumbo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: portal-ux-patterns
Source: https://github.com/ArthurZizumbo/karisma-data/tree/main/.claude/skills/portal-ux-patterns
Command: npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-ux-patterns-arthurzizumbo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing and reviewing Portal UI flows without a shared, verifiable standard leads to inconsistent screens and degraded UX commitments. This Skill provides the six committed UX patterns (progressive disclosure, predictive insight cards, tool-call visibility, real streaming with stop, role-based workspaces, shared dashboard-chat state) with textual acceptance criteria so every screen, component, and UX deliverable (A2-A5) can be checked against a traceable QA gate. ## Core Features & Use Cases - Pattern Reference with Acceptance Criteria: Each of the six patterns includes a verifiable criterion (e.g., 3 depth levels with <=2 clicks, TTFT p50 < 700 ms, method label on every prediction card) backed by a cited research paper. - Traceability Table and QA Checklist: A pattern-to-paper-to-QA-gate table plus a checklist for reviewing any UI change, ensuring no pattern is degraded without a documented team decision. - UX Deliverable Guidance (A2-A5): Rules for journey maps, competitive analysis, high-fidelity prototypes (including empty, loading, error, and no-permission states), and SUS usability tasks derived from the verifiable criteria. - Use Case: When reviewing a new dashboard card, check it against the Predictive Insight Cards pattern to confirm it carries an honest method label such as "Liquidity risk +12% next month - linear projection on synthetic data" before it passes QA. ## Quick Start Review my new dashboard component against the six committed Portal UX patterns and tell me which acceptance criteria it fails.

Frequently Asked Questions about portal-ux-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify a UI implementation against the Portal UX patterns?

Check the change against the traceability table to identify which pattern it touches, then confirm it meets that pattern's verifiable criterion, such as 3 depth levels with at most 2 clicks for progressive disclosure or a method label on every predictive card.

What are the six committed UX patterns of the Portal?

The six patterns are progressive disclosure, predictive insight cards, tool-call visibility with explainable overlays, real streaming with stop, role-based workspaces with defaults, and shared dashboard-chat state. Each has an acceptance criterion and a backing research paper.

How should predictive forecasts be labeled in the dashboard UI?

Every prediction card must carry an honest method label, for example "Liquidity risk +12% next month - linear projection on synthetic data". Forecasts are always labeled as simulated, and a card without a label fails QA.

What acceptance criteria apply to streaming and stop in the chat?

Streaming must achieve TTFT p50 under 700 ms, and Stop must cancel the LLM call in milliseconds with a cleanup test proving no hanging tasks. A mid-stream error must offer retry without erasing the conversation.

When can a committed UX pattern be degraded or removed?

A pattern can only be degraded with a documented team decision, since the six patterns are the project's non-negotiable UX commitment. Any UI change must be reviewed against the traceability table first.