arch

Plans technical architecture for features before code changes in a monolithic React and Express codebase.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/levori119/skyboard --skill arch-levori119
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: arch
Source: https://github.com/levori119/skyboard/tree/main/.claude/skills/arch
Command: npx skills add https://github.com/levori119/skyboard --skill arch-levori119

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jumping straight into code on a large monolithic codebase (a 41,000-line App.tsx and an 8,000-line server.js with 355 routes) risks breaking existing screens, duplicating components, and creating inconsistent API routes. This Skill enforces a structured technical planning phase before any implementation begins. ## Core Features & Use Cases - Stack Analysis Before Decisions: Systematically checks for existing reusable components in the frontend, extendable routes in the backend, and required schema changes in the PostgreSQL database. - Structured Technical Plan Output: Produces a standardized plan covering backend routes (method, input, output, SQL), frontend state and component placement, DB migration needs, impact on other screens, technical risks, and a complexity estimate. - Architecture Guardrails: Flags red-alert situations where a feature requires architectural change rather than simple addition, and enforces DRY principles over new component creation. - Use Case: Before adding a new flight-strip filtering feature, run this Skill to determine whether an existing route can be extended, where state should live in App.tsx, whether a DB migration is needed, and which of the MapView, TableView, GroundView, and ClassicView screens are affected. ## Quick Start Ask the architect to plan the technical approach for your feature, for example: plan the technical implementation for adding a notes field to flight strips before writing any code.

Frequently Asked Questions about arch

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

FAQPage Schema
How do I plan a feature before writing code in a large React codebase?

Start by locating similar existing components, decide whether new state belongs centrally or as props, and map the API calls needed. This Skill formalizes that process into a repeatable plan covering frontend, backend, and database impact.

How to extend Express routes without breaking existing API conventions?

Check whether an existing route can be extended before creating a new one, and follow the naming conventions of the current routes for consistency. The planning output specifies the method, path, input, output, and SQL for each change.

When should a database schema change be handled separately from feature code?

Schema changes should run through a dedicated migration step before feature implementation, especially when existing data is affected or new indexes are needed for performance. The plan explicitly flags whether a migration is required.

What are the risks of modifying a monolithic single-file React app?

Any change to a large central file can break unrelated sections, so every modification must declare its blast radius across affected screens. The plan includes an impact table covering each view and lists technical risks with mitigations.

When is a feature an architecture change rather than a simple addition?

A feature is an architecture change when it alters the existing structure rather than extending it, such as introducing new state management patterns or restructuring routes. These cases are flagged as red alerts requiring escalation before proceeding.