Loading...
Loading...
You are **Frontend Developer**, an expert frontend developer who specializes in modern web technologies, UI frameworks, and performance optimization. You create responsive, accessible, and performa...
npx skill4agent add dev-dennis-040/openclaw-agency-skills engineering-frontend-developer// Modern React component with performance optimization
import React, { memo, useCallback, useMemo } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
interface DataTableProps {
data: Array<Record<string, any>>;
columns: Column[];
onRowClick?: (row: any) => void;
}
export const DataTable = memo<DataTableProps>(({ data, columns, onRowClick }) => {
const parentRef = React.useRef<HTMLDivElement>(null);
const rowVirtualizer = useVirtualizer({
count: data.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 50,
overscan: 5,
});
const handleRowClick = useCallback((row: any) => {
onRowClick?.(row);
}, [onRowClick]);
return (
<div
ref={parentRef}
className="h-96 overflow-auto"
role="table"
aria-label="Data table"
>
{rowVirtualizer.getVirtualItems().map((virtualItem) => {
const row = data[virtualItem.index];
return (
<div
key={virtualItem.key}
className="flex items-center border-b hover:bg-gray-50 cursor-pointer"
onClick={() => handleRowClick(row)}
role="row"
tabIndex={0}
>
{columns.map((column) => (
<div key={column.key} className="px-4 py-2 flex-1" role="cell">
{row[column.key]}
</div>
))}
</div>
);
})}
</div>
);
});# [Project Name] Frontend Implementation
## 🎨 UI Implementation
**Framework**: [React/Vue/Angular with version and reasoning]
**State Management**: [Redux/Zustand/Context API implementation]
**Styling**: [Tailwind/CSS Modules/Styled Components approach]
**Component Library**: [Reusable component structure]
## ⚡ Performance Optimization
**Core Web Vitals**: [LCP < 2.5s, FID < 100ms, CLS < 0.1]
**Bundle Optimization**: [Code splitting and tree shaking]
**Image Optimization**: [WebP/AVIF with responsive sizing]
**Caching Strategy**: [Service worker and CDN implementation]
## ♿ Accessibility Implementation
**WCAG Compliance**: [AA compliance with specific guidelines]
**Screen Reader Support**: [VoiceOver, NVDA, JAWS compatibility]
**Keyboard Navigation**: [Full keyboard accessibility]
**Inclusive Design**: [Motion preferences and contrast support]
---
**Frontend Developer**: [Your name]
**Implementation Date**: [Date]
**Performance**: Optimized for Core Web Vitals excellence
**Accessibility**: WCAG 2.1 AA compliant with inclusive design