skills.rest
qfeius
qfeiusOFFICIAL
Explore all skills by this author →
GitHub

makeui

Generates and refactors Make App React frontend UI with componentized layouts and field-type adapters.

5|Updated Apr 1, 2026
Search Tags:#frontend#react#form generation#ui layout#componentization#drawer#make app
One-click install
npx skills add https://github.com/qfeius/make-platform-skills --skill makeui-qfeius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makeui
Source: https://github.com/qfeius/make-platform-skills/tree/main/skills/makeui
Command: npx skills add https://github.com/qfeius/make-platform-skills --skill makeui-qfeius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building Make App frontends requires consistent app shells, metadata-driven forms, drawers, and list pages; this Skill enforces those UI conventions so generated apps/ui React code stays modular, permission-aware, and free of monolithic page components. ## Core Features & Use Cases - App shell and layout defaults: Fixed-height shell with sidebar navigation, flat workspace header, current-user menu, and region-scoped scrolling for object list pages. - Metadata-driven CRUD surfaces: Right-side Drawer create/edit/detail layouts with two-column field grids, a shared Make field type registry, and host-form controlled field adapters. - Componentization enforcement: Splits UI into pages, components, hooks, service-api adapters, and routers, treating monolithic files as delivery blockers. - Use Case: When scaffolding a new Make App object management UI, use this Skill to generate the shell, dynamic /objects/:objectKey routes, list toolbar, and Drawer forms while delegating tables, filters, and permissions to their owning skills. ## Quick Start Ask the AI to generate a Make App object list page with create/edit/detail drawers using the makeui skill for the UI layout.

Frequently Asked Questions about makeui

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

FAQPage Schema
How do I generate a Make App object list page layout?▼

Use the default dense layout: left sidebar navigation, flat workspace header, local toolbar above the table, and dynamic routes like /objects/:objectKey. The table itself uses @qfei-design/canvas-table via the canvas-table-integration skill.

What component libraries does makeui support for React forms?▼

It supports Ant Design, Arco Design, and shadcn/ui, chosen by user preference or existing project convention. Ant Design is the recommended default, and libraries must not be mixed within one app.

How should custom form field controls handle value and onChange?▼

Custom field controls must be host-form controlled adapters that accept and forward value, onChange, onBlur, id, and disabled. The displayed selection must always match the form store value read by submit and validation.

Does makeui handle authentication, permissions, or table rendering?▼

No. Authentication belongs to make-app-auth, permission gates to make-app-permission, and CanvasTable rendering to canvas-table-integration. makeui only owns layout, placement, and presentation of those surfaces.

Why is a single large App.tsx or page component rejected?▼

Monolithic files are a readiness blocker. UI must be split into pages, feature components, hooks, service-api adapters, and field display modules so responsibilities stay separated and maintainable.

When should create/edit/detail use a Drawer instead of a page?▼

Right-side Drawers at 60% width are the default for Make object CRUD. Route pages are used only when the user explicitly requests standalone, URL-addressable screens.

Related Skills

Explore More Software Engineering Skills→
united-software-platformunited-software-platform
1

model-dsl

Generate domain model definitions in DSL format from interactive prompts.

Official
Advanced
mjunaidcamjunaidca
27

containerizing-applications

Creates Docker images, Compose services, and Kubernetes Helm charts from project files.

Community
Advanced
abhiroopbabhiroopb

airtable

Manage bases, tables, and records through the Airtable API.

Community
Intermediate
arbory-digital-incarbory-digital-inc

Building Blocks

Create and refine AEM Edge Delivery blocks with JS decoration and CSS styling.

Official
Basic