webiny-admin-architect

Implements Webiny admin extensions using feature-based DI architecture with MobX presenters.

8.0k|673|Updated Jan 9, 2018
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webiny-admin-architect
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/admin/admin-architect
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building admin-side extensions for Webiny requires following a strict layered architecture (UseCase/Repository/Gateway, Presenter/ViewModel) with dependency injection, and getting the patterns wrong leads to features that cannot be resolved or consumed from React.

Core Features & Use Cases

  • Headless Feature Patterns: Guides creation of business-logic features in admin/features/ using createAbstraction, createFeature, and the UseCase → Repository → Gateway layering.
  • Presentation Layer Patterns: Covers MobX-based presenters, ViewModels, React hooks via useFeature, and component rules like createReactiveComponent and one-component-per-file.
  • Use Case: When adding a new admin screen that loads data via GraphQL, use this Skill to scaffold the gateway, repository, presenter, and hook with correct DI registration, singleton scoping, and the mandatory resolve function.

Quick Start

Ask the AI to create a new Webiny admin feature with a presenter, repository, and GraphQL gateway following the admin architecture patterns.

Frequently Asked Questions about webiny-admin-architect

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

FAQPage Schema
How do I create a headless feature in a Webiny admin extension?

Create abstractions with createAbstraction, implement UseCase, Repository, and Gateway classes, then register them via createFeature in admin/features/. The feature must include a resolve function so useFeature can access resolved instances from React.

How do I access a Webiny feature from a React component?

Use the useFeature hook from webiny/admin, passing the feature definition. It returns whatever the feature's resolve function returned, typically a use case or presenter, which you wrap in a custom hook for typed consumption.

Can I use mobx-react-lite observer in Webiny admin components?

No, never import observer from mobx-react-lite directly. Use createReactiveComponent from webiny/admin in extensions or from @webiny/app-admin in core packages, which is the single source of the re-export.

Why is my Webiny feature not resolving with useFeature?

The most common cause is a missing resolve function in createFeature. Every feature, headless or presentation, must provide resolve so the DI container can return instances to useFeature consumers.

When should a Webiny presenter have its own repository and gateway?

Only as a one-off when the logic is presentation-specific and never reused. The preferred pattern is for presenters to inject a headless feature's use case abstraction as a DI dependency instead of duplicating layering.