What navigation patterns does this skill support?

It supports a wide range of industry-standard patterns including sidebars, top bars, tab bars, navigation rails, hamburger menus, breadcrumbs, and command palettes.

Can I see the designs it generates visually?

Yes, it creates self-contained HTML wireframes that allow you to see the navigation structure and how it functions across different screen states in your browser.

How does the evaluation process work?

It evaluates options against specific criteria including Reachability (clicks to destination), Wayfinding (location clarity), Scalability, and Screen Real Estate usage.

What is the 'Critique Loop' mentioned in the documentation?

The Critique Loop is a structured iterative process where the AI first diverges by providing multiple distinct options and then converges by refining a selected path based on your feedback.

How does it handle different platforms like iOS or Android?

The skill references platform-specific conventions from the design brief to ensure layouts respect native behaviors, such as iOS bottom tabs or Android navigation drawers.

Navigation Architecture Design Crit

Name: Navigation Architecture Design Crit
Author: metedata

bymetedata

0•

设计工具

Generates and evaluates diverse navigation patterns for applications through interactive HTML wireframes and structured UI/UX critiques.

The crit-navigation skill empowers developers and designers to architect intuitive user journeys by generating multiple navigation models—from persistent sidebars to mobile-first tab bars. It analyzes screen inventories to recommend specific patterns based on destination counts and platform conventions for iOS, Android, and Web. By providing a structured 'critique loop,' the skill allows users to iteratively refine an application's skeleton based on data-driven metrics like reachability, wayfinding clarity, and long-term scalability.

主要功能

01Iterative convergence logic to refine navigation models based on user feedback

020 GitHub stars

03Automated generation of diverse navigation patterns (Sidebar, Tab Bar, Rail, etc.)

04Interactive HTML wireframe artifacts for side-by-side visual comparison

05Platform-specific guidance tailored for iOS, Android, and Desktop Web conventions

06Quantified reachability analysis measuring click-depth for primary destinations

使用场景

01Architecting the primary navigation for a new multi-screen SaaS dashboard

02Converting a complex web hierarchy into a mobile-friendly tab bar system

03Evaluating wayfinding efficiency for power-user tools using command palettes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-navigation

For use in Claude.ai and ChatGPT

Download Skill