ui-ux-guidance

Plan and validate UI/UX implementation across web and mobile platforms.

1|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/tyroneross/interface-built-right --skill ui-ux-guidance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-guidance
Source: https://github.com/tyroneross/interface-built-right/tree/main/.codex-plugin/skills/ui-ux-guidance
Command: npx skills add https://github.com/tyroneross/interface-built-right --skill ui-ux-guidance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the inconsistency and lack of rigor in UI/UX implementation by providing a deterministic framework for design, planning, and validation.

Core Features & Use Cases

  • Calm Precision Framework: Standardizes structural rules, content-to-chrome ratios, and mobile responsiveness.
  • Archetype Routing: Provides specific guidance for diverse surfaces like SaaS dashboards, editor workbenches, and AI agent chats.
  • Validation Contract: Defines clear, testable proof points for UI work, ensuring that every interactive element and visual target meets production standards.

Quick Start

Use the ui-ux-guidance skill to plan the interface structure and validation criteria for a new saas-dashboard project.

Frequently Asked Questions about ui-ux-guidance

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

FAQPage Schema
How do I validate UI/UX design consistency across web and mobile platforms?

To validate UI/UX design consistency, use a deterministic validation contract that defines testable proof points for interactive elements and visual targets. This framework ensures every interface meets production standards and platform-specific accessibility conventions.

What is the Calm Precision framework for interface design?

The Calm Precision framework for interface design standardizes structural rules, content-to-chrome ratios, and mobile responsiveness. It provides deterministic planning to maintain visual and functional integrity across diverse web and mobile surfaces.

How do I plan interface structures for different web archetypes like SaaS dashboards?

Plan interface structures for web archetypes like SaaS dashboards through archetype routing. This process classifies your specific surface, such as editor workbenches or AI agent chats, and applies established Mockup Gallery targets to guide the layout.

Does this UI/UX validation framework support both web and mobile platforms?

Yes, this UI/UX validation framework supports both web and mobile platforms. It enforces platform-specific design conventions and mobile responsiveness standards to ensure functional integrity and accessibility across all device surfaces.

How do I design interaction states for a new interface?

Design interaction states by applying a deterministic validation contract to your interface. This contract defines clear, testable proof points for every interactive element, ensuring that all state changes meet strict production standards.

When do I need a deterministic framework for UI/UX implementation?

You need a deterministic framework for UI/UX implementation when addressing inconsistency and lack of rigor in your design process. It provides structured rules for structural planning, archetype classification, and automated validation to ensure functional integrity.