frappe-ui-patterns

Standardize Frappe app UI with reusable navigation, list, and form patterns.

48|17|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/lubusIN/agent-skills --skill frappe-ui-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frappe-ui-patterns
Source: https://github.com/lubusIN/agent-skills/tree/main/skills/frappe/frappe-ui-patterns
Command: npx skills add https://github.com/lubusIN/agent-skills --skill frappe-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frappe UI consistency is hard to achieve across diverse apps; this Skill provides a centralized set of UI/UX patterns and templates to standardize navigation, layout, and components across Frappe apps.

Core Features & Use Cases

  • Standard shell and navigation patterns (sidebar, header, and content regions) aligned with CRM/Helpdesk experiences.
  • Reusable patterns for lists, detail panels, forms, and activity feeds that accelerate development and ensure a cohesive UX.
  • Use Case: design a CRM-like module with Leads, Deals, and Tickets that benefits from proven UX patterns to reduce user training and cognitive load.

Quick Start

Apply the Frappe UI patterns to your new app's shell to ensure consistency.

Frequently Asked Questions about frappe-ui-patterns

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

FAQPage Schema
How do I standardize UI across multiple Frappe apps?

Standardize UI across Frappe apps by applying reusable UI patterns and templates for navigation, layout, and components, ensuring a consistent user experience and cohesive design across CRM, Helpdesk, and custom modules.

What Frappe UI patterns are available for lists and detail panels?

Available Frappe UI patterns include reusable templates for lists, detail panels, forms, and activity feeds, alongside standard shell and navigation patterns like sidebars and headers aligned with CRM and Helpdesk experiences.

Can I use these UI patterns for a custom Frappe application?

Yes, you can apply these UI patterns to any custom Frappe application requiring consistent navigation, lists, detail panels, and forms, ensuring adherence to Frappe UI components and responsive layout rules.

Does this provide responsive design rules for Frappe modules?

Yes, this provides responsive layout rules and guidance for patterns, components, and example shells, requiring adherence to standard Frappe UI components to ensure layouts adapt correctly across different devices.

When do I need centralized UX guidelines for Frappe development?

You need centralized UX guidelines for Frappe development when UI consistency becomes hard to achieve across diverse apps, and you want to reduce user training and cognitive load by applying proven UX patterns.

How do I design a CRM-like module with consistent navigation in Frappe?

Design a CRM-like module by applying standard shell and navigation patterns, such as sidebars, headers, and content regions, alongside reusable patterns for lists and forms to reduce user training and cognitive load.