**Command**: `/oss-eval:ui`
Analyzes candidate libraries for UI integration, accessibility, and build pipeline compatibility.
/plugin marketplace add maxamillion/claude-oss-eval-plugin/plugin install maxamillion-oss-eval@maxamillion/claude-oss-eval-pluginCommand: /oss-eval:ui
Assess how each candidate integrates with existing or planned user interfaces, including component libraries, theming, accessibility, and frontend build pipelines.
Document the target UI environment:
## UI Context
### Current/Planned Stack
- **Framework**: <React/Vue/Angular/etc.>
- **Component Library**: <MUI/Chakra/etc.>
- **Styling Approach**: <CSS-in-JS/Tailwind/etc.>
- **Build Tool**: <Vite/Webpack/etc.>
- **State Management**: <Redux/Zustand/etc.>
### UI Requirements
- **Design System**: <existing system or new>
- **Accessibility**: <WCAG level required>
- **Responsive**: <breakpoints/requirements>
- **i18n**: <localization requirements>
- **SSR/SSG**: <requirements>
### Integration Points
- <where candidate integrates with UI>
- <data flow between backend and UI>
- <real-time requirements>
For each candidate:
## UI Integration: <Candidate>
### Official UI Support
| Aspect | Support Level | Details |
|--------|---------------|---------|
| React | ✅/⚠️/❌ | <official/community/none> |
| Vue | ✅/⚠️/❌ | <official/community/none> |
| Angular | ✅/⚠️/❌ | <official/community/none> |
| Svelte | ✅/⚠️/❌ | <official/community/none> |
| Vanilla JS | ✅/⚠️/❌ | <approach> |
### Component Integration
| Component Type | Availability | Quality |
|----------------|--------------|---------|
| Pre-built Components | ✅/⚠️/❌ | <assessment> |
| Headless Components | ✅/⚠️/❌ | <assessment> |
| Hooks/Composables | ✅/⚠️/❌ | <assessment> |
| State Bindings | ✅/⚠️/❌ | <Redux/Zustand/etc.> |
### Styling Integration
| Aspect | Approach | Compatibility |
|--------|----------|---------------|
| Theming | <approach> | <with design system> |
| CSS-in-JS | <support> | <styled-components/emotion> |
| Tailwind | <support> | <utility class approach> |
| CSS Modules | <support> | <scoping approach> |
### Build Integration
| Tool | Compatibility | Notes |
|------|---------------|-------|
| Vite | ✅/⚠️/❌ | <plugin/config needed> |
| Webpack | ✅/⚠️/❌ | <plugin/config needed> |
| esbuild | ✅/⚠️/❌ | <plugin/config needed> |
| Next.js | ✅/⚠️/❌ | <specific considerations> |
| Nuxt | ✅/⚠️/❌ | <specific considerations> |
## Accessibility: <Candidate>
### Built-in Accessibility
| Feature | Support | Evidence |
|---------|---------|----------|
| ARIA Labels | ✅/⚠️/❌ | <implementation> |
| Keyboard Navigation | ✅/⚠️/❌ | <implementation> |
| Focus Management | ✅/⚠️/❌ | <implementation> |
| Screen Reader Support | ✅/⚠️/❌ | <testing evidence> |
| Color Contrast | ✅/⚠️/❌ | <default theme> |
| Reduced Motion | ✅/⚠️/❌ | <media query support> |
### WCAG Compliance
| Level | Status | Gaps |
|-------|--------|------|
| A | ✅/⚠️/❌ | <specific issues> |
| AA | ✅/⚠️/❌ | <specific issues> |
| AAA | ✅/⚠️/❌ | <specific issues> |
### Accessibility Documentation
- <quality of a11y docs>
- <a11y testing guidance>
- <known issues/limitations>
## Interactive Features: <Candidate>
### Real-time Support
| Feature | Approach | Complexity |
|---------|----------|------------|
| WebSocket | <native/plugin> | <integration effort> |
| SSE | <native/plugin> | <integration effort> |
| Polling | <built-in pattern> | <configuration> |
| Optimistic Updates | <support> | <implementation> |
### Data Fetching Integration
| Pattern | Support | Integration |
|---------|---------|-------------|
| React Query | ✅/⚠️/❌ | <official adapter> |
| SWR | ✅/⚠️/❌ | <compatibility> |
| Apollo | ✅/⚠️/❌ | <GraphQL support> |
| Native fetch | ✅/⚠️/❌ | <approach> |
### Form Integration
| Library | Compatibility | Notes |
|---------|---------------|-------|
| React Hook Form | ✅/⚠️/❌ | <integration approach> |
| Formik | ✅/⚠️/❌ | <integration approach> |
| Native Forms | ✅/⚠️/❌ | <validation support> |
Create .oss-eval/phase-10-ui/ui-integration.md:
# UI Integration Analysis
Generated: <timestamp>
## UI Context Summary
<from Step 1>
## Integration Comparison
| Aspect | <Candidate A> | <Candidate B> |
|--------|---------------|---------------|
| Framework Support | X/5 | X/5 |
| Component Quality | X/5 | X/5 |
| Build Integration | X/5 | X/5 |
| Accessibility | X/5 | X/5 |
| Real-time | X/5 | X/5 |
| **Overall** | **X/5** | **X/5** |
## Detailed Analysis
### <Candidate A>
<from Steps 2-4>
#### UI Integration Score
| Dimension | Score | Weight | Weighted |
|-----------|-------|--------|----------|
| Framework Fit | X/5 | 25% | X |
| Component Quality | X/5 | 20% | X |
| Build Integration | X/5 | 20% | X |
| Accessibility | X/5 | 20% | X |
| Interactive Features | X/5 | 15% | X |
| **Total** | - | 100% | **X/5** |
### <Candidate B>
<same structure>
## Integration Effort Comparison
| Task | <Candidate A> | <Candidate B> |
|------|---------------|---------------|
| Initial Setup | X days | Y days |
| Component Development | X days | Y days |
| Styling Integration | X days | Y days |
| Accessibility Compliance | X days | Y days |
| **Total** | **X days** | **Y days** |
## UI-Specific Risks
| Risk | Candidate | Impact | Mitigation |
|------|-----------|--------|------------|
| <risk> | <A> | High/Med/Low | <approach> |
| ... | ... | ... | ... |
## Recommendations
### Best UI Integration
<candidate with strongest UI story>
### Integration Considerations
<specific items to address during implementation>
### UI Blockers
<any candidates with fundamental UI issues>
Before completing this phase, verify:
Update .oss-eval/config.json:
{
"phases": {
"10": { "status": "completed", "completedAt": "<timestamp>" }
},
"currentPhase": 11
}
Phase 10 Complete: UI integration analysis finalized.
Run
/oss-eval:coststo begin Phase 11 (Operational Cost Quantification).