UI Dev Guidelines

• responsive design - design for two views: (xs, sm) vs (md, lg, xl)
• configure color palatte and theme switcher for different apps
  • vuestic color palatte is not great.
• consistency in using colors
• consistency in using font weights and font size hierarchy
• consistency in using date and time formats
• Dark mode
• save user preferences to local storage as well as to db transparently
• accessibility (other than what we get from vuestic)
• prevent jerky view updates when loading page or changing state
  • may be because when the data is empty, height of the component is collapsed - have min heights?
  • use vuestic skeletons?
  • use Transition, TransitionGroup, KeepAlive, Suspense Built-in components?
• vue - fall through attributes to make components more useful and generic
• vuestic css config and custom overrides
• vuestic integration with tailwind - which classes does vuestic override?
• use pinia store only to get and set data, keep business logic out of stores

Tooling:

• vscode: A component's template and script is side-by-side panels
• vscode: cmd+click on a custom component in template should open it
• vscode: tailwind class completion disappears if backspace is pressed, only works when typing after a space.
• ESlint: warn deviations from vue conventions (ex: custom components should be used as <CustomComponent> and not as <custom-component>)
• git pre-commit lint checks all files - it should only lint files that are being commited.