structure-app

Structure an app around objects when starting a complex app from scratch, existing navigation feels messy, users can't find things, or the IA is getting worse as features are added. Use Object-Oriented UX to design around nouns, not verbs.

$ 安裝

git clone https://github.com/rohunvora/my-claude-skills /tmp/my-claude-skills && cp -r /tmp/my-claude-skills/.claude/skills/structure-app ~/.claude/skills/my-claude-skills

// tip: Run this command in your terminal to install the skill


name: structure-app description: Structure an app around objects when starting a complex app from scratch, existing navigation feels messy, users can't find things, or the IA is getting worse as features are added. Use Object-Oriented UX to design around nouns, not verbs.

Structure App Around Objects (OOUX)

When to Use

Activate when the user describes:

  • Starting a new complex app
  • Apps with multiple related data types
  • Products where users manage "things"
  • Navigation feeling messy
  • Users can't find things
  • Information architecture getting worse as features are added
  • Features scattered across the interface
  • Same data shown inconsistently across screens
  • Rebuilding a messy existing app

Skip when:

  • Building simple single-purpose tools
  • Creating marketing/content sites
  • Hierarchy matters more than objects

Instructions

The Core Idea

Design around NOUNS (objects), not VERBS (tasks).

Bad: "What screens do we need?" → disconnected features Good: "What objects exist?" → coherent structure

Step 1: Extract Objects

List every NOUN in the product. These are the "things" users think about:

OBJECTS IN THIS SYSTEM:
- [Object 1] (e.g., Project)
- [Object 2] (e.g., Task)
- [Object 3] (e.g., User)
- [Object 4] (e.g., Comment)
- [Object 5] (e.g., File)

Tip: Look at database tables, user stories, or how users talk about the product.

Step 2: Define Each Object

For each object:

OBJECT: [Name]

Core Properties:
- [property]: [type]
- [property]: [type]

States:
- [state 1] (e.g., draft, published, archived)
- [state 2]

Actions:
- [action] (e.g., create, edit, delete)
- [action] (e.g., assign, share, duplicate)

Step 3: Map Relationships

RELATIONSHIPS:
[Object A] ──has many──▶ [Object B]
[Object B] ──belongs to──▶ [Object A]
[Object C] ──can attach to──▶ [Object A] or [Object B]

Types:
- Has many / Belongs to (Project has many Tasks)
- Has one / Belongs to (Task has one Assignee)
- Many to many (Users ↔ Projects)

Step 4: Identify Core vs Supporting

CORE OBJECTS (get their own screens):
- [Object]: [why it's core]
- [Object]: [why it's core]

SUPPORTING OBJECTS (appear within core screens):
- [Object]: [supports which core object]
- [Object]: [supports which core object]

Step 5: Derive Screens from Objects

For each CORE object:

OBJECT: [Name]

SCREENS:
- LIST VIEW: See all [Objects], filter/sort/search
- DETAIL VIEW: Everything about ONE [Object]
- CREATE/EDIT: Form to make or modify

DETAIL VIEW CONTAINS:
- All properties
- Related [Other Objects] (inline or linked)
- Available actions
- State indicators

Step 6: Define Navigation

PRIMARY NAV (Core objects):
- [Object 1 list]
- [Object 2 list]
- [Object 3 list]

CONTEXTUAL NAV (when viewing object):
- Related [Object A]
- Related [Object B]
- Actions for this object

Output Format

IMPORTANT: Always use this exact format:

OOUX STRUCTURE

OBJECTS IDENTIFIED:
| Object | Type | Key Properties |
|--------|------|----------------|
| [Name] | Core | [props] |
| [Name] | Core | [props] |
| [Name] | Supporting | [props] |

RELATIONSHIPS:
[Object A] ──relationship──▶ [Object B]
[Object A] ──relationship──▶ [Object C]

SCREEN STRUCTURE:
- /[objects] → List of [Object]
- /[objects]/:id → [Object] detail
- /[objects]/:id/[related] → Related items

NAVIGATION:
Primary: [Object 1] | [Object 2] | [Object 3]
Contextual: Defined by object relationships

The "OOUX Structure" with Objects/Relationships/Screens is the signature of this methodology.

Anti-Patterns to Avoid

  • Feature-based nav: "Reports", "Analytics", "Settings" as top-level
  • Verb-based screens: "Create Task" as destination instead of modal
  • Orphan data: Showing data where users can't act on it
  • Inconsistent objects: Same object looking different in different places