Skip to content
ThorbisInterface Guidelines (opens in a new tab)
Resources

Ecosystem

Large collections, discovery, deep records, relationships, or cross-device continuity.

SKILL.md.agents/skills/thorbis-ecosystem/

Follow the skill selection policy and shared Linear baseline. For mobile-app work, the Native contract (D-025) is required.

Scope and required context
Linear baseline: This skill specializes one part of Thorbis; it does not introduce another product grammar. Preserve quiet chrome, one dominant work region, structured density, stable action neighborhoods, contextual surfaces, visible keyboard paths, durable state, and role-adaptive mobile. Use the Thorbis × Linear pattern matrix only when the owning pattern is ambiguous.
Mobile platform gate (D-025): Every mobile-app task requires the Native contract, HIG-001–HIG-022, and relevant live Apple Human Interface Guidelines (opens in a new tab). Apple HIG governs iOS/iPadOS behavior over conflicting web/Linear rules. Cite rule IDs and topic URLs in specifications, component contracts, PRs, and release evidence. Android retains host conventions. Normative requirements and exceptions have one owner: Native.

Use this skill when the problem is not a single control but the comprehensibility of a large connected system: many records, modules, relationships, states, devices, or ways into the same work.

This skill is derived from Thorbis research into Xbox.com’s discovery and ecosystem patterns, combined with Thorbis’s existing Apple, Linear, shadcn, accessibility, and product rules. It imports grammar, never gaming costume.

Reference: content/design/XBOX_REFERENCE.md.

thorbis-ecosystem-SKILL.md

The premise

Do not make a large system look simple by pretending the system is small.

Make the next relevant part obvious.

Thorbis may contain CRM, properties, jobs, scheduling, communications, estimates, invoices, payments, inventory, finance, Sites, reporting, AI, fleet, media, and more. The interface must expose breadth progressively without turning the shell into a directory of everything.

First read, second read, third read

Design complex surfaces in levels.

First read, glance:

  • Where am I?
  • What matters now?
  • What needs action?
  • What is the state?

Second read, inspect:

  • metadata
  • relationships
  • timestamps
  • supporting context
  • secondary actions
  • history

Third read, intentional depth:

  • full record
  • audit trail
  • advanced configuration
  • automation
  • raw/technical detail

Do not make second- or third-read information compete with the first read.

Curate before the explorer

A database is not a home screen.

Before All, offer operationally useful subsets when they genuinely reduce hunting.

Jobs may expose: Needs attention, Today, Unassigned, Running late, Awaiting approval, Ready to invoice.

Customers may expose: Recently active, Needs follow-up, Outstanding balance, New leads.

Inventory may expose: Low stock, Needed today, Recently used, Awaiting delivery.

Then provide the complete searchable, sortable, filterable explorer.

A curated collection and a full explorer are different patterns. Do not render the same table twice at different heights.

Collection grammar

Prefer this information architecture when the domain is large:

overview / curated subset → complete explorer → record → related records

The user should be able to enter from a useful subset, widen to the complete dataset, inspect one object, and move into its relationships without returning to global navigation.

Recognition before reading

Every major entity needs a stable silhouette.

  • Customer: identity, name, state, contextual metadata.
  • Property: photo/map, address, property markers.
  • Job: trade/state, customer, location, schedule.
  • Invoice: amount, payment state, customer, due date.
  • Equipment: image, model, age, operational state.
  • Technician: identity, availability, current assignment.

Keep ordering stable. Do not reshuffle metadata per page because there is room.

Objects navigate to themselves

If an object is clearly a destination, the object is the link.

A job row opens the job. A property identity opens the property. A timeline event opens its source record. Do not add a redundant View button merely to make navigation possible.

Use real links for destinations. Preserve deep links, Back/Forward, Cmd/Ctrl+Click, middle-click, and open-in-new-tab.

Preserve the shell; adapt the workspace

The Thorbis shell stays recognizable. The workspace optimizes for the job.

  • Dashboard summarizes.
  • Dispatch operates.
  • Customer explains context.
  • Finance transacts.
  • Reports analyze.
  • Settings configures.
  • Canvas manipulates spatial systems.

Do not force all of them into one generic table/card/dashboard composition.

State must survive without color

Consequential state uses plain language plus structure, iconography, shape, or position. Color reinforces it.

A person with color-vision deficiency, a monochrome printout, or a low-quality field display must still distinguish Draft, Scheduled, Dispatched, En route, On site, Needs approval, Approved, Declined, Due, Paid, Overdue, and Canceled.

Do not create a second state language for a new module.

Brand color is scarce

Electric blue points. It does not paint.

Prefer it for:

  • focus
  • active navigation
  • selection
  • primary interaction
  • links
  • Thorbis identity
  • meaningful live emphasis

Do not use blue as generic decoration. Scarcity makes the accent feel more premium and more informative.

Relationships appear where they matter

A job can expose customer, property, technician, estimate, invoice, equipment, media, and communications contextually.

