| name | lgs-1920-studio-webawesome-ui |
| description | Build or style LGS1920 interfaces with Web Awesome 3, FontAwesome, project themes, drawers, toolbars, forms, menus, and responsive layout. |
WebAwesome UI
Use this skill for new or redesigned UI. Inspect nearby components, theme tokens, existing Web Awesome usage, and .aiassistant/rules/development-standards.md first.
Workflow:
- Reuse the closest existing Web Awesome component and interaction pattern.
- Keep layout responsive and consistent with the project drawer, toolbar, and on-map conventions.
- Use Web Awesome tokens and project CSS variables. Every new CSS custom property needs an English purpose comment.
- Preserve keyboard access, disabled and selected contrast, focus behavior, labels, and loading or error states.
- Use FontAwesome icons through the existing integration and add shortcut documentation when introducing shortcuts.
- Test the component at narrow and wide layouts and in light or dark theme contexts when relevant.
Do not introduce another component library, generic utility CSS, or inaccessible icon-only controls. Add focused interaction tests.
