Librechat-Mobile: Skill for Claude Code

Small screens

"Small" means small effective width in dp. A narrow phone, a large font scale and a translation longer than English each shrink it, and they stack. Many breaks happen in German at 1.0x on an ordinary phone.

reference.md is the method. It holds:

• the test matrix and the trigger/control convention;
• how to judge a finding and the severity rubric;
• the defect classes C1–C11 with the fix each one gets;
• the approaches the user rejected;
• the rules every fix follows;
• what renders can't show.

Read it before any mode. The workflows hand it to every agent, so changing a rule there changes it everywhere.

Rules that hold in every mode

• Previews and renders, not simulators or devices. Layout is checked with committed @PreviewNarrowScreens previews: in Android Studio's preview pane while working, and as headless renders (harness/ + scripts/render.py) for the before/after record. Run a device or simulator pass only when the user asks for one. Name what renders can't show (WebViews, popups, iosMain, the keyboard) so the user can choose to check it.
• The user sees before/after renders of every fix before any PR exists. Batches stay on local branches until the user has reviewed the review page and made the design calls.
• Plan before code. Present design choices as options with a recommendation, including "leave it". Never shrink fonts to make things fit.
• The harness is never committed.
  • render.py apply edits a module's build file and adds a generated test.
  • render.py revert restores the build file byte for byte and deletes the generated test.
  • It doesn't undo the temporary internal on preview hosts and fixtures; revert those by hand.
  • render.py status <repo> must print nothing before any commit.
• Full :<module>:detekt, never detektMetadataCommonMain alone.
• One plain git command per Bash call; the session hook refuses compound ones.
• Commits and PRs carry no co-author, session or generated-by lines.