Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →webiny/webiny-admin-architect
Admin-side architecture patterns for Webiny extensions.
Passed 22 of 22 test cases with the skill, and 4 of 22 without it.
and 26 more in the full report
18 fixed4 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 18 test cases the skill fixed. Same model, same prompt, with and without the skill.
In an admin extension UI component inside `extensions/analytics/admin/presentation/ReportView.tsx`, which wrapper function should I wrap around the component function to enable MobX reactivity for presenter state changes?
| Checked | Without skill | With skill |
|---|---|---|
| The component wraps its export using createReactiveComponent imported from webiny/admin. | Missed | Passed |
| The component does not import observer directly from mobx-react-lite. | Missed | Passed |
The instructions your model reads when the skill loads.
Admin extensions are React components that register headless features (business logic with no UI) and presentation features (MobX presenters, React hooks, components). Headless features live in admin/features/ and follow UseCase → Repository → Gateway layering. Presentation features live in admin/presentation/ and add a Presenter (MobX view model) layer on top. Both use createFeature and createAbstraction from webiny/admin.
All features — both headless and presentation — MUST provide a resolve function in createFeature. This is how the useFeature hook accesses resolved instances from the DI container. Without resolve, the feature cannot be consumed from React.
This skill applies to both extension developers (working in extensions/) and core developers (working in packages/). The architecture patterns are identical — only imports differ.
Extensions (extensions/) | Core (packages/) | |
|---|---|---|
| Imports | webiny/admin, webiny/admin/ui, webiny/admin/cms/entry/editor | @webiny/app, @webiny/admin-ui, @webiny/app-headless-cms/... |
| Catalog paths | Use the Import: path | Use the Source: path |
| MobX wrapper | createReactiveComponent from webiny/admin | createReactiveComponent from @webiny/app-admin (never import observer from mobx-react-lite directly — the only exception is @webiny/app-admin itself, which is the source of the re-export) |
| Entry point | React component as export default in a file targeted by <Admin.Extension src={...}> | React component registered by the package initializer |
Detect which context you're in by checking the file path: extensions/ → extension mode, packages/ → core mode.
admin/
├── Extension.tsx # Admin entry point (React component)
├── features/ # Headless features (business logic, no UI)
│ └── EnableThing/
│ ├── abstractions.ts
│ ├── EnableThingUseCase.ts
│ ├── EnableThingRepository.ts
│ ├── EnableThingGateway.ts
│ └── feature.ts
└── presentation/ # Presentation layer (hooks, components, presenters)
└── CurrentThing/
├── abstractions.ts # Presenter + ViewModel interfaces
├── CurrentThingPresenter.ts # MobX-based view model
├── useCurrentThing.ts # React hook for consumers
├── feature.ts # createFeature registration
└── components/ # React UI components
test cases passed, vs 4 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.