skills.rest
AIAsys
AIAsysOFFICIAL
Explore all skills by this author →
GitHub

aiasys-frontend-architecture

Codify AIASys frontend architecture rules for routing, state, and components.

21|12|Updated May 17, 2026
Search Tags:#architecture#state management#frontend#react#routing#component structure#aiasys
One-click install
npx skills add https://github.com/AIAsys/AIASys --skill aiasys-frontend-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aiasys-frontend-architecture
Source: https://github.com/AIAsys/AIASys/tree/main/.team-skills/aiasys-frontend-architecture
Command: npx skills add https://github.com/AIAsys/AIASys --skill aiasys-frontend-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves the inconsistency between generic frontend best practices and the actual architecture of the AIASys project, preventing developers from introducing incompatible patterns, dependencies, or structural choices that deviate from the existing codebase skeleton.

Core Features & Use Cases

  • Project-Specific Architecture Rules: Clearly defines the AIASys frontend's actual tech stack, tradeoffs, and constraints, including custom manual routing, Context + Hooks state management, custom fetch-based httpClient, and conditional Feature-Folder usage.
  • Development Priority Guidance: Establishes this skill as the top priority reference for AIASys frontend development, overriding generic frontend skills when conflicts arise.
  • Use Case: When adding a new page, API call, or shared component to the AIASys web app, use this skill to confirm the correct directory placement, routing registration, state scope, and API usage rules to avoid refactoring overhead.

Quick Start

When developing any new frontend feature for the AIASys project, first reference this skill to confirm routing, state management, and component structure requirements before writing implementation code.

Frequently Asked Questions about aiasys-frontend-architecture

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

FAQPage Schema
How do I enforce frontend architecture rules and avoid inconsistent React implementation?▼

To enforce frontend architecture rules, apply mandatory constraints for manual routing registration, Context and Hooks state management, fetch-based API usage, and Tailwind CSS styling to ensure implementation consistency with the existing project structure.

Do I need to manually register routing when adding a new page to my React app?▼

Yes, manual routing registration is required for adding new pages. The frontend architecture specifies mandatory rules for manual routing to prevent developers from introducing incompatible patterns that deviate from the existing codebase skeleton.

What is the best way to structure state management and API integration in this frontend project?▼

The best way to structure state management and API integration is using Context and Hooks for state scope classification, alongside a custom fetch-based httpClient for API calls, overriding generic best practices to maintain project consistency.

Can I use generic React component structures and state patterns for AIASys web development?▼

No, generic patterns are overridden by project-specific architecture rules. You must follow custom constraints for component directory placement, conditional Feature-Folder usage, and state scope classification to avoid refactoring overhead.

Why does generic frontend best practices cause refactoring overhead in this project?▼

Generic frontend best practices cause refactoring overhead because they conflict with the actual AIASys architecture. Applying custom constraints for manual routing, fetch-based API calls, and component placement prevents incompatible dependencies and structural choices.

Are there limitations on using external state libraries or routing frameworks for AIASys frontend tasks?▼

Yes, limitations exist on external libraries. The architecture mandates manual routing registration and Context with Hooks for state management, intentionally restricting automated routing frameworks or external state libraries to maintain codebase consistency.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
fgarofalo56fgarofalo56
6

cypress

Automate end-to-end web application testing with Cypress.

Community
Advanced
markus41markus41
1

react

Develop React functional components, custom hooks, and context providers with React Query and react-hook-form.

Community
Intermediate
buisihung11buisihung11

nx-generate

Generate applications and libraries using Nx generators in a monorepo.

Community
Intermediate