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
Decision gist · record as of 2026-07-06
Information Architecture helps you plan and document your site or app's structural organization before visual design begins. 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.
Use it when
- information-architecture helps you organize content hierarchy, define navigation patterns, map user flows, establish URL strategies.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
julianoczkowski/designer-skills/information-architecture
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
information-architecture/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Plan and document the structural organization of a website or app before visual design”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-flow walks you through the complete design process as a guided sequence, running each phase in order and waiting for confirmation before advancing. It orchestrates six core phases—from clarifying your thinking through building components—plus an optional design review, with the ability to skip phases you don't need and resume mid-project where you left off.
Design Brief walks you through a structured conversation to define a new feature or page, then scans your codebase for existing design tokens, components, and patterns. It produces a markdown brief that captures the problem, solution, design principles, aesthetic direction, and component inventory—ensuring your design extends rather than duplicates existing work.
This skill transforms a design brief into a structured task list where each item is a vertical slice—a complete, self-contained piece of work that can be built and verified independently. It scans your codebase for existing components and tokens, then orders tasks by dependencies, visual priority, and risk to keep your build moving forward efficiently.
This skill executes a comprehensive design review by comparing your built application against the design brief and aesthetic direction. It captures screenshots across responsive breakpoints, analyzes visual hierarchy and consistency, and produces a prioritized refinement list organized by severity.
This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format—whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy.
frontend-design generates working frontend code with intentional aesthetic direction, grounded in named design philosophies. Choose or describe a visual style—Scandinavian warmth, Swiss objectivity, Japanese restraint, Brutalist rawness, or others—and receive code that reflects that philosophy through typography, color, layout, and motion. The skill scans your codebase first to respect existing components and tokens.