其他

ui-context-and-scope

dembrandt/dembr…t-skills

Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.

  • 876 次安装
  • 174 星标
  • 收录于

安装命令

npx skills add https://github.com/dembrandt/dembrandt-skills --skill ui-context-and-scope

SKILL.md

UI Context and Scope

Users need to know three things at all times:

  1. Where am I? — current location in the product hierarchy
  2. What context am I in? — which section, record, or workspace is active
  3. What will my actions affect? — scope of changes before committing them

When these are unclear, users make mistakes, feel lost, and lose trust in the product.

Communicating Hierarchy with Visual Structure

Lines and Dividers

Horizontal rules and borders signal the boundary between sections. Use them to separate content areas that belong to different contexts — not just for decoration.

  • A line between a header and content says "the content below belongs to this header"
  • A sidebar border says "this is a different region with a different purpose"
  • Avoid overusing dividers — proximity and whitespace should do most of the work; dividers reinforce where space alone is insufficient