frappe-ui-patterns

Name: frappe-ui-patterns
Author: lubusIN

45installs11forks

How to install frappe-ui-patterns?

lubusin/frappe-skills/frappe-ui-patterns

$npx -y skills add lubusIN/frappe-skills --skill frappe-ui-patterns

Installs into the current project.

Summary

UI/UX patterns and guidelines derived from official Frappe apps (CRM, Helpdesk, HRMS). Use when designing interfaces for custom Frappe applications to ensure consistency with the ecosystem.

Files · 1

View on GitHub

SKILL.md

1	# Frappe UI Patterns
2
3	UI/UX patterns and design guidelines extracted from official Frappe applications.
4
5	## When to use
6
7	- Designing UI for a new Frappe app
8	- Building CRUD interfaces with Frappe UI
9	- Implementing list views, detail panels, or forms
10	- Ensuring consistent UX with CRM, Helpdesk, HRMS
11	- Choosing component patterns and layouts
12
13	## Inputs required
14
15	- App type (CRM-like, Helpdesk-like, data management)
16	- Key entities and their relationships
17	- Primary user workflows
18
19	## Reference apps
20
21	Study these official apps for patterns:
22
23	\| App \| Repo \| Key Patterns \|
24	\|-----\|------\|--------------\|
25	\| Frappe CRM \| [github.com/frappe/crm](https://github.com/frappe/crm) \| Lead/Deal pipelines, Kanban, activity feeds \|
26	\| Frappe Helpdesk \| [github.com/frappe/helpdesk](https://github.com/frappe/helpdesk) \| Ticket queues, SLA indicators, agent views \|
27	\| Frappe HRMS \| [github.com/frappe/hrms](https://github.com/frappe/hrms) \| Employee self-service, approvals, dashboards \|
28	\| Frappe Insights \| [github.com/frappe/insights](https://github.com/frappe/insights) \| Query builders, visualizations, dashboards \|
29	\| Frappe Builder \| [github.com/frappe/builder](https://github.com/frappe/builder) \| Drag-drop interfaces, property panels \|
30
31	## Procedure
32
33	### 0) App shell structure
34
35	All Frappe apps follow a consistent shell:
36
37	```
38	┌─────────────────────────────────────────────────────────────┐
39	│ Header (App title, search, user menu) │
40	├──────────────┬──────────────────────────────────────────────┤
41	│ │ │
42	│ Sidebar │ Main Content │
43	│ │ │
44	│ - Nav items │ ┌─────────────────┬──────────────────────┐ │
45	│ - Filters │ │ List View │ Detail Panel │ │
46	│ - Actions │ │ │ │ │
47	│ │ │ │ │ │
48	│ │ └─────────────────┴──────────────────────┘ │
49	│ │ │
50	└──────────────┴──────────────────────────────────────────────┘
51	```
52
53	Implementation:
54	```vue
55	<template>
56	<div class="flex h-screen">
57	<!-- Sidebar -->
58	<Sidebar />
59
60	<!-- Main content with optional split view -->
61	<div class="flex-1 flex">
62	<ListView
63	:class="selectedDoc ? 'w-1/2' : 'w-full'"
64	@select="selectDoc"
65	/>
66	<DetailPanel
67	v-if="selectedDoc"
68	:doc="selectedDoc"
69	class="w-1/2 border-l"
70	/>
71	</div>
72	</div>
73	</template>
74	```
75
76	### 1) Sidebar patterns
77
78	Standard structure:
79	```vue
80	<template>
81	<aside class="w-56 border-r bg-gray-50 flex flex-col">
82	<!-- App logo/title -->
83	<div class="p-4 border-b">
84	<h1 class="font-semibold">My App</h1>
85	</div>
86
87	<!-- Primary navigation -->
88	<nav class="flex-1 p-2">
89	<SidebarLink
90	v-for="item in navItems"
91	:key="item.name"
92	:label="item.label"
93	:icon="item.icon"
94	:to="item.route"
95	:count="item.count"
96	/>
97	</nav>
98
99	<!-- Quick filters (context-dependent) -->
100	<div v-if="filters.length" class="p-2 border-t">
101	<p class="text-xs text-gray-500 px-2 mb-1">Filters</p>
102	<SidebarLink
103	v-for="filter in filters"
104	:key="filter.name"
105	:label="filter.label"
106	:count="filter.count"
107	@click="applyFilter(filter)"
108	/>
109	</div>
110
111	<!-- User/settings at bottom -->
112	<div class="p-2 border-t">
113	<UserMenu />
114	</div>
115	</aside>
116	</template>
117	```
118
119	CRM example nav items:
120	- Leads (with count badge)
121	- Deals (with count badge)
122	- Contacts
123	- Organizations
124	- Activities
125	- ---
126	- Settings
127
128	### 2) List view patterns
129
130	Standard list with filters:
131	```vue
132	<template>
133	<div class="flex-1 flex flex-col">
134	<!-- Toolbar -->
135	<div class="flex items-center justify-between p-4 border-b">
136	<div class="flex items-center gap-2">
137	<Input
138	type="search"
139	placeholder="Search..."
140	v-model="searchQuery"
141	:debounce="300"
142	/>
143	<FilterDropdown :filters="availableFilters" v-model="activeFilters" />
144	</div>
145	<div class="flex items-center gap-2">
146	<ViewToggle v-model="viewMode" :options="['list', 'kanban', 'grid']" />
147	<Button variant="solid" @click="createNew">
148	<template #prefix><FeatherIcon name="plus" /></template>
149	New
150	</Button>
151	</div>
152	</div>
153
154	<!-- View modes -->
155	<ListView v-if="viewMode === 'list'" :data="items" @row-click="select" />
156	<KanbanView v-else-if="viewMode === 'kanban'" :data="items" :columns="stages" />
157	<GridView v-else :data="items" @card-c

People who liked this also viewed

6 picks

Type

frappe-ui-patterns

45installs11forks

View on GitHub

How to install frappe-ui-patterns?

lubusin/frappe-skills/frappe-ui-patterns

$npx -y skills add lubusIN/frappe-skills --skill frappe-ui-patterns

Installs into the current project.

Summary

UI/UX patterns and guidelines derived from official Frappe apps (CRM, Helpdesk, HRMS). Use when designing interfaces for custom Frappe applications to ensure consistency with the ecosystem.

Files · 1

View on GitHub

SKILL.md

1	# Frappe UI Patterns
2
3	UI/UX patterns and design guidelines extracted from official Frappe applications.
4
5	## When to use
6
7	- Designing UI for a new Frappe app
8	- Building CRUD interfaces with Frappe UI
9	- Implementing list views, detail panels, or forms
10	- Ensuring consistent UX with CRM, Helpdesk, HRMS
11	- Choosing component patterns and layouts
12
13	## Inputs required
14
15	- App type (CRM-like, Helpdesk-like, data management)
16	- Key entities and their relationships
17	- Primary user workflows
18
19	## Reference apps
20
21	Study these official apps for patterns:
22
23	\| App \| Repo \| Key Patterns \|
24	\|-----\|------\|--------------\|
25	\| Frappe CRM \| [github.com/frappe/crm](https://github.com/frappe/crm) \| Lead/Deal pipelines, Kanban, activity feeds \|
26	\| Frappe Helpdesk \| [github.com/frappe/helpdesk](https://github.com/frappe/helpdesk) \| Ticket queues, SLA indicators, agent views \|
27	\| Frappe HRMS \| [github.com/frappe/hrms](https://github.com/frappe/hrms) \| Employee self-service, approvals, dashboards \|
28	\| Frappe Insights \| [github.com/frappe/insights](https://github.com/frappe/insights) \| Query builders, visualizations, dashboards \|
29	\| Frappe Builder \| [github.com/frappe/builder](https://github.com/frappe/builder) \| Drag-drop interfaces, property panels \|
30
31	## Procedure
32
33	### 0) App shell structure
34
35	All Frappe apps follow a consistent shell:
36
37	```
38	┌─────────────────────────────────────────────────────────────┐
39	│ Header (App title, search, user menu) │
40	├──────────────┬──────────────────────────────────────────────┤
41	│ │ │
42	│ Sidebar │ Main Content │
43	│ │ │
44	│ - Nav items │ ┌─────────────────┬──────────────────────┐ │
45	│ - Filters │ │ List View │ Detail Panel │ │
46	│ - Actions │ │ │ │ │
47	│ │ │ │ │ │
48	│ │ └─────────────────┴──────────────────────┘ │
49	│ │ │
50	└──────────────┴──────────────────────────────────────────────┘
51	```
52
53	Implementation:
54	```vue
55	<template>
56	<div class="flex h-screen">
57	<!-- Sidebar -->
58	<Sidebar />
59
60	<!-- Main content with optional split view -->
61	<div class="flex-1 flex">
62	<ListView
63	:class="selectedDoc ? 'w-1/2' : 'w-full'"
64	@select="selectDoc"
65	/>
66	<DetailPanel
67	v-if="selectedDoc"
68	:doc="selectedDoc"
69	class="w-1/2 border-l"
70	/>
71	</div>
72	</div>
73	</template>
74	```
75
76	### 1) Sidebar patterns
77
78	Standard structure:
79	```vue
80	<template>
81	<aside class="w-56 border-r bg-gray-50 flex flex-col">
82	<!-- App logo/title -->
83	<div class="p-4 border-b">
84	<h1 class="font-semibold">My App</h1>
85	</div>
86
87	<!-- Primary navigation -->
88	<nav class="flex-1 p-2">
89	<SidebarLink
90	v-for="item in navItems"
91	:key="item.name"
92	:label="item.label"
93	:icon="item.icon"
94	:to="item.route"
95	:count="item.count"
96	/>
97	</nav>
98
99	<!-- Quick filters (context-dependent) -->
100	<div v-if="filters.length" class="p-2 border-t">
101	<p class="text-xs text-gray-500 px-2 mb-1">Filters</p>
102	<SidebarLink
103	v-for="filter in filters"
104	:key="filter.name"
105	:label="filter.label"
106	:count="filter.count"
107	@click="applyFilter(filter)"
108	/>
109	</div>
110
111	<!-- User/settings at bottom -->
112	<div class="p-2 border-t">
113	<UserMenu />
114	</div>
115	</aside>
116	</template>
117	```
118
119	CRM example nav items:
120	- Leads (with count badge)
121	- Deals (with count badge)
122	- Contacts
123	- Organizations
124	- Activities
125	- ---
126	- Settings
127
128	### 2) List view patterns
129
130	Standard list with filters:
131	```vue
132	<template>
133	<div class="flex-1 flex flex-col">
134	<!-- Toolbar -->
135	<div class="flex items-center justify-between p-4 border-b">
136	<div class="flex items-center gap-2">
137	<Input
138	type="search"
139	placeholder="Search..."
140	v-model="searchQuery"
141	:debounce="300"
142	/>
143	<FilterDropdown :filters="availableFilters" v-model="activeFilters" />
144	</div>
145	<div class="flex items-center gap-2">
146	<ViewToggle v-model="viewMode" :options="['list', 'kanban', 'grid']" />
147	<Button variant="solid" @click="createNew">
148	<template #prefix><FeatherIcon name="plus" /></template>
149	New
150	</Button>
151	</div>
152	</div>
153
154	<!-- View modes -->
155	<ListView v-if="viewMode === 'list'" :data="items" @row-click="select" />
156	<KanbanView v-else-if="viewMode === 'kanban'" :data="items" :columns="stages" />
157	<GridView v-else :data="items" @card-c

People who liked this also viewed

6 picks

Type