#43056 docs: screens compose named layout containers instead of Box

https://rocketchat.atlassian.net/browse/ARCH-2587

Targets develop. The docs name APIs that #42974 adds (Stack, PopoverSurface, Icon color, FieldRow justify).

What

• docs/frontend/layout.md, new: screens compose named layout containers. Box is for building containers, not screens, and Fuselage components take no styling props.

  • A table of the existing containers by intent.
  • Recipes for forms, filter bars, actions and modals.
  • Where a new container lives and when it moves up: next to the screen, then apps/meteor/client/components, then ui-client, then Fuselage.

• docs/frontend/building-components.md, rewritten:

  • the props a component accepts: DOM/ARIA attributes plus declared variations with closed values, no BoxProps;
  • no outer spacing;
  • layout containers;
  • adding a variation.

  It drops the examples that taught the opposite, such as a component baking in its own margin and spreading Box props, and the outdated Storybook API.

• CLAUDE.md: indexes layout.md.

• Lock: scripts/scan-raw-layout.mjs, run in the lint job with --max 1166.

  • It counts the raw Box, div, span and section elements that screens under apps/meteor/client/views render, and fails when a change adds one.
  • Files in a layout/ folder are containers and are not counted; views/room/layout/RoomLayout.tsx already follows that convention.
  • A file it can't parse fails the scan rather than being skipped.

• Lock: scripts/scan-style-props.mjs (moved from #42974), run in the lint job with --max 914.

  • It counts every use of a Fuselage component that passes a styling prop it doesn't declare, and every element laid out by Margins/Scrollable, and fails when a change adds one.
  • 914 is the count on develop; #42974's migration takes it to 1.

Why

Measured on #42974's head, screens still open 1,632 raw Boxes in 718 files, with 889 distinct prop combinations: nearly every layout is ad hoc. The repeated intents map to a handful of containers: a row or column with gap, text style, an inset section, a page-width form, an empty state.

Follow-ups

• A Text component over the existing font-scale and text-color tokens. About 350 of those Boxes only set typography.

Summary by CodeRabbit

• Documentation

  • Updated the component-building guide with clearer guidance on component types, layout containers, props, spacing, and variations.
  • Added a layout guide with reusable container recommendations and examples for common screen patterns.

• Chores

  • Added automated checks that track raw layout elements and styling props in the frontend, with findings included in CI.