Guide the design of beautiful, accessible, systematic UI components. Auto-triggers when creating or restyling components in FE Designer mode.
Auto-trigger when:
codebase_search("design tokens OR theme OR --color- OR --space-")
codebase_search("component OR Button OR Card OR Modal")
Khi styling một component, KIỂM TRA xem có reference file phù hợp không:
references/buttons.mdreferences/forms-inputs.mdreferences/cards-containers.mdreferences/navigation.mdreferences/modals-dialogs.mdreferences/typography-patterns.mdreferences/layout-grid.mdCHỈ đọc reference file liên quan (1-2 files tối đa). KHÔNG đọc tất cả. Dùng ĐÚNG ✅ patterns từ reference. Tránh SAI ❌ patterns.
Before writing code, produce a brief spec:
Apply in this order:
Run the UI Critique checklist from ui-critique-discipline.md:
When component needs logic beyond styling:
switch_mode or new_task with context:
## Context
Design spec for [ComponentName] completed in FE Designer mode.
## Task
Implement component logic: [specific logic needed]
## Constraints
- Use provided styling hooks (CSS classes / custom properties listed above)
- Do not modify token values or styling approach
- Maintain semantic HTML structure as specified
## Expected Output
Working component with business logic integrated into the design spec
Detailed rules: .roo/rules-fe-designer/component-design-patterns.md
Visual standards: .roo/rules-fe-designer/visual-design-standards.md
Accessibility: .roo/rules-fe-designer/accessibility-standards.md
Self-critique: .roo/rules-fe-designer/ui-critique-discipline.md