App Renderer Systems
This skill teaches you how to structure and implement self-contained domain modules that own their API calls, data fetching, hooks, and components. It covers the mandatory directory layout, API service layer patterns, TanStack Query integration for queries and mutations, React context conventions, XState store setup, and public API organization. Use it when creating new systems, extending existing ones, or debugging system-layer code.
App Renderer Systems guides you through building domain-driven feature modules organized under a systems/ directory with standardized patterns.
AI-generated summary based on this skill's SKILL.md
Install
pedronauck/skills/app-renderer-systems · repository language: JavaScript
git clone https://github.com/pedronauck/skills
cp -r skills ~/.claude/skills/app-renderer-systemsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install pedronauck/skills/app-renderer-systemsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is App Renderer Systems and what does it cover?
App Renderer Systems teaches you how to structure and implement self-contained domain modules that own their API calls, data fetching, hooks, and components. It covers mandatory directory layout, API service layer patterns, TanStack Query integration for queries and mutations, React context conventions, XState store setup, and public API organization. Use this skill when creating new systems, extending existing ones, or debugging system-layer code.
How to render apps using App Renderer Systems?
App Renderer Systems provides a structured approach to rendering applications by organizing domain modules with clear separation of concerns. Each module owns its API calls, data fetching logic, hooks, and components. The framework uses TanStack Query for efficient data management, React context for state sharing, and XState for complex state orchestration. Follow the mandatory directory layout and API service layer patterns to render app components efficiently.
What rendering framework does App Renderer Systems use?
App Renderer Systems integrates multiple technologies to create a cohesive rendering framework. It uses React for component rendering, TanStack Query for server state management and data fetching, React context for local state sharing, and XState for managing complex application state machines. These tools work together within the prescribed directory structure to provide a complete app rendering solution.
How do app renderers work in this system?
App Renderer Systems works by organizing applications into self-contained domain modules. Each module manages its own API service layer, data fetching through TanStack Query, custom hooks, and React components. The system uses React context conventions for state distribution and XState for advanced state management. This architecture ensures efficient rendering by isolating concerns and enabling predictable data flow through well-defined public APIs.
What is the directory layout for App Renderer Systems?
App Renderer Systems requires a mandatory directory layout that organizes domain modules with clear structure. Each module contains its API service layer, TanStack Query configurations for queries and mutations, React context setup, XState store definitions, custom hooks, and exported components. This standardized layout ensures consistency across systems and makes it easier to maintain, extend, and debug system-layer code.
When should I use App Renderer Systems?
Use App Renderer Systems when creating new domain modules, extending existing systems with additional features, or debugging system-layer code. It's particularly valuable when you need to manage complex data fetching, organize state across multiple components, or ensure consistent architecture across your application. The skill provides patterns for efficient app rendering and maintainable module organization.