frontend\src\pages\bellcloud\devices\notes
frontend\src\pages\bellcloud\devices\DeviceForm.jsx
frontend\src\pages\bellcloud\mqtt


# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 


Read CLAUDE.md and DESIGN.md and use your /frontend-design for this task ! 

Build PAGE at PAGEURL

REFERENCE (logic only — do not copy styling): 
- Archive: ARCHIVEPAGEURL
- Use this ONLY to understand: API endpoints, data fields, user actions

DESIGN REFERENCE:
- Style guide: frontend/src/pages/dev/StyleGuide.jsx
- Match components, spacing, and patterns exactly as shown there
- Use only components from frontend/src/components/ui/
- Use only CSS token variables — no hardcoded values

When done, replace the <ComingSoon /> for this route in frontend/src/router/index.jsx


STITCH REFERENCE:
- frontend/src/_archive/stitch-references/PageName.html
- Use this as visual/layout inspiration for this specific page
- Translate the layout and visual structure into React using our design system
- Do not copy Stitch's inline styles — use our tokens instead


# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 


Apply the same glass effect as the DataTable and Card components to [component/page name].

Replace any solid background: var(--color-bg-*) with rgba(28, 32, 38, 0.30) (or 0.40 for elevated/nested surfaces)
Add backdrop-filter: var(--blur-modal) and -webkit-backdrop-filter: var(--blur-modal)
Replace any solid hover/active/selected background colors with their semi-transparent equivalents (rgba(49, 53, 60, 0.50))
Keep borders and shadows unchanged