information-architecture
This skill guides you through defining the structural skeleton of a product or site—the navigation, page hierarchy, URL patterns, and user flows that sit between your design brief and build phase. It examines your existing codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.
Information Architecture helps you plan and document your site or app's structural organization before visual design begins.
AI-generated summary based on this skill's SKILL.md
Install
julianoczkowski/designer-skills/information-architecture
git clone https://github.com/julianoczkowski/designer-skills
cp -r designer-skills/information-architecture ~/.claude/skills/information-architectureFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I plan the structure of my website with information-architecture?
information-architecture guides you through defining your site's structural skeleton—navigation, page hierarchy, URL patterns, and user flows. It examines your codebase, interviews you on key structural decisions, then generates a complete IA document with sitemaps, navigation models, content priorities, and growth strategies.
What does information-architecture help me organize?
information-architecture helps you organize content hierarchy, define navigation patterns, map user flows, establish URL strategies, and prioritize content across pages and sections. It creates reusable layout components and naming conventions to guide your build phase.
Can information-architecture map user flows and page structure?
Yes. information-architecture maps critical user paths through your product and defines page structure alongside navigation hierarchy. It helps you visualize how users move through your site and how pages connect logically before you begin visual design or development.
What outputs does information-architecture produce?
information-architecture generates a complete IA document including sitemaps, navigation models, content organization schemes, URL patterns, page hierarchies, user flow diagrams, reusable layout components, and growth strategies for your website or app.
When should I use information-architecture in my project?
Use information-architecture between your design brief and build phase. It sits at the structural planning stage, before visual design begins, to establish the skeleton your entire product will follow. It's ideal for new websites, apps, documentation sites, and product restructures.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
-
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. -
Explore the existing codebase to understand what structure already exists:
- Routing: Next.js
app/orpages/directory, React Router config, Vue
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
information-architecture/SKILL.md