# How to Scaffold Frontend Architecture with Cursor

- Tool: Cursor
- Difficulty: Beginner
- Time required: 15 min
- Compatibility: Cursor Pro+, React/Next.js/Vue
- Last updated: March 2026

## 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.

## Before you start

- 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

### 1. 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

## Frontend Architecture
- Pages: src/pages/{PageName}/index.tsx (default export)
- Components: src/components/{ComponentName}/{ComponentName}.tsx
- Hooks: src/hooks/use{HookName}.ts
- Types: co-locate with component, or src/types/ for shared types
- Tests: {filename}.test.tsx next to source file
- Styles: use Tailwind CSS classes, no separate CSS files

## Component Structure
- One component per file
- Props interface above component: interface {Name}Props {}
- Named export for all shared components
- Default export for page components only
- Loading and error states required for async components
```

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

### 2. 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.

```
// Prompt to type in Cursor Composer (Cmd+I):
// @src/pages/Dashboard/index.tsx @src/components/shared/PageLayout.tsx
// @src/hooks/useOrders.ts @src/types/order.ts
// Scaffold a new OrderHistory page following the same patterns.
// Include:
// 1. Page component with PageLayout wrapper
// 2. Data fetching hook (useOrderHistory)
// 3. OrderHistoryTable component
// 4. Loading skeleton state
// 5. Error state with retry button
// 6. Types for the page's data
// 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.

### 3. 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.

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

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

### 4. 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.

```
---
description: Scaffold a new feature page
---

Generate a complete feature page scaffold with these files:

1. `src/pages/{FeatureName}/index.tsx` — page component with PageLayout
2. `src/pages/{FeatureName}/{FeatureName}.test.tsx` — page tests
3. `src/hooks/use{FeatureName}.ts` — data fetching hook
4. `src/components/{FeatureName}/` — feature-specific components
5. `src/types/{featureName}.ts` — types for the feature

Follow patterns from:
- @src/pages/Dashboard/index.tsx (page structure)
- @src/hooks/useOrders.ts (hook pattern)
- @src/components/shared/PageLayout.tsx (layout wrapper)

Include loading skeletons, error states, and empty states.
Use 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 code example

File: `src/pages/OrderHistory/index.tsx`

```typescript
import { Suspense } from 'react';
import { PageLayout } from '@/components/shared/PageLayout';
import { OrderHistoryTable } from '@/components/OrderHistory/OrderHistoryTable';
import { OrderHistoryFilters } from '@/components/OrderHistory/OrderHistoryFilters';
import { ErrorBoundary } from '@/components/shared/ErrorBoundary';
import { TableSkeleton } from '@/components/shared/TableSkeleton';
import { useOrderHistory } from '@/hooks/useOrderHistory';
import type { OrderHistoryFilters as Filters } from '@/types/orderHistory';

export default function OrderHistoryPage(): JSX.Element {
  const {
    orders,
    isLoading,
    error,
    filters,
    setFilters,
    refetch,
  } = useOrderHistory();

  const handleFilterChange = (newFilters: Partial<Filters>): void => {
    setFilters((prev) => ({ ...prev, ...newFilters }));
  };

  return (
    <PageLayout title="Order History" description="View and manage your past orders">
      <OrderHistoryFilters
        filters={filters}
        onChange={handleFilterChange}
      />

      <ErrorBoundary
        fallback={(
          <div className="text-center py-8">
            <p className="text-red-600 mb-4">Failed to load orders</p>
            <button onClick={refetch} className="btn-primary">Retry</button>
          </div>
        )}
      >
        <Suspense fallback={<TableSkeleton rows={5} columns={4} />}>
          {isLoading ? (
            <TableSkeleton rows={5} columns={4} />
          ) : error ? (
            <div className="text-center py-8">
              <p className="text-red-600">{error.message}</p>
            </div>
          ) : orders.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              No orders found. Try adjusting your filters.
            </div>
          ) : (
            <OrderHistoryTable orders={orders} />
          )}
        </Suspense>
      </ErrorBoundary>
    </PageLayout>
  );
}
```

## Common mistakes

- **Generating components without referencing existing ones** — Without examples, Cursor generates generic React code that does not match your project's import paths, component patterns, or styling approach. Fix: Always reference 2-3 existing components with @file when scaffolding new ones.
- **Not including loading, error, and empty states in scaffold prompts** — Cursor generates only the happy-path UI unless explicitly asked for other states. Missing states create a poor user experience. Fix: Include 'loading skeleton, error state with retry, and empty state' as requirements in every page scaffold prompt.
- **Scaffolding an entire feature in one massive Composer session** — Large generation requests overwhelm the context window. Quality drops significantly after 10+ files in one session. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/cursor-tutorial/how-to-quickly-scaffold-new-microfrontends-in-cursor-ai-using-an-existing-design-system
© RapidDev — https://www.rapidevelopers.com/cursor-tutorial/how-to-quickly-scaffold-new-microfrontends-in-cursor-ai-using-an-existing-design-system