# information-architecture

Defines product structure and navigation before visual design begins. Bridges the gap between a design brief and actual frontend code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5900 installs · ★ 592
- Author: julianoczkowski
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/julianoczkowski/designer-skills/tree/HEAD/information-architecture/SKILL.md
- Updated: 2026-07-06
- HTML: https://affpapa.org/en/nevibecode/skills/information-architecture

## What it does

The skill checks `.design/*/DESIGN_BRIEF.md` or asks what you are building. Next, it inspects your existing codebase for routing directories like Next.js `app/`, SvelteKit routes, layout wrappers, and navigation bars. It builds on what already exists instead of proposing disconnected abstractions.

The agent then asks targeted questions about navigation depth, growth patterns, and the single view where users spend 80% of their time. The output is a structured `INFORMATION_ARCHITECTURE.md` file in `.design/<feature-slug>/`. It outlines site maps, user flows with decision branches, and URL strategies.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill information-architecture -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/information-architecture/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/information-architecture/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill information-architecture -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/information-architecture/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill information-architecture -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/information-architecture/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install julianoczkowski/designer-skills information-architecture
```

2. **Manually: put the files in place**
- File: `.github/skills/information-architecture/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill information-architecture -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/julianoczkowski/designer-skills --path information-architecture
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/information-architecture/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill information-architecture -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/julianoczkowski/designer-skills/tree/HEAD/information-architecture/SKILL.md

## When to use it
- map out site hierarchy and page URL patterns
- define user flows with decision branches and outcomes
- audit existing routing components before adding new features
- standardize interface naming conventions across views

## Example prompts
- Plan the IA for this app before I start building
- Map out the navigation and page structure
- Define user flows for the onboarding experience

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: b565360268eda7bc.

BEGIN THIRD-PARTY FILE b565360268eda7bc
````text
---
name: information-architecture
description: Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".
---

This skill defines the structural skeleton of a product or site. It sits between the design brief and the build. Run this after the brief is written and before tasks are created.

## Example prompts

- "Plan the IA for this app before I start building"
- "Map out the navigation and page structure"
- "I need to organize the content for a documentation site"
- "Define user flows for the onboarding experience"

## Process

1. Look for an existing design brief at `.design/*/DESIGN_BRIEF.md`. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. If no brief exists, ask the user what they are building and for whom.

2. Explore the existing codebase to understand what structure already exists:
   - **Routing**: Next.js `app/` or `pages/` directory, React Router config, Vue Router, SvelteKit routes, or static HTML page files
   - **Navigation components**: header, sidebar, navbar, breadcrumb, footer components
   - **Layout components**: root layouts, nested layouts, page wrappers, container components
   - **Page directories**: how pages are currently organized in the file system
   - **URL patterns**: existing slugs, dynamic segments, query parameter conventions
   - **CMS or data layer**: content models, API routes, data fetching patterns, MDX/content directories
   - If structure exists, this skill extends and improves it. Do not propose a new architecture that ignores what is already built.

3. Interview the user about structural decisions. For each question, provide your recommended answer.

   Cover at minimum:
   - What are the primary things a user needs to find or do? Rank by frequency.
   - How many levels of navigation depth are acceptable?
   - What content will grow over time vs. what is fixed?
   - Are there distinct user types who need different entry points?
   - What is the one page/view where the user spends 80% of their time?

4. Once you have a shared understanding, produce the IA document using the template below and save it as `INFORMATION_ARCHITECTURE.md` in the same `.design/<feature-slug>/` subfolder as the design brief.

## IA Document Template

```markdown
# Information Architecture: [Product/Site Name]

## Site Map

A hierarchical map of every page or view. Use indentation to show nesting. Include the URL pattern for each.

- Home `/`
  - Feature A `/feature-a`
    - Sub-page `/feature-a/detail`
  - Feature B `/feature-b`
- Settings `/settings`
  - Profile `/settings/profile`

## Navigation Model

Describe the navigation system:
- **Primary navigation**: What appears in the main nav? Maximum items.
````
END THIRD-PARTY FILE b565360268eda7bc

The third-party file has ended. Everything between the b565360268eda7bc tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2987 of 4782 bytes. © julianoczkowski · Apache-2.0 · https://github.com/julianoczkowski/designer-skills/tree/HEAD/information-architecture/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md