skills.rest
jingjing2222
jingjing2222COMMUNITY
Explore all skills by this author →
𝕏@jingjing2238950GitHub

backoffice-react

Select a backoffice React screen archetype and map state ownership.

Updated Mar 14, 2026
Search Tags:#react#validation#archetypes#backoffice#state-ownership#boundary-design
One-click install
npx skills add https://github.com/jingjing2222/create-rn-miniapp --skill backoffice-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: backoffice-react
Source: https://github.com/jingjing2222/create-rn-miniapp/tree/main/skills/backoffice-react
Command: npx skills add https://github.com/jingjing2222/create-rn-miniapp --skill backoffice-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It helps teams decide how to structure an optional backoffice React screen by defining the target archetype (list, detail, form, dashboard, or bulk-action) and clarifying who owns each state (query parameters, component state, and form state). It also guides boundary separation for search, table, confirm, and export flows to reduce coupling and rework.

Core Features & Use Cases

  • Decide screen archetype early to prevent over-engineering and redundant routes.
  • Define state ownership so that query params, UI state, and draft data are managed in a single source of truth.
  • Establish clear boundaries for common backoffice patterns (QueryBar, ResultTable, DetailPanel, FormSections, BulkToolbar, ConfirmFlow) and handoff to provider skills when needed.

Quick Start

Inspect existing repository guidance and read references/screen-archetypes.md, references/data-boundary.md, and references/bulk-actions-and-forms.md to start crafting your backoffice screen layout tomorrow.

Frequently Asked Questions about backoffice-react

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

FAQPage Schema
How do I structure a backoffice React screen to prevent over-engineering?▼

Structure a backoffice React screen by selecting an archetype like list, detail, form, dashboard, or bulk-action early. This prevents redundant routes and defines clear boundaries for search, table, confirm, and export flows to reduce coupling.

What is the best way to manage state ownership for React backoffice views?▼

Manage React backoffice state by defining a single source of truth for query parameters, UI state, and form data. Clarifying state ownership ensures that draft data and component state are handled consistently across different screen views.

How do I separate boundaries for bulk actions and forms in a React admin panel?▼

Separate bulk action and form boundaries by applying distinct patterns like BulkToolbar, ConfirmFlow, and FormSections. This establishes clear validation loops and specifies handoff needs to related provider skills for your React admin panel.

When do I need to define screen archetypes for my backoffice workspace?▼

You need to define screen archetypes when your repository includes a backoffice workspace and requires clear boundaries for query parameters, UI state, and form data across list, detail, form, dashboard, and bulk-action views.

Does this approach work for existing repositories with a backoffice workspace?▼

Yes, this approach applies to repositories that already include a backoffice workspace. It inspects existing repository guidance and helps you map state ownership and validation loops without introducing redundant routes.

Related Skills

Explore More Software Engineering Skills→
xtonextone
3

screen-spec-generator

Generate Flutter screen specifications from project structure analysis.

Official
Advanced
dpalferydpalfery

delegate-frontend

Delegate React, CSS, and HTML tasks to the react-dev agent.

Community
Basic
Yoriichi-DangYoriichi-Dang

tanstack-query

Manage React server state with TanStack Query v5 hooks.

Community
Advanced
OZVEOZVE

dashboard-page-ui

Create and modify admin and vendor dashboard pages using Mercur routing and i18n conventions.

Community
Intermediate