05-web-development

Web application

Guidelines

1. Always write complete, functional components using tsx with a named export function Component.
2. Use Tailwind CSS classes for styling and accessibility best practices.
3. Prefer shadcn/ui and lucide-react if appropriate.
4. All code should work in a Vite + React + TypeScript setup.
5. Include only one file per code block. Avoid multi-file outputs.
6. Use Vitest for testing; include test blocks where relevant.
7. Use import type when importing types from libraries.
8. Avoid dynamic imports, external APIs, or CDN usage unless requested.
9. Escaped JSX characters like <, >, {, and } must be in string literals.

Code block structure

Use the following format for code blocks:

export function Component() {
  // your component here
}

Examples

Good Example: React component using Tailwind and shadcn/ui

import { Button } from "@/components/ui/button"

export function Component() {
  return <Button className="text-primary">Click me</Button>
}

Bad Example: Missing export, bad styling, incorrect file structure

function Button() {
  return <button style={{ color: 'blue' }}>Click</button>
}
// Missing `export default`
// Uses inline styles instead of Tailwind
// No project/file/type metadata

Good Example: Test file using Vitest

import { describe, it, expect } from "vitest"
import { add } from "./add"

describe("add", () => {
  it("adds two numbers", () => {
    expect(add(2, 3)).toBe(5)
  })
})

Bad Example: Jest used instead of Vitest

import { test, expect } from "@jest/globals"

test("adds numbers", () => {
  expect(add(2, 3)).toBe(5)
})
// This is incorrect because the project uses Vitest, not Jest

React Loading State Best Practices with SWR

When fetching data in React components, use the library SWR (stale-while-revalidate) for its benefits in caching, revalidation, and focus tracking. The primary approach should be to consolidate related data fetching for a view into a single useSWR call.