Do not add every relationship to the global sidebar.

The global shell answers “where can I work?” Context answers “what is connected to this thing?”

Deep records keep orientation

Every deep object keeps four things understandable as the user moves through it:

  1. identity
  2. state
  3. primary action
  4. local navigation

For records with many sections, show the most relevant local tabs and move the rest into predictable overflow/command access. Do not force 10–15 equal tabs into one horizontal strip.

Cross-device continuity

Change the interface for the device; preserve the state of the work.

A dispatcher can create a job on desktop, a tech can update it on mobile, a customer can approve through Portal, and the owner can review the result later. Those are different interfaces over the same work state.

Do not treat mobile as a separate product or a squeezed desktop. Do not lose context merely because the surface changed.

Direct manipulation for spatial work

For property scans, LiDAR, infrastructure graphs, site plans, AR, equipment maps, and vehicle inspection, prefer user-controlled manipulation:

  • pan
  • zoom
  • rotate
  • select
  • isolate
  • filter layers
  • jump to asset
  • inspect history

Animation can teach a transition. It must not replace inspection.

Content frames survive bad input

User content is hostile to visual perfection by accident.

Every media/content frame defines:

  • aspect ratio
  • crop / object position
  • overflow
  • fallback
  • loading state
  • missing state
  • contrast protection
  • long text behavior
  • filename behavior
  • error behavior

A poor property photo, huge logo, long customer name, malformed filename, or missing image must not break the surrounding product.

Actions use concrete verbs

Prefer Create estimate, Schedule job, Send invoice, Record payment, Add location, Assign technician, Call customer.

Avoid vague enterprise verbs when the concrete action is known. The label should predict the result.

Accessibility is component architecture

A component is not done until its relevant modes work:

  • keyboard
  • pointer
  • touch
  • visible focus
  • screen reader semantics
  • zoom/reflow
  • contrast
  • text scaling
  • reduced motion
  • non-color state

Use WCAG and WAI-ARIA as normative standards. Xbox Accessibility Guidelines are supporting research and examples.

Premium test

Premium is control, not ornament.

A premium Thorbis surface has:

  • fewer simultaneous focal points
  • stable object grammar
  • predictable state
  • restrained accent
  • strong content framing
  • immediate first read
  • optional depth
  • no visual panic when the dataset grows
  • no behavioral discontinuity across devices

Refuse

  • Gaming aesthetics imported literally
  • Promotional density inside operational work
  • Fake achievements, points, badges, or streaks
  • Carousels as the default operational collection
  • All-caps operational UI
  • Decorative neon/glow/angled motifs
  • Animation that delays work
  • Color-only state
  • A global nav item for every relationship
  • Blank database views when a useful curated entry point is obvious
  • A separate View button on every navigable object
  • Desktop layouts merely shrunk onto phones

Audit

  • First read answers location, priority, action, and state
  • Second-read detail is available without competing with the first read
  • Large collections have useful entry points and a complete explorer
  • Entity silhouettes are stable and recognizable
  • Navigable objects use real links
  • State is understandable without color
  • Electric blue is used as signal, not paint
  • Relationships are contextual rather than dumped into global navigation
  • Deep records retain identity, state, action, and local orientation
  • Device-specific UI preserves the same underlying work state
  • Spatial information is directly manipulable when inspection matters
  • Bad/missing user content cannot break the layout
  • Actions use concrete verbs
  • Accessibility modes are part of component acceptance

Two failures: revise before shipping.

Applied bookmark research

Reviewed 2026-09-06. These are Thorbis applications and review exercises, not replacements for DESIGN.md, COMPONENTS.md, or the owning skill. Linear remains the operational baseline. External advice that conflicts with the constitution stays out.

These worked examples are not a claim that the product behaviors have been implemented or verified.

Preserve the place as the collection grows

Owning skill: ecosystem.

Large customer, property, and inspiration collections become expensive to navigate when every inspection loses the current place.

Treat filters, selected records, scroll, and Back behavior as part of the task. Loading a child or optional panel should not reset the whole collection. A saved reference includes enough context to be useful when revisited.

Thorbis example: Open a property from a filtered customer list and return to the same filter and position. On the inspiration wall, reserve the media footprint and retain source credit even when the preview is unavailable.

Verify: Try refresh, Back and Forward, a direct record link, an empty result, a failed preview, and a long collection. Check that late data does not overwrite a draft or move the action under the pointer.

Do not import: No unbounded eager media, private information in shareable URLs, or a local-only storage promise borrowed from Copper.

Evidence: 7 Principles of Rich Web Applications (opens in a new tab); Component Architecture for React Server Components (opens in a new tab); Philosophy (opens in a new tab); Copper (opens in a new tab). Source access limits.

All 26 sources and review limits.

All skills

The bundle includes every skill. Use Resources to choose the smallest context for a task.

Loading search…

Loading search. You can close this message and keep reading.