What problem does it solve? Dense accounting desktop screens get degraded by generic UI advice written for marketing sites and mobile apps — oversized controls, hand-picked colours, full-width fields, and footer action bars that scroll out of view. This Skill supplies the concrete rules that hold for this application so screens stay dense, readable, and consistent with the framework theme. ## Core Features & Use Cases - Theme-token enforcement: mandates theme variables and .text-muted instead of hex literals or low-contrast opacity utilities, with contrast ratios cited for each rule. - Layout and form conventions: covers density, field widths, disabled vs read-only states, the renderForm() frame with top command panel, right-side filter panels, and self-explaining empty states. - Icon and accessibility rules: requires glyphs from the ui-kit icon set (catalogued in the bundled icons.md reference), SVG sizes in attributes, named icon-only buttons, and keyboard-reachable actions. - Use Case: When writing a new invoice edit form, apply the rules to compose fields via renderForm, size the code field to its content, place Save and Print in the top command panel with icons from the set, and verify the done-checklist before shipping. ## Quick Start Ask the assistant to review the markup of the form or list screen you are writing against the screen design rules before adding any colour, size, or spacing of your own.
