Source Code Documentation

Documents HBG Screens portal's codebase architecture layer-by-layer.

Updated Mar 10, 2026
One-click install
npx skills add https://github.com/ricardocidale/hbg-screens --skill source-code-documentation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Source Code Documentation
Source: https://github.com/ricardocidale/hbg-screens/tree/main/.claude/skills/source-code
Command: npx skills add https://github.com/ricardocidale/hbg-screens --skill source-code-documentation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill provides a comprehensive, structured overview of the HBG Screens portal's entire codebase, enabling developers to quickly understand its architecture, components, and logic.

Core Features & Use Cases

  • Architecture Deep Dive: Understand the server, client, calculation, and domain layers of the application.
  • Component Breakdown: Explore the purpose and implementation of key files and directories, including financial engines, API routes, and UI components.
  • Use Case: A new developer joining the project can use this Skill to get up to speed on the codebase structure, identify where specific functionalities are implemented (e.g., financial calculations, API endpoints), and understand the data flow.

Quick Start

Explain the purpose of the server/index.ts file.

Frequently Asked Questions about Source Code Documentation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I navigate a large React and TypeScript codebase for a financial portal?

To navigate a large React and TypeScript codebase for a financial portal, you need a layer-by-layer breakdown of server-side logic, client-side components, calculation modules, and domain types to understand the architecture and data flow.

What is the best way to onboard a new developer to an existing React and TypeScript architecture?

The best way to onboard a new developer to a React and TypeScript architecture is by providing a structured overview that details API routes, financial engine implementation, state management, and custom UI components across the application layers.

How does the financial engine implementation work in a TypeScript portal codebase?

The financial engine implementation in a TypeScript portal codebase works by processing calculation modules and domain types that handle data flow between server-side logic and client-side React components.

Can I use architectural documentation to find specific API routes and state management logic?

Yes, you can use architectural documentation to find specific API routes and state management logic by reviewing a detailed component breakdown that maps out key files and directories within the application.

What do I need to understand before exploring the server-side logic of a React portal?

Before exploring the server-side logic of a React portal, you need to understand the application's architecture, including how the server, client, calculation, and domain layers interact to manage data and render UI components.

Why does understanding domain types matter when working with a financial calculation codebase?

Understanding domain types matters when working with a financial calculation codebase because they define the data structures used by calculation modules and ensure accurate data flow between server-side logic and client-side React components.