Skip to content
Back to skills

Dialog Layout

ASecurity

Dialog furniture is drawn and aligned by the styled primitives: the title sits on a blue nameplate across the sheet's top edge, and the DialogActions dock at the foot puts the way out on the left and the actions on the right. A dialog has one way out, a button of its own. Applies when building or changing any dialog in src/components.

  • 5 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added September 20, 2026
developmentgoaws

Security analysis

A100/100

Scanned September 28, 2026

npx -y skills add lxsmnsyc/overwander --skill dialog-layout --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Dialog Layout?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Dialog Layout
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/lxsmnsyc-dialog-layout/badge)](https://www.skillsdirectory.com/skills/lxsmnsyc-dialog-layout)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: dialog-layout
description: >
  Dialog furniture is drawn and aligned by the styled primitives: the
  title sits on a blue nameplate across the sheet's top edge, and the
  DialogActions dock at the foot puts the way out on the left and the
  actions on the right. A dialog has one way out, a button of its own.
  Applies when building or changing any dialog in src/components.
---

The panel's furniture is drawn and aligned by the styled primitives in
`src/components/styled/dialog.tsx`, never per dialog. A dialog is a
white sheet on a soft edge with round, chunky corners and the game's
hard drop, and a handheld's name box on its frame.

- The **nameplate** carries the title, with `lead` as the face in it
  (drawn small, `HeadingPortrait` for a person or a place). It sits
  across the sheet's top edge, outside the part that scrolls.
- Under it the heading row holds the description on the left and
  `aside` on the right. A `quiet` dialog draws neither plate nor row,
  and names itself inside its own content (the catch sheet's bar, the
  safari's field box).
- `DialogActions` is the **dock**: a tinted strip the sheet ends on. The
  way out is written last and drawn first, on the left; the actions
  stand on the right in the order they are written.
- The optional `bar` row under the heading keeps its buttons to the
  **right**, where the rest of the game puts what can be done to a
  thing.

## Rules

- Use `Dialog` and `DialogActions` from `../styled` and the layout
  comes for free. Do not re-align them per dialog, and do not add
  alignment props to `DialogActions`.
- Write the way out (Close, Walk on, Never mind, Cancel, Keep it) last
  in `DialogActions`, so the main action always stands on the right. A
  dialog never has two ways out, and the heading carries no close
  button. Any other row pairing a way out with an action (an inline
  confirm) reads the same way: way out on the left.
- The main action is what the player came to the dialog to do. On an
  ended battle that is leaving it, so Leave battle is the primary on
  the right and Stay and look is the way out.
- Terms a player reads before pressing (price, what they carry,
  stakes) are chips, through `CounterTerms`.
- A control that belongs to the panel rather than its content goes in
  the dock beside the way out (the auction board's Add/Board toggle),
  not in the heading's `aside`.
- The safari is a battle screen rather than a form: a field, a textbox
  that narrates each throw, and a command menu of tiles in place of
  the dock. Its tiles follow the dock's order too: Run, and after an
  encounter Walk on, stand on the left.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…