frontend-implementation

Files (1)

• SKILL.md

SKILL.md (first lines)

# Frontend Implementation

This skill provides comprehensive guidance for building modern frontend applications with React, Vue, and JavaScript.

## React Development

### 1. Component Architecture
```typescript
// Good: Small, focused components
import React, { useState, useEffect } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled || false}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {label}
    </button>
  );
};

// Bad: God component doing too much
export const SuperComponent: React.FC = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Too many responsibilities
  return (
    <div className="super-component">
      {/* 200 more lines */}
    </div>
  );
};
```

### 2. Custom Hooks
```typescript
import { useState, useEffect, useCallback, useRef } from 'react';

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(initialValue);

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      if (item) setStoredValue(JSON.parse(item));
    } catch (error) {
      console.error(`Failed to load ${key}:`, error);
    }
  }, [key]);

  const setValue = useCallback((value: T) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  }, []);

  return [storedValue, setStoredValue];
}

// Usage
function UserProfile() {
  const [user, setUser] = useLocalStorage<User>('user', null);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => setUser(null)}>Logout</button>
    </div>
  );
}
```

### 3. Performance Optimization
```typescript
import React, { memo, useMemo, useState } from 'react';

// Memo: Prevent unnecessary re-renders
const ExpensiveComponent = memo(({ data }: { data: any[] }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

// useMemo: Cache expensive calculations
const List = ({ items }: { items: number[] }) => {
  const sortedItems = useMemo(() => {
    return items.slice().sort((a, b) => a - b);
  }, [items]);

  return <ul>{sortedItems.map((i) => <li key={i}>{i}</li>)}</ul>;
};

// Lazy loading with React.lazy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </React.Suspense>
  );
}
```

From yasinnerten/temporal-openai-agents-sdk, Apache-2.0.

More from yasinnerten/temporal-openai-agents-sdk