Creates new forms in the Shesha low-code application using Playwright browser automation. Use this skill when you need to create a new form, scaffold a UI component, or set up form configuration in Shesha. Handles login, navigation, form creation dialog, and opens the Form Designer. Requires Shesha running at localhost:3000 and Playwright MCP tools.
/plugin marketplace add shesha-io/shesha-plugins/plugin install greeting@shesha-pluginsThis skill is limited to using the following tools:
references/FORM-DESIGNER.mdreferences/SELECTORS.mdreferences/TEMPLATES.mdreferences/TROUBLESHOOTING.mdscripts/README.mdscripts/add-component-simple.jsscripts/add-component.jsscripts/add-styled-component.jsscripts/create-crud-forms-parallel.jsscripts/delete-component.jsscripts/get-components.jsscripts/get-container-ids.jsscripts/get-form-designer-context.jsscripts/package-lock.jsonscripts/package.jsonscripts/select-template-row.jsAutomates creation of new forms in Shesha using Playwright browser automation.
Fast-track CRUD form creation using the parallel script (4-7x faster!)
cd shesha-form-configurator-plugin/skills/create-form/scripts
npm install
# Create all 3 CRUD forms in parallel (~40 seconds)
node create-crud-forms-parallel.js <EntityName> <ModelType>
# Examples:
node create-crud-forms-parallel.js Person Shesha.Domain.Person
node create-crud-forms-parallel.js Booking Shesha.Domain.Booking
node create-crud-forms-parallel.js Address Shesha.Domain.Address
What it creates:
entityname-table - Table View (list/search)entityname-details - Details View (view/edit)entityname-create - Create View (new records)Performance:
http://localhost:3000| Parameter | Required | Description | Example |
|---|---|---|---|
formName | Yes | Kebab-case identifier | booking-form |
formLabel | No | Human-readable label | Booking Form |
formDescription | No | Purpose description | Form for creating bookings |
moduleName | No | Target module | Shesha.AiBoooking (default) |
http://localhost:3000 with headless: falseinput[placeholder="Username"] → admininput[placeholder="Password"] → 123qwebutton.ant-btn-primaryhttp://localhost:3000/dynamic/shesha/formstext=Create NewSelect Module:
Click: .ant-modal .ant-select-selector
Wait 1 second
Click: .ant-select-item[title="Shesha.AiBoooking"]
Fill Fields (use mcp__playwright__playwright_fill):
.ant-modal-body input.ant-input >> nth=0.ant-modal-body input.ant-input >> nth=1.ant-modal-body textareaIMPORTANT: Use native Playwright
fill, NOT JavaScript evaluation. JavaScript only updates DOM visually without updating React state.
Click: .ant-modal button.ant-btn-primary
Wait 3 seconds for Form Designer to load.
Form Designer opens with title Shesha.AiBoooking/{formName} and DRAFT status. Take a screenshot to confirm.
playwright_fill - JavaScript evaluation doesn't update React state.ant-modal, NOT in .ant-modal-footer## Form Created Successfully
- **Module:** Shesha.AiBoooking
- **Name:** {formName}
- **Label:** {formLabel}
- **Status:** Draft, Version 1
Form Designer is now open and ready for component design.
| Script | Purpose |
|---|---|
| create-crud-forms-parallel.js | ⚡ Create CRUD forms in parallel (FAST!) |
| select-template-row.js | Select template when click is intercepted |
| get-form-designer-context.js | Initialize Form Designer API |
| add-component.js | Add component (standalone) |
| add-component-simple.js | Add component (requires context) |
| get-container-ids.js | Get container IDs |
| get-components.js | List all components |
| delete-component.js | Delete a component |
The create-crud-forms-parallel.js script dramatically speeds up CRUD form creation by:
Browser Context
├── Tab 1 → Table View ──┐
├── Tab 2 → Details View ──┤ All running in parallel
└── Tab 3 → Create View ──┘
Edit the CONFIG object in the script to customize:
const CONFIG = {
baseUrl: 'http://localhost:3000', // Shesha URL
credentials: {
username: 'admin', // Login username
password: '123qwe' // Login password
},
module: 'Shesha.AiBoooking', // Target module
timeout: 60000 // Navigation timeout
};
Script fails with "Cannot find module 'playwright'"
cd shesha-form-configurator-plugin/skills/create-form/scripts
npm install
Forms not created correctly
Shesha.Domain.YourEntityTimeout errors
timeout: 120000This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.