skills.rest
tyroneross
tyronerossCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/tyroneross/interface-built-right --skill web-design-router
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
mrodrigues1mrodrigues1

mobile-android-design

Implement Material Design 3 patterns in Android apps with Jetpack Compose.

Community
Intermediate
tyronerosstyroneross
1

mobile-web-ui

Enforce responsive design and touch target accessibility for mobile web interfaces.

Community
Intermediate
hoainam183hoainam183

redesign-existing-projects

Audit generic UI patterns and apply design fixes without rewriting architecture.

Community
Intermediate