Cursor rule

1---
2description: Follow these rules when working on the frontend.
3globs: 
4---
5### Frontend Rules
6 
7Follow these rules when working on the frontend.
8 
9It uses Next.js, Tailwind, Shadcn, and Framer Motion.
10 
11#### General Rules
12 
13- Use `lucide-react` for icons
14- useSidebar must be used within a SidebarProvider
15 
16#### Components
17 
18- Use divs instead of other html tags unless otherwise specified
19- Separate the main parts of a component's html with an extra blank line for visual spacing
20- Always tag a component with either `use server` or `use client` at the top, including layouts and pages
21 
22##### Organization
23 
24- All components be named using kebab case like `example-component.tsx` unless otherwise specified
25- Put components in `/_components` in the route if one-off components
26- Put components in `/components` from the root if shared components
27 
28##### Data Fetching
29 
30- Fetch data in server components and pass the data down as props to client components.
31- Use server actions from `/actions` to mutate data.
32 
33##### Data Flow Architecture
34 
35Follow this layered architecture pattern:
36- **React Components** → **Server Actions** → **Services** (when complex logic is needed)
37- Services handle domain-specific logic, external API integrations, and complex business rules
38- Keep Server Actions lightweight and focused on data validation and orchestration
39 
40##### Server Components
41 
42- Use `"use server"` at the top of the file.
43- Implement Suspense for asynchronous data fetching to show loading states while data is being fetched.
44- If no asynchronous logic is required for a given server component, you do not need to wrap the component in `<Suspense>`. You can simply return the final UI directly since there is no async boundary needed.
45- If asynchronous fetching is required, you can use a `<Suspense>` boundary and a fallback to indicate a loading state while data is loading.
46- Server components cannot be imported into client components. If you want to use a server component in a client component, you must pass the as props using the "children" prop
47- params in server pages should be awaited such as `const { courseId } = await params` where the type is `params: Promise<{ courseId: string }>`
48 
49Example of a server layout:
50 
51```tsx
52"use server"
53 
54export default async function ExampleServerLayout({
55  children
56}: {
57  children: React.ReactNode
58}) {
59  return children
60}
61```
62 
63Example of a server page (with async logic):
64 
65```tsx
66"use server"
67 
68import { Suspense } from "react"
69import { SomeAction } from "@/actions/some-actions"
70import SomeComponent from "./_components/some-component"
71import SomeSkeleton from "./_components/some-skeleton"
72 
73export default async function ExampleServerPage() {
74  return (
75    <Suspense fallback={<SomeSkeleton className="some-class" />}>
76      <SomeComponentFetcher />
77    </Suspense>
78  )
79}
80 
81async function SomeComponentFetcher() {
82  const { data } = await SomeAction()
83  return <SomeComponent className="some-class" initialData={data || []} />
84}
85```
86 
87Example of a server page (no async logic required):
88 
89```tsx
90"use server"
91 
92import SomeClientComponent from "./_components/some-client-component"
93 
94// In this case, no asynchronous work is being done, so no Suspense or fallback is required.
95export default async function ExampleServerPage() {
96  return <SomeClientComponent initialData={[]} />
97}
98```
99 
100Example of a server component:
101 
102```tsx
103"use server"
104 
105interface ExampleServerComponentProps {
106  // Your props here
107}
108 
109export async function ExampleServerComponent({
110  props
111}: ExampleServerComponentProps) {
112  // Your code here
113}
114```
115 
116##### Client Components
117 
118- Use `"use client"` at the top of the file
119- Client components can safely rely on props passed down from server components, or handle UI interactions without needing <Suspense> if there’s no async logic.
120- Never use server actions in client components. If you need to create a new server action, create it in `/actions`
121 
122Example of a client page:
123 
124```tsx
125"use client"
126 
127export default function ExampleClientPage() {
128  // Your code here
129}
130```
131 
132Example of a client component:
133 
134```tsx
135"use client"
136 
137interface ExampleClientComponentProps {
138  initialData: any[]
139}
140 
141export default function ExampleClientComponent({
142  initialData
143}: ExampleClientComponentProps) {
144  // Client-side logic here
145  return <div>{initialData.length} items</div>
146}
147```