Frontend Orchestrator Skill

Purpose

Manages all frontend development tasks including React components, TypeScript implementation, Tailwind CSS styling, state management, and user interface testing.

Tier

Tier 0-2 - Pre-Launch to Growth

When to Use

• Building UI components
• Implementing user interactions
• Managing application state
• Styling and responsive design
• Frontend performance optimization

Technology Stack

Default Stack

framework: "React 18+"
language: "TypeScript (strict mode)"
styling: "Tailwind CSS"
state_management: "Context API / Zustand"
routing: "React Router v6"
build_tool: "Vite"
testing: "Vitest + React Testing Library"
e2e_testing: "Playwright"

Alternative Options

• Vue.js for simpler projects
• Next.js for SSR requirements
• Redux for complex state
• Material-UI for rapid prototyping

Component Architecture

Component Structure

// src/components/Payment/PaymentForm.tsx
interface PaymentFormProps {
  onSubmit: (data: PaymentData) => Promise<void>;
  initialData?: Partial<PaymentData>;
}

export const PaymentForm: React.FC<PaymentFormProps> = ({
  onSubmit,
  initialData
}) => {
  // 1. State management
  const [formData, setFormData] = useState<PaymentData>();
  const [errors, setErrors] = useState<ValidationErrors>();

  // 2. Effects and side effects
  useEffect(() => {
    // Initialize or fetch data
  }, []);

  // 3. Handlers
  const handleSubmit = async (e: FormEvent) => {
    // Validation and submission
  };

  // 4. Render
  return (
    <form onSubmit={handleSubmit}>
      {/* Form content */}
    </form>
  );
};

Component Types

1. Presentational: UI only, no business logic
2. Container: Business logic and data fetching
3. Layout: Page structure and navigation
4. Utility: Reusable helpers (modals, tooltips)

Development Process

1. Component Planning

component:
  name: "PaymentForm"
  type: "container"
  props:
    - name: "onSubmit"
      type: "function"
      required: true
  state:
    - formData: "PaymentData"
    - loading: "boolean"
    - errors: "ValidationErrors"
  dependencies:
    - "ValidationService"
    - "PaymentAPI"

2. Implementation Steps

1. Create component file structure
2. Define TypeScript interfaces
3. Implement component logic
4. Add Tailwind styling
5. Write unit tests
6. Create Storybook story
7. Test accessibility
8. Optimize performance

3. Testing Requirements

// All 8 test types required
describe('PaymentForm', () => {
  // 1. Valid: Happy path
  test('submits valid payment data', async () => {});

  // 2. Error: Network failures
  test('handles API errors gracefully', async () => {});

  // 3. Invalid: Input validation
  test('rejects invalid card numbers', () => {});

  // 4. Edge: Boundary conditions
  test('handles empty form submission', () => {});

  // 5. Functional: Business logic
  test('calculates fees correctly', () => {});

  // 6. Visual: UI rendering
  test('displays error messages', () => {});

  // 7. Performance: Speed tests
  test('renders within 100ms', () => {});

  // 8. Security: XSS prevention
  test('sanitizes user input', () => {});
});

State Management Patterns

Context API (Simple)

const PaymentContext = createContext<PaymentContextType>();

export const PaymentProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(paymentReducer, initialState);

  return (
    <PaymentContext.Provider value={{ state, dispatch }}>
      {children}
    </PaymentContext.Provider>
  );
};

Zustand (Medium complexity)

const usePaymentStore = create<PaymentStore>((set) => ({
  payments: [],
  loading: false,

  fetchPayments: async () => {
    set({ loading: true });
    const payments = await api.getPayments();
    set({ payments, loading: false });
  },

  addPayment: (payment) =>
    set((state) => ({
      payments: [...state.payments, payment]
    }))
}));

Styling Standards

Tailwind Classes Organization

// Group by: layout → spacing → typography → colors → effects
<div className="
  flex flex-col items-center justify-between
  p-4 mt-6 mb-2
  text-lg font-semibold
  text-gray-800 bg-white
  rounded-lg shadow-md hover:shadow-lg
  transition-shadow duration-200
">

Responsive Design

// Mobile-first approach
<div className="
  w-full px-4           // Base (mobile)
  sm:w-4/5 sm:px-6      // Small screens
  md:w-3/4 md:px-8      // Medium screens
  lg:w-2/3 lg:px-10     // Large screens
  xl:w-1/2              // Extra large
">

Performance Optimization

Code Splitting

const PaymentModal = lazy(() => import('./PaymentModal'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <PaymentModal />
    </Suspense>
  );
}

Memoization

const ExpensiveComponent = memo(({ data }) => {
  const processedData = useMemo(
    () => processData(data),
    [data]
  );

  const handleClick = useCallback(
    () => doSomething(processedData),
    [processedData]
  );

  return <div onClick={handleClick}>{/* content */}</div>;
});

Accessibility Standards

WCAG AA Compliance

// Semantic HTML
<button
  aria-label="Submit payment"
  aria-disabled={loading}
  aria-describedby="payment-error"
>
  {loading ? <Spinner aria-label="Processing" /> : 'Submit'}
</button>

// Error announcement
<div
  role="alert"
  aria-live="polite"
  id="payment-error"
>
  {error && <span>{error.message}</span>}
</div>

Keyboard Navigation

const handleKeyDown = (e: KeyboardEvent) => {
  switch(e.key) {
    case 'Enter':
    case ' ':
      handleSubmit();
      break;
    case 'Escape':
      handleCancel();
      break;
  }
};

File Structure

src/
├── components/
│   ├── common/           # Shared components
│   ├── features/         # Feature-specific
│   └── layouts/          # Page layouts
├── hooks/               # Custom React hooks
├── services/            # API and external services
├── stores/              # State management
├── styles/              # Global styles
├── types/               # TypeScript definitions
├── utils/               # Helper functions
└── __tests__/           # Test files

Quality Standards

• TypeScript strict mode: No

  any

  types
• Test coverage: > 80%
• Accessibility: WCAG AA
• Performance: < 1s initial load
• Bundle size: < 200KB gzipped
• Lighthouse score: > 90

Integration Points

• Receives from: main-orchestrator
• Communicates with: backend-orchestrator (APIs)
• Outputs to: test-orchestrator
• Updates: Component library, Storybook

Common Patterns

• Container/Presenter: Separate logic from UI
• Compound Components: Flexible component APIs
• Render Props: Share code between components
• Custom Hooks: Reusable logic
• Error Boundaries: Graceful error handling

Anti-Patterns to Avoid

• Direct DOM manipulation
• Inline styles (use Tailwind)
• Large component files (> 300 lines)
• Props drilling (use context)
• Unnecessary re-renders
• Missing error boundaries
• Ignoring accessibility