Instruction file imported from ubc/tlef-engeai (.cursor/rules/frontend/01-css-master.mdc). Copyright stays with the author.

CSS Master

Styling playbook for Frontend Generator.

File layout

• Global: public/styles/style.css first
• Feature CSS: e.g. chat-components/, instructor-components/
• Page-specific only when many unique rules
• No inline styles or <style> blocks in HTML

Selectors

• kebab-case: .chat-message-container, .flag-report-row
• Optional BEM: .chat-message__copy-btn, .chat-message--pinned
• Remove unused rules; avoid generic .box, .item
• Shared modal components: see 03-catalog-modal-ui.mdc — one canonical BEM block per component, modifiers for variants, no dual-class alias stubs

Default policy

Suggest changes inside <styling_AI_suggest> only — user applies manually.

Orchestrator may set css_apply: implement in handoff for CSS-only tasks — then implement directly in .css files.

Scrollbars

Scrollable regions should use transparent scrollbar tracks — no opaque gutter or track background.

• Standard pattern: scrollbar-gutter: stable; scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
• WebKit: ::-webkit-scrollbar { background: transparent }, ::-webkit-scrollbar-track { background: transparent }, thumb rgba(0, 0, 0, 0.22) with border-radius: 4px
• Reference implementations: .message-area and .chat-list ul / .chat-list-ul in chat-feature.css and instructor-mode.css

Reference

• documents/RESPONSIVE_DESIGN.md