skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frappe-impl-ui-components

Implement responsive Frappe UI dialogs, lists, calendars, Kanban boards, and realtime socket updates.

163|53|Updated Jan 14, 2026
Search Tags:#dialogs#socket.io#kanban board#realtime updates#frappe ui#list view customization#calendar view
One-click install
npx skills add https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-impl-ui-components-impertio-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frappe-impl-ui-components
Source: https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package/tree/main/skills/source/impl/frappe-impl-ui-components
Command: npx skills add https://github.com/Impertio-Studio/Frappe_Claude_Skill_Package --skill frappe-impl-ui-components-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common Frappe UI failures where dialogs freeze, list/table definitions render incorrectly, and realtime events don’t fire as expected, leading to buggy client behavior and confusing user experiences.

Core Features & Use Cases

  • Dialog-first UI workflows: Create robust frappe.ui.Dialog flows (including tables and multi-step wizards) while enforcing safe async patterns.
  • Production-ready list customization: Configure {doctype}_list.js with correct indicators, formatters, and row actions that refresh safely.
  • Realtime updates done right: Pair frappe.publish_realtime with correct after_commit=True and subscribe via frappe.realtime.on for live UI refresh.
  • Pages and view components: Build custom frappe.ui.Page tool pages, configure Kanban boards for the right DocTypes, and set up calendar views via {doctype}_calendar.js.
  • Scanner and UI safety guardrails: Implement barcode/QR flows and apply anti-pattern rules that avoid freezes, wrong error handling, and missing field mappings.

Quick Start

Use the frappe-impl-ui-components skill to design a custom dialog that asks for input, calls an async frappe.call, and updates a list in realtime without freezing the browser.

Frequently Asked Questions about frappe-impl-ui-components

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

FAQPage Schema
How do I build a Frappe dialog that calls an async function without freezing the UI?▼

To prevent a Frappe UI Dialog from freezing during asynchronous operations, hide or disable action buttons inside the callback function of your `frappe.call`, ensuring the interface safely awaits server responses without locking up.

Why does my Frappe realtime socket update not fire on the client side?▼

Frappe realtime socket updates fail to fire when `frappe.publish_realtime` is not paired with `after_commit=True`, ensuring the event only dispatches to subscribed clients after the database transaction successfully completes.

How do I customize a Frappe list view with indicators and formatters?▼

Customize Frappe list views by configuring `{doctype}_list.js` with valid indicator and formatter patterns, ensuring correct row rendering and safe refreshes when applying custom row actions to data-rich lists.

Can I set up a Kanban board for any Frappe DocType?▼

Frappe Kanban boards require specific prerequisites: the target DocType must have a valid select field configured to represent Kanban columns before the board can render and function correctly.

What is the correct way to map fields in a Frappe calendar view?▼

Mapping fields in a Frappe calendar view requires configuring `{doctype}_calendar.js` with proper field mappings, ensuring the calendar accurately maps start dates, end dates, and event titles for correct rendering.

How do I handle realtime subscription cleanup in a custom Frappe page?▼

Handle realtime subscription cleanup in custom Frappe pages by explicitly unsubscribing from `frappe.realtime.on` events during page teardown, preventing memory leaks and duplicate event triggers during navigation.

Related Skills

Explore More Software Engineering Skills→
PabloGarciaFuentesPabloGarciaFuentes

astro-framework

Build Astro islands with client directives, Zod schemas, and SSR adapters.

Community
Advanced
anonymousminatianonymousminati

frappe-impl-ui-components

Build Frappe client-side UI components with realtime socket interactions.

Community
Advanced
anonymousminatianonymousminati

frappe-syntax-print

Design and troubleshoot Frappe print formats and PDF generation workflows.

Community
Advanced
anonymousminatianonymousminati

frappe-syntax-clientscripts

Write Frappe client-side JavaScript for form events, validation, and server calls.

Community
Advanced