ai-sdlc-workflow: Skill for Cursor

Frontend Skills (Consolidated)

Use for React, Next.js App Router, components, data fetching, and forms. Tier 4: .cursor/skills/frontend-skills/advanced/*.md

Architecture

• Feature-based: src/features/[name]/{components,hooks,api,types}
• Global UI: src/components/{atoms,molecules,organisms}
• Presentational components — data/orchestration in custom hooks
• Shared types from @shared/types or Zod schemas — never duplicate DTOs

TypeScript

• No any — use unknown + guards or explicit interfaces
• Every component has a Props interface
• Align form schemas with backend validation (Zod + shared package)

React Server Components (default in App Router)

• Server Components: no directive — async components, server data fetch, zero client bundle for heavy libs
• Client Components: 'use client' only for state, effects, event handlers, browser APIs
• Server Actions: 'use server' for mutations — not for marking server components

// app/users/page.tsx — Server Component
export default async function UsersPage() {
  const users = await fetchUsers(); // server-only
  return <UserList initialUsers={users} />;
}

// UserList.client.tsx
'use client';
export function UserList({ initialUsers }: { initialUsers: User[] }) {
  const { data } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
    initialData: initialUsers,
  });
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Don't: use window, localStorage, or useState in Server Components.

Custom Hooks

• Prefix with use; call only at top level of React functions
• Extract: data fetching, form logic, subscriptions, side effects
• Avoid unnecessary useEffect — derive state in render; use useMemo only for expensive work

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  return { on, toggle: () => setOn(v => !v), setOn };
}

Data Fetching

Server (RSC)

• Fetch in Server Components or route handlers
• Use React.cache() for per-request dedup (primitive args only)
• Parallelize: Promise.all([fetchA(), fetchB()])