skills.rest
joaopelegrino
joaopelegrinoCOMMUNITY
Explore all skills by this author →
GitHub

platform-architecture

Analyze the corporate training platform's frontend, backend, data pipelines, and deployment patterns.

Updated Aug 25, 2025
Search Tags:#architecture#React#data flow#frontend#tech stack#development standards#system overview
One-click install
npx skills add https://github.com/joaopelegrino/app-controle --skill platform-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: platform-architecture
Source: https://github.com/joaopelegrino/app-controle/tree/main/.claude/skills/platform-architecture
Command: npx skills add https://github.com/joaopelegrino/app-controle --skill platform-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides comprehensive, always-available knowledge of the Plataforma B2B de treinamento técnico corporativo's architecture, tech stack, data flows, and coding standards. It eliminates the need for developers to manually search for architectural details, ensuring consistent decision-making and faster onboarding.

Core Features & Use Cases

  • Complete System Overview: Access detailed information on the React 18.3 frontend, Vite build, Tailwind CSS styling, testing strategy (Vitest, Playwright), and Docker deployment.
  • Hierarchical Navigation Map: Understand the 4-level navigation structure (Hub > Course > Lesson > Flashcards) and how components interact across these levels.
  • Data Flow & Persistence: Gain insight into global state management, localStorage keys for user notes and progress, and the props drilling pattern.
  • Use Case: When deciding how to implement a new feature, consult this skill to understand the existing data flow, component structure, and coding conventions, ensuring the new code aligns perfectly with the platform's architecture.

Quick Start

Use the platform-architecture skill to understand the current state management approach for navigation between the Hub and learning systems.

Frequently Asked Questions about platform-architecture

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

FAQPage Schema
How do I understand the React frontend architecture for a corporate training platform?▼

React 18.3 frontend architecture uses Vite for builds, Tailwind CSS for styling, and a 4-level hierarchical navigation structure: Hub > Course > Lesson > Flashcards. Components interact through props drilling and global state management to coordinate data flows across these levels.

What's the data flow pattern for user progress and notes in a React learning platform?▼

User progress and notes persist via localStorage keys managed through global state. The platform uses props drilling to pass state down the component hierarchy, enabling consistent tracking across the Hub, Course, Lesson, and Flashcard levels.

How do I align new features with existing platform architecture and coding conventions?▼

Consult the platform's documented architecture to review component structure, data flow patterns, and coding standards before implementation. This ensures new code follows the established tech stack (React 18.3, Vite, Tailwind) and state management approach, reducing integration friction.

What testing and deployment approach does a React platform use?▼

The platform uses Vitest for unit testing and Playwright for end-to-end testing, with Docker for containerized deployment. This strategy ensures consistent behavior across the React 18.3 frontend and supports reliable releases of architectural changes.

Can I use props drilling for state management across multiple navigation levels?▼

Yes. Props drilling works for the platform's 4-level navigation hierarchy when global state management handles user notes and progress. This pattern is suitable for structured, predictable component trees but becomes complex at greater depths.

Related Skills

Explore More Software Engineering Skills→
Peo051Peo051

GREENBITE_AI_LANDING_PAGE_SKILL

Build and deploy a GreenBite AI landing page with React, Vite, and Tailwind CSS.

Community
Intermediate
w020316w020316

testing-devops

Automate testing and operations workflows for software projects.

Community
Intermediate
kingdoubleglazingkingdoubleglazing

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

Community
Intermediate
Mte90Mte90
51

TypeScript Tooling

Configure ESLint, Prettier, Jest, and build tools for TypeScript projects.

Community
Intermediate