Frontend Development Skill

PURPOSE

Modern frontend development with React, Vue, and performance optimization.

CORE COMPETENCIES

Frameworks:
├── React 19 (Server Components)
├── Vue 3 (Composition API)
├── Angular 18 (Signals)
└── Next.js / Nuxt

Styling:
├── Tailwind CSS
├── CSS-in-JS
├── CSS Grid/Flexbox
└── Responsive design

Performance:
├── Core Web Vitals
├── Code splitting
├── Lazy loading
└── Image optimization

CODE PATTERNS

React Component

import { useState, useCallback, memo } from 'react';

interface Props {
  items: Item[];
  onSelect: (id: string) => void;
}

export const ItemList = memo(function ItemList({ items, onSelect }: Props) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(
    () => items.filter(item => item.name.includes(filter)),
    [items, filter]
  );

  const handleSelect = useCallback((id: string) => {
    onSelect(id);
  }, [onSelect]);

  return (
    <div className="space-y-4">
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        className="w-full px-4 py-2 border rounded"
        aria-label="Filter items"
      />
      <ul role="list">
        {filteredItems.map(item => (
          <li key={item.id}>
            <button onClick={() => handleSelect(item.id)}>
              {item.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
});

TROUBLESHOOTING

ACCESSIBILITY

[ ] Semantic HTML
[ ] ARIA labels
[ ] Keyboard navigation
[ ] Color contrast
[ ] Focus management