web-design-router

Classify web interfaces into archetypes to determine layout, navigation, and design patterns.

1|Updated Dec 30, 2025

Search Tags:#validation #design system #web design #ui architecture #archetype #ux planning

Ready to run

npx skills add https://github.com/tyroneross/interface-built-right --skill web-design-router

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-router
Source: https://github.com/tyroneross/interface-built-right/tree/main/skills/web-design-router
Command: npx skills add https://github.com/tyroneross/interface-built-right --skill web-design-router

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the ambiguity in web interface design by providing a deterministic classification system that ensures consistent layout, navigation, and validation strategies across different project types.

Core Features & Use Cases

Archetype Classification: Maps projects to specific archetypes like SaaS dashboards, editor workbenches, or commerce flows to apply tailored design rules.
Standardized Defaults: Enforces platform-specific best practices for navigation, density, and mobile responsiveness.
Validation Integration: Automatically generates validation criteria for design-intent.json based on the chosen archetype.
Use Case: When starting a new dashboard project, use this skill to define the navigation structure, content-chrome ratio, and mobile stacking strategy before writing a single line of code.

Quick Start

Use the web-design-router skill to classify this project as a saas-dashboard and generate the required design intent configuration.

Frequently Asked Questions about web-design-router

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

FAQPage Schema

How do I classify web interface archetypes for consistent UI design?▼

Classifying web interface archetypes involves mapping projects to specific types like SaaS dashboards or commerce flows to apply deterministic layout and navigation rules. This ensures consistent design patterns and standardized mobile-responsive defaults across different project types.

What is the best way to plan navigation and layout for a SaaS dashboard?▼

Planning navigation and layout for a SaaS dashboard requires classifying the project as a specific archetype to enforce platform-specific best practices. This determines the optimal navigation structure, content-chrome ratio, and mobile stacking strategy before writing any code.

How do I generate validation criteria for a web design system?▼

Generating validation criteria for a web design system requires applying a deterministic classification to the project archetype. This automatically produces validation rules for the design-intent configuration based on the chosen layout and navigation patterns.

How does deterministic UI architecture improve web application planning?▼

Deterministic UI architecture improves web application planning by removing ambiguity in interface design through a standardized classification system. This enforces consistent navigation, density, and mobile-responsive strategies tailored to the specific project archetype.

Can I use archetype classification for content sites and editor workbenches?▼

Archetype classification applies to content sites and editor workbenches by mapping them to tailored design rules. This enforces platform-specific best practices for navigation and density across various web application types.

What are the limitations of using a deterministic design routing system?▼

A deterministic design routing system limits flexibility by enforcing standardized defaults and specific archetype classifications. Projects requiring highly custom or unconventional interface designs may find these rigid navigation and validation constraints too restrictive.