ui-first-principles

Generates JTBD-driven UI field-priority decisions and gap reports from API field sets.

189|25|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/sd0xdev/sd0x-harness --skill ui-first-principles-sd0xdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-first-principles
Source: https://github.com/sd0xdev/sd0x-harness/tree/main/skills/ui-first-principles
Command: npx skills add https://github.com/sd0xdev/sd0x-harness --skill ui-first-principles-sd0xdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Deciding which API fields deserve primary placement on a screen is often ad-hoc and inconsistent. This Skill turns a scenario plus an API field set into a principled information-architecture analysis, producing a validated handoff document that downstream design work can consume directly. ## Core Features & Use Cases - JTBD and Principle-Anchored Analysis: Elicits functional, emotional, and social jobs, then anchors every field-priority decision to one of five principles (JTBD, CognitiveLoadTheory, HicksLaw, MillersLaw, ProgressiveDisclosure). - PII-Safe Pipeline: Redacts sensitive values before any LLM phase, then validates the final report with fingerprint and regex leak checks, retrying once on critical violations. - Anti-Pattern and Gap Detection: Flags whitelisted UI anti-patterns (e.g., too_many_primary, hidden_critical_info) and produces a bidirectional UI↔API gap report. - Use Case: Given a crypto transaction-confirmation scenario and a sample JSON payload, produce a handoff report with a field decision table, anti-pattern findings, and an information hierarchy that a frontend-design step can implement directly. ## Quick Start Run /ui-first-principles "transaction confirmation" --api fixtures/tx-confirm.json --domain crypto to generate a validated UI analysis handoff report.

Frequently Asked Questions about ui-first-principles

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

FAQPage Schema
How do I prioritize which API fields to show on a UI screen?▼

Provide a scenario name and a JSON sample of the API response. The skill runs JTBD analysis, assigns each field a priority (primary, secondary, on_demand, hidden) anchored to a cognitive principle, and outputs a field decision table plus an information hierarchy.

What is a JTBD analysis for UI design?▼

JTBD (Jobs-to-be-Done) analysis identifies the functional, emotional, and social jobs a user hires a screen to do. The skill uses these jobs to decide which fields earn primary placement and which should be deferred or hidden.

Does ui-first-principles handle sensitive data in API samples?▼

Yes. A redaction phase masks PII (email, phone, address, account IDs, credentials) before any LLM step, and a validator rescans the final report using fingerprints and regex checks to catch leaks, retrying once on critical violations.

Can I use a manual field list instead of a JSON API sample?▼

Not in v1. The --manual option is deferred to v2 because the redactor's KV-pair fallback masking breaks manual-list parsing. Always pass --api with a JSON sample file in the current version.

When should I not use ui-first-principles?▼

Do not use it for visual layout, color, or CSS work (use /frontend-design), post-build critique of existing UI (use /critique), or simplifying already-shipped flows (use /distill). It only produces pre-design information architecture.