skills.rest
mozilor-technologies
mozilor-technologiesOFFICIAL
Explore all skills by this author →
GitHub

project-architecture

Document the Webtoffee Marketing Suite's architecture, tech stack, and component hierarchy.

Updated Apr 16, 2026
Search Tags:#typescript#architecture#api#react#routing#state-management#ui-components
One-click install
npx skills add https://github.com/mozilor-technologies/mozilor-skills --skill project-architecture-mozilor-technologies
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-architecture
Source: https://github.com/mozilor-technologies/mozilor-skills/tree/main/skills/frontend/project-architecture
Command: npx skills add https://github.com/mozilor-technologies/mozilor-skills --skill project-architecture-mozilor-technologies

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a detailed reference guide to the architecture, technology stack, and component hierarchy of the Webtoffee Marketing Suite application, helping developers understand the system's design.

Core Features & Use Cases

  • System Overview: Outlines the application’s core functionalities including email campaigns, automation, routing, and analytics.
  • Component Hierarchy: Describes the atomic design structure for UI components, ensuring consistency and maintainability.
  • Development Guidance: Offers insights into routing, state management, API interactions, environment variables, and path aliases to assist in app development and onboarding.

Quick Start

Refer to this Skill to familiarize yourself with the tech stack, folder structure, and development practices before working on new features or troubleshooting.

Frequently Asked Questions about project-architecture

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

FAQPage Schema
What is the architecture of the Webtoffee Marketing Suite?▼

This application architecture blueprint defines the tech stack, component hierarchy, state management, and API structure to guide developers in building and scaling the Marketing Suite's email campaigns, automation, and analytics features.

How do I organize UI components for a React marketing application?▼

You should organize UI components using an atomic design structure, which breaks down interfaces into foundational elements to ensure consistency and maintainability across the React application.

Does this architecture reference support TypeScript and React?▼

Yes, this architecture reference supports TypeScript and React, providing detailed guidance on state management, routing, environment variables, and path aliases tailored for a collaborative team environment.

How do I manage routing and API interactions in a TypeScript app?▼

Manage routing and API interactions by following the architectural guidelines for state management and environment variables, ensuring structured data flow and maintainable API integration within the TypeScript application.

What are the limitations of using a predefined project architecture blueprint?▼

A predefined project architecture blueprint is limited to the specific Webtoffee Marketing Suite structure, meaning its tech stack, folder structure, and component hierarchy are tailored for that context and may not apply universally.

Related Skills

Explore More Software Engineering Skills→
tassosgomestassosgomes

react-architecture

Standardize React project structure with Vite and TypeScript conventions.

Community
Intermediate
endorphin-aiendorphin-ai
3

frontend-mean

Develop React frontends for MEAN stack applications with Vite and Tailwind CSS.

Official
Intermediate
fanguyunfanguyun

react-expert

Generate React 18+ components with TypeScript and state management.

Community
Advanced
samhvw8samhvw8
10

planning

Create detailed technical implementation plans for features and system architectures.

Community
Advanced