Inquiry Process - Complete Guide Skill

Inquiry Process - Complete Guide

An Inquiry Process is a multi-step form wizard that collects information from the user. It uses the ProgressBar from @finstreet/forms/ProgressBar and layout components from @finstreet/ui.

Architecture

InquiryProcess
  └── layout.tsx (ProgressBarProvider wraps all steps)
       ├── {Purpose}ProgressBar — shows step progress
       └── {children} — each step is a Next.js page with a Form

Path Resolution

Before creating any files, invoke the finstreet-fe:path-resolver skill with your input parameters (featureName, featureType=inquiryProcess, product, role) to resolve the correct paths. Use the returned Feature Path as the base directory for the inquiry process feature.

Directory Structure

features/{purpose}InquiryProcess/
  ├── components/
  │   ├── {Purpose}ProgressBar.tsx
  │   └── {StepName}Page.tsx           ← Feature page component per step
  ├── forms/
  │   └── {stepName}/
  │       └── get{StepName}DefaultValues.ts  ← Default values transformer per step
  ├── utils/
  │   └── get{Purpose}InitialProgressState.ts
  └── {Purpose}InquiryProcess.types.ts

app/{role}/{purpose}-inquiry/[inquiryId]/
  ├── layout.tsx               ← NOT inside the feature dir
  └── (inquiry)/
      └── {step-slug}/
          └── page.tsx         ← Thin Next.js page per step

File Creation Order

ALWAYS create files in this exact sequence:

Types — {Purpose}InquiryProcess.types.ts
InitialProgressState — utils/get{Purpose}InitialProgressState.ts
ProgressBar — components/{Purpose}ProgressBar.tsx
Layout — layout.tsx (path provided from context/routes)

Key Imports

// ProgressBar state + provider
import { ProgressBarProvider, ProgressBarState } from '@finstreet/forms/ProgressBar'

// ProgressBar hook (inside hook functions)
import { useProgressBar, ProgressBarSteps } from '@finstreet/forms/ProgressBar'

// Validity (used inside each step's Form component)
import { Validity } from "@finstreet/forms/ProgressBar";

// UI components
import {
  ProgressBar,
  ProgressBarGroup,
} from "@finstreet/ui/components/patterns/ProgressBar";
import { ProgressStep } from "@/shared/components/ProgressStep";
import {
  FormLayout,
  FormLayoutArea as Area,
} from "@finstreet/ui/components/pageLayout/Layout/FormLayout";
import { Panel } from "@finstreet/ui/components/base/Panel";
import { Box } from "@styled-system/jsx";

// Navigation
import { usePathname, useParams } from 'next/navigation'

// Portal context
import { usePortal } from "@/shared/context/portal/portalContext";

// Routes
import { routes } from "@/routes";

// Translations
import { useExtracted } from 'next-intl'

// Backend (only when layout fetches data)
import { fetchWithErrorHandling } from "@/shared/backend/fetchWithErrorHandling";

Step-by-Step Reference

For the types file (defining the steps enum), see types.md
For the initial progress state setup, see initial-progress-state.md
For the ProgressBar component, see progress-bar.md
For the layout file, see layout.md
For step pages and default value handling, see step-page.md

Rules

Always follow the file creation order — each file depends on the previous
The steps enum drives everything: progress bar, initial state, layout, and form validity
The layout file lives at the route path, NOT inside the feature directory
Use usePortal() inside the progress bar hook to resolve route paths
If the layout needs backend data (e.g., to prefill progress state), use fetchWithErrorHandling

Agent Skills: Inquiry Process - Complete Guide

Install this agent skill to your local

Skill Files