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.