Scaffold Frontend with Cursor | Tutorial

TL;DR

Scaffold frontend architecture with Cursor by referencing your design system files and component library with @file, creating .cursorrules that enforce your folder structure and component patterns, and using Composer to generate complete page layouts with proper routing, state management, and shared component integration.

Rapid Frontend Scaffolding with Design System Context

Cursor generates consistent frontend architecture when it understands your design system, folder conventions, and component patterns. By referencing existing components as examples and defining structural rules, you can scaffold new pages, features, and microfrontends that feel like they were written by your team. This tutorial covers the complete workflow from design system context to production-ready page generation.

Prerequisites

Cursor installed (Pro recommended for multi-file generation)
An existing React or Next.js project with a design system
At least one well-structured page or component to use as a template
Understanding of your project's folder structure conventions

Step-by-step guide

Document your folder structure in .cursorrules

Define your project's folder conventions so Cursor creates files in the right locations. Include the directory layout, naming patterns for files and components, and the expected file types for each directory.

.cursorrules

1# .cursorrules
2
3## Frontend Architecture
4- Pages: src/pages/{PageName}/index.tsx (default export)
5- Components: src/components/{ComponentName}/{ComponentName}.tsx
6- Hooks: src/hooks/use{HookName}.ts
7- Types: co-locate with component, or src/types/ for shared types
8- Tests: {filename}.test.tsx next to source file
9- Styles: use Tailwind CSS classes, no separate CSS files
10
11## Component Structure
12- One component per file
13- Props interface above component: interface {Name}Props {}
14- Named export for all shared components
15- Default export for page components only
16- Loading and error states required for async components

Expected result: Cursor creates files in the correct directories following your naming conventions.

Reference existing components as scaffolding templates

When generating new pages, reference your best existing page as a template. Open Composer (Cmd+I) and use @file to point to 2-3 well-structured components. Cursor will replicate their patterns, imports, and code organization.

Cursor Composer prompt

1// Prompt to type in Cursor Composer (Cmd+I):
2// @src/pages/Dashboard/index.tsx @src/components/shared/PageLayout.tsx
3// @src/hooks/useOrders.ts @src/types/order.ts
4// Scaffold a new OrderHistory page following the same patterns.
5// Include:
6// 1. Page component with PageLayout wrapper
7// 2. Data fetching hook (useOrderHistory)
8// 3. OrderHistoryTable component
9// 4. Loading skeleton state
10// 5. Error state with retry button
11// 6. Types for the page's data
12// Follow the exact folder structure from .cursorrules.

Pro tip: Referencing your best existing page as @file is more effective than describing patterns in words. Cursor learns from concrete examples better than abstract rules.

Expected result: Cursor generates a complete page with matching folder structure, component patterns, and code style.

Generate the shared component library entry

Use Chat (Cmd+L) to generate components that integrate with your design system. Reference your theme and shared component files so Cursor uses the correct design tokens, spacing, and typography from your system.

Cursor Chat prompt

1// Prompt to type in Cursor Chat (Cmd+L):
2// @src/components/shared/Button.tsx @src/lib/theme.ts
3// Generate an OrderStatusBadge component that:
4// - Uses our shared Badge component pattern
5// - Maps order statuses to colors from our theme
6// - Supports sizes: sm, md, lg
7// - Includes a11y: proper aria-label for screen readers
8// Follow the same export and prop patterns as Button.tsx.

Expected result: A new component that integrates seamlessly with your existing design system.

Create a scaffolding command for team use

Create a custom Cursor command that your team uses to scaffold new features consistently. This command references the standard templates and enforces your architecture conventions.

.cursor/commands/scaffold-page.md

1---
2description: Scaffold a new feature page
3---
4
5Generate a complete feature page scaffold with these files:
6
71. `src/pages/{FeatureName}/index.tsx` — page component with PageLayout
82. `src/pages/{FeatureName}/{FeatureName}.test.tsx` — page tests
93. `src/hooks/use{FeatureName}.ts` — data fetching hook
104. `src/components/{FeatureName}/` — feature-specific components
115. `src/types/{featureName}.ts` — types for the feature
12
13Follow patterns from:
14- @src/pages/Dashboard/index.tsx (page structure)
15- @src/hooks/useOrders.ts (hook pattern)
16- @src/components/shared/PageLayout.tsx (layout wrapper)
17
18Include loading skeletons, error states, and empty states.
19Use shared components from src/components/shared/ where possible.

Pro tip: Team members trigger this with /scaffold-page and provide the feature name. Cursor generates the complete file tree following your conventions.

Expected result: A reusable /scaffold-page command for consistent feature generation across the team.

Complete working example

src/pages/OrderHistory/index.tsx

1import { Suspense } from 'react';
2import { PageLayout } from '@/components/shared/PageLayout';
3import { OrderHistoryTable } from '@/components/OrderHistory/OrderHistoryTable';
4import { OrderHistoryFilters } from '@/components/OrderHistory/OrderHistoryFilters';
5import { ErrorBoundary } from '@/components/shared/ErrorBoundary';
6import { TableSkeleton } from '@/components/shared/TableSkeleton';
7import { useOrderHistory } from '@/hooks/useOrderHistory';
8import type { OrderHistoryFilters as Filters } from '@/types/orderHistory';
9
10export default function OrderHistoryPage(): JSX.Element {
11  const {
12    orders,
13    isLoading,
14    error,
15    filters,
16    setFilters,
17    refetch,
18  } = useOrderHistory();
19
20  const handleFilterChange = (newFilters: Partial<Filters>): void => {
21    setFilters((prev) => ({ ...prev, ...newFilters }));
22  };
23
24  return (
25    <PageLayout title="Order History" description="View and manage your past orders">
26      <OrderHistoryFilters
27        filters={filters}
28        onChange={handleFilterChange}
29      />
30
31      <ErrorBoundary
32        fallback={(
33          <div className="text-center py-8">
34            <p className="text-red-600 mb-4">Failed to load orders</p>
35            <button onClick={refetch} className="btn-primary">Retry</button>
36          </div>
37        )}
38      >
39        <Suspense fallback={<TableSkeleton rows={5} columns={4} />}>
40          {isLoading ? (
41            <TableSkeleton rows={5} columns={4} />
42          ) : error ? (
43            <div className="text-center py-8">
44              <p className="text-red-600">{error.message}</p>
45            </div>
46          ) : orders.length === 0 ? (
47            <div className="text-center py-8 text-gray-500">
48              No orders found. Try adjusting your filters.
49            </div>
50          ) : (
51            <OrderHistoryTable orders={orders} />
52          )}
53        </Suspense>
54      </ErrorBoundary>
55    </PageLayout>
56  );
57}

Common mistakes when scaffolding Frontend Architecture with Cursor

Why it's a problem: Generating components without referencing existing ones

How to avoid: Always reference 2-3 existing components with @file when scaffolding new ones.

Why it's a problem: Not including loading, error, and empty states in scaffold prompts

How to avoid: Include 'loading skeleton, error state with retry, and empty state' as requirements in every page scaffold prompt.

Why it's a problem: Scaffolding an entire feature in one massive Composer session

How to avoid: Generate the page and hook first, then generate individual components in follow-up prompts.

Best practices

Reference 2-3 well-structured existing components as templates when scaffolding
Document folder structure and naming conventions in .cursorrules
Create a /scaffold-page custom command for team-wide consistency
Always require loading, error, and empty states in page scaffolding prompts
Generate in phases: page + hook first, then individual components
Use auto-attaching .cursor/rules/ for component directory patterns
Commit scaffold output to Git immediately as a clean baseline

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

Generate a React page scaffold for an order history feature. Include: page component with layout wrapper, data fetching hook, table component, filter component, loading skeleton, error state with retry, and empty state. Use TypeScript with proper types.

Cursor Prompt

@src/pages/Dashboard/index.tsx @src/components/shared/PageLayout.tsx @src/hooks/useOrders.ts Scaffold a new OrderHistory page following these exact patterns. Create page, hook, table component, and types. Include loading skeleton, error state, and empty state. Follow folder structure from .cursorrules.

Frequently asked questions

Can Cursor scaffold a complete micro-frontend?

Yes. Use Composer Agent mode with your existing architecture as context. Generate the entry point, routing, shared components, and data layer in phases. For module federation setups, reference your webpack config with @file.

How do I ensure generated pages match my design system?

Reference your theme file and 2-3 existing components with @file in every scaffold prompt. Add design system rules to .cursorrules specifying allowed components, colors, and spacing tokens.

Should I generate the entire feature at once or in parts?

Generate in parts. Start with the page component and data hook, review them, then generate individual components in follow-up prompts. This produces higher quality code than one massive generation.

Can Cursor generate Storybook stories for scaffolded components?

Yes. After generating components, prompt: '@src/components/OrderHistory/OrderHistoryTable.tsx Generate a Storybook story with variants: loading, empty, with data, error state.' Reference an existing story file as a template.

How do I keep scaffolds consistent across team members?

Create /scaffold-page and /scaffold-component custom commands in .cursor/commands/ and commit them to Git. All team members use the same commands with the same template references.

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your project.

Book a free consultation

How to Scaffold Frontend Architecture with Cursor

What you'll learn

What you'll learn

Rapid Frontend Scaffolding with Design System Context

Prerequisites

Step-by-step guide

Document your folder structure in .cursorrules

Document your folder structure in .cursorrules

Reference existing components as scaffolding templates

Reference existing components as scaffolding templates

Generate the shared component library entry

Generate the shared component library entry

Create a scaffolding command for team use

Create a scaffolding command for team use

Complete working example

Common mistakes when scaffolding Frontend Architecture with Cursor

Best practices

Still stuck?

Frequently asked questions

Talk to an Expert

Need help with your project?

We put the rapid in RapidDev

How to Scaffold Frontend Architecture with Cursor

What you'll learn

Rapid Frontend Scaffolding with Design System Context

Prerequisites

Step-by-step guide

Document your folder structure in .cursorrules

Document your folder structure in .cursorrules

Reference existing components as scaffolding templates

Reference existing components as scaffolding templates

Generate the shared component library entry

Generate the shared component library entry

Create a scaffolding command for team use

Create a scaffolding command for team use

Complete working example

Common mistakes when scaffolding Frontend Architecture with Cursor

Best practices

Still stuck?

Related tutorials

How to limit Cursor to one UI library

How to keep design tokens consistent in Cursor output

How to generate accessible UI with Cursor

Frequently asked questions

Talk to an Expert

Need help with your project?

We put the rapid in RapidDev