nova-spektr: Command for Claude Code

Nova Spektr Prototype Generator

Generate a .stories.tsx file in src/renderer/stories/prototypes/ that renders a fully interactive UI prototype using real project components with static mock data.

STEP 1: Understand the request

Ask clarifying questions if needed:

• What feature/screen to prototype?
• Full page or modal/dialog?
• What data should be displayed?
• Any specific interactions (tabs, filters, modals, accordions)?

STEP 2: Study real app patterns

Before building, read source code in src/renderer/pages/, src/renderer/features/, src/renderer/widgets/ that is closest to the requested prototype. Match the real app's:

• Layout structure (header, content area, sidebar)
• Spacing and information density
• Typography hierarchy
• Component usage patterns

STEP 3: Generate the prototype

Create src/renderer/stories/prototypes/<feature-name>.stories.tsx

STEP 4: Verify against real app

After generating the prototype, compare the output with the actual app components to check visual fidelity. Run through this checklist:

1. Read the real components — Open the corresponding features/*/ui/ and pages/*/ source files. Focus on the JSX structure, className strings, spacing values, and component hierarchy.
2. Compare layout patterns — Check:
   • Container backgrounds, padding, border-radius (bg-block-background-default, p-4, rounded-sm)
   • Spacing between elements (gap-x-2, gap-y-4, gap-y-2, gap-y-1.5)
   • Typography components and their text color classes (BodyText vs FootnoteText vs HelpText)
   • Icon sizes, colors, and placement (real app often uses size={14} inline icons, NOT large circle backgrounds)
   • Button variants (variant="fill" pallet="secondary" size="sm" for action buttons, not variant="text")
3. Check domain components — Verify that the real app uses:
   • WalletIcon with badge overlays (not custom circle icons) for wallet/proxy notifications
   • Small inline Icon components (14px) for status indicators in operation notifications
   • BodyText for titles (not FootnoteText) and BodyText className="text-text-secondary" for descriptions
   • FootnoteText className="text-text-tertiary" for timestamps only
4. Fix discrepancies — Update the prototype to match. Common mismatches:
   • Using custom colored circle icons instead of real app's inline icons or WalletIcon
   • Wrong typography component hierarchy (e.g., FootnoteText where BodyText should be)
   • Wrong button variant (text link vs filled secondary)
   • Missing inline-flex flex-wrap items-center on description rows
   • Wrong gap/padding values