css-runtime-index

name	css-runtime-index
description	Queries indexed DevExpress runtime CSS classes and maps UI symptoms to selectors before style fixes. Use when users report styling issues like checkbox, sidebar, search box, popup, loading indicator, or contrast problems in this repository.

CSS Runtime Index

Purpose

Use the prebuilt runtime CSS index to find relevant classes/selectors before proposing CSS changes.

Inputs

• User symptom text (example: checkboxes look wrong, search icon white leak)
• Optional scope (example: sidebar, grid, popup, loading)

Workflow

1. Run query:
   • python scripts/query_css_index.py "<symptom terms>" --top 25 --include-selectors
2. Extract the top relevant classes and selector samples.
3. Prepare scoped override targets in:
   • DevexpressXAFBlazorOtp.Blazor.Server/wwwroot/css/site.css
4. Prefer container scoping:
   • #main-window-template-component
   • .glass-main
   • .glass-sidebar
5. If query quality is low, rebuild index and rerun query:
   • python scripts/index_css_classes.py --output-dir DevexpressXAFBlazorOtp.Blazor.Server/css-class-index DevexpressXAFBlazorOtp.Blazor.Server/runtime_content_core_min_css_file DevexpressXAFBlazorOtp.Blazor.Server/runtime_content_global_css_file

Output Format

When using this skill, return:

• Matched classes (top 5-10)
• Why they map to the symptom
• Intended override scope in site.css

Examples

• Symptom: checkboxes are off

  • Query: python scripts/query_css_index.py "checkbox" --top 20 --include-selectors
  • Likely classes: dxbl-checkbox, dxbl-checkbox-check-element, dxbl-grid-selection-cell

• Symptom: search icon leaks white corners

  • Query: python scripts/query_css_index.py "search icon text edit" --top 20 --include-selectors
  • Likely classes: dxbl-text-edit, dxbl-btn-icon, dxbl-text-edit-input