ux-information-architecture

Name: ux-information-architecture
Rating: 7.8 (7 reviews)
Author: CANTAGESTUDIO

by CANTAGESTUDIO30GitHub

Creates ASCII diagrams for information architecture with clear symbols for pages, modals, and dynamic content. Useful for planning app navigation hierarchies before visual design. Includes practical patterns like hierarchical trees and follows IA design principles like the 3-click rule.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Target Audience

UX designers and product managers planning app navigation structures before visual design phase

10/10Security

Low security risk, safe to use

Clarity

Practicality

Quality

Maintainability

Innovation

Design

ux-designinformation-architectureascii-diagramswireframing

Compatible Agents

Claude Code

~/.claude/skills/

Codex CLI

~/.codex/skills/

Gemini CLI

~/.gemini/skills/

OpenCode

~/.opencode/skills/

OpenClaw

~/.openclaw/skills/

GitHub Copilot

~/.copilot/skills/

Cursor

~/.cursor/skills/

Windsurf

~/.codeium/windsurf/skills/

Cline

~/.cline/skills/

Roo Code

~/.roo/skills/

Kiro

~/.kiro/skills/

Junie

~/.junie/skills/

Augment Code

~/.augment/skills/

Warp

~/.warp/skills/

Goose

~/.config/goose/skills/

SKILL.md

UX Information Architecture

A skill that designs Information Architecture (IA) as ASCII diagrams.

When to Use

Designing overall screen hierarchy for apps/web
Defining navigation structures
Content classification and grouping
Creating sitemaps

IA Diagram Symbols

Hierarchy Nodes

[Root]              ← Top level (app/site)
 ├─[Section]        ← Section (category)
 │  ├─[Page]        ← Page
 │  │  └─[SubPage]  ← Sub page
 │  └─[Page]
 └─[Section]

Node Types

[Page Name]         ← Regular page
[[Core Page]]       ← Core page (emphasis)
(Modal/Overlay)     ← Modal/Overlay
{Dynamic Content}   ← Dynamic content
<External Link>     ← External link
[Page*]             ← Auth required

IA Structure Patterns

Hierarchical Tree

[Application]
 │
 ├─[Dashboard]
 │  ├─[Overview]
 │  └─[Statistics]
 │
 ├─[Projects]
 │  ├─[Project List]
 │  │  └─{Project Item}
 │  └─(New Project Modal)
 │
 └─[Settings]*
    ├─[Profile]
    └─[Security]

IA Design Principles

3-click rule: Major content reachable within 3 levels
Menu items: 7±2 recommended
Hierarchy depth: 4 levels or less recommended

Source: https://github.com/CANTAGESTUDIO/CosmicAtlasPacker#.factory~skills~ux-information-architecture

Content curated from original sources, copyright belongs to authors

Grade A

7.8AI Score

Best Practices

Checking...

Try this Skill

User Rating

USER RATING

0UP

0DOWN

Loading files...

WORKS WITH

Claude

Codex

Gemini