name: web-frontend-tests
skill: web-frontend
version: 1.0.0
cases:
  - id: async-state-handling
    description: Should require all four async states (loading, error, empty, success) not just success
    prompt: I'm building a component that fetches a list of products from an API and displays them. What states do I need to handle?
    expected:
      contains_any:
        - loading
        - error
        - empty
        - skeleton
      min_length: 80
    tags: [core, async]

  - id: no-any-props
    description: Should reject using any type for component props and recommend typed interfaces
    prompt: "My component receives data from an API and I'm not sure of the shape. Can I just type the props as any for now?"
    expected:
      contains_any:
        - unknown
        - interface
        - zod
        - type
        - strict
      not_contains:
        - "use any"
        - "is fine"
      min_length: 60
    tags: [core, typescript]

  - id: onclick-div-accessibility
    description: Should reject onClick on div without keyboard handler and recommend semantic button
    prompt: I have a card component with an onClick handler on a div. Is there anything wrong with this approach?
    expected:
      contains_any:
        - button
        - keyboard
        - semantic
        - role
        - accessible
        - ARIA
      min_length: 80
    tags: [core, accessibility]

  - id: component-single-responsibility
    description: Should recommend splitting a component that fetches, formats, and renders
    prompt: My UserDashboard component fetches user data, formats the dates, renders a table with sorting, and handles the empty state. It's getting long. How should I refactor it?
    expected:
      contains_any:
        - split
        - separate
        - single responsibility
        - hook
        - compose
        - focused
      min_length: 80
    tags: [core, composition]

  - id: image-layout-shift
    description: Should recommend explicit width and height on images to prevent layout shift
    prompt: My page has a large hero image and users are complaining that the page jumps when it loads. What's the fix?
    expected:
      contains_any:
        - width
        - height
        - layout shift
        - CLS
        - aspect-ratio
        - dimensions
      min_length: 60
    tags: [core, performance]

  - id: color-contrast-wcag
    description: Should require WCAG AA color contrast and non-color cues for error states
    prompt: I'm using red text on a white background to show form validation errors. Is that sufficient?
    expected:
      contains_any:
        - WCAG
        - contrast
        - color alone
        - 4.5
        - accessible
        - aria-invalid
      min_length: 60
    tags: [accessibility]

  - id: coding-easy-debounced-search
    description: "Coding challenge (easy): Write a custom React hook for debounced search"
    prompt: "Write a React custom hook called useDebounceSearch that accepts a search function and a delay. It should return an input value, a setter, and the debounced results. Cancel pending requests when the input changes. Include TypeScript types."
    expected:
      contains_any:
        - useState
        - useEffect
        - setTimeout
        - clearTimeout
        - debounce
      contains:
        - function
      not_contains:
        - "I can't write"
      min_length: 100
    tags:
      - coding-easy

  - id: coding-medium-accessible-dropdown
    description: "Coding challenge (medium): Implement an accessible dropdown component"
    prompt: "Write a React TypeScript dropdown/select component that is fully WCAG AA accessible. It should support: keyboard navigation (arrow keys, Enter, Escape, Home, End), proper ARIA attributes (role, aria-expanded, aria-activedescendant, aria-labelledby), focus management, and screen reader announcements. Support single selection with an onChange callback."
    expected:
      contains_any:
        - aria-expanded
        - role
        - onKeyDown
        - ArrowDown
        - Escape
        - focus
      contains:
        - function
      min_length: 200
    tags:
      - coding-medium

  - id: coding-hard-virtual-list
    description: "Coding challenge (hard): Build a virtualized list component"
    prompt: "Write a React TypeScript virtualized list component that can efficiently render 100,000+ items. It should support: variable row heights (measured dynamically), smooth scrolling with overscan, keyboard navigation, scroll-to-index API, and window resize handling. Only render items visible in the viewport plus an overscan buffer. Include proper cleanup of resize observers."
    expected:
      contains_any:
        - IntersectionObserver
        - ResizeObserver
        - scrollTop
        - offsetHeight
        - overscan
        - virtualiz
      contains:
        - function
      min_length: 300
    tags:
      - coding-hard