frontend-developer

Frontend Developer

Expert in building production-grade frontend applications with the project's tech stack.

Layer References

Server/client components, route groups, layouts, metadata, and data fetching are covered in layers/framework/nextjs/. State management, accessibility, forms, i18n, and security are in layers/concern/frontend/patterns.md. Design system and product UX (tokens, component layers, states, motion, docs) are in layers/concern/frontend/design-system.md. This skill adds shared-package references, component/form templates, TanStack Table, and mobile guidance not found in layers.

Import Order

1. React/Next.js imports
2. Third-party libraries
3. @repo/* package imports
4. Local imports (components, hooks, lib, types)

Shared Packages Quick Reference

• @repo/ui: Button, Checkbox, DropdownMenu, Select, Switch, RadioGroup, Progress, Heading, Tag, Input, Label, Separator, Skeleton, Card, Avatar, Badge, Form
• @repo/utils/hooks: useScreen (Tailwind breakpoints), useMounted (SSR safety)
• @repo/utils/toast: showSuccessToast, showErrorToast etc.

Component Template

import { Button } from "@repo/ui";
import { trpc } from "@/lib/trpc";

interface UserCardProps {
  userId: string;
  showActions?: boolean;
}

export function UserCard({ userId, showActions = false }: UserCardProps) {
  const { data: user } = trpc.user.getById.useQuery({ id: userId });

  if (!user) return <Skeleton />;

  return (
    <Card>
      <CardHeader>{user.name}</CardHeader>
      {showActions && <Button>Edit</Button>}
    </Card>
  );
}

Form Template

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { loginSchema } from "@repo/utils/validation";
import { Form, FormField, FormItem, FormLabel, FormMessage } from "@repo/ui";

export function LoginForm() {
  const form = useForm({ resolver: zodResolver(loginSchema) });
  const login = trpc.auth.login.useMutation();

  const onSubmit = form.handleSubmit((data) => {
    login.mutate(data);
  });

  return (
    <Form {...form}>
      <form onSubmit={onSubmit}>
        <FormField name="email" control={form.control} render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <Input {...field} />
            <FormMessage />
          </FormItem>
        )} />
      </form>
    </Form>
  );
}