skills.rest
lubusIN
lubusINOFFICIAL
Explore all skills by this author →
Website𝕏@lubusINGitHub

ui-patterns

Provides UI/UX patterns and Vue component guidelines derived from official Frappe apps.

62|23|Updated Feb 7, 2026
Search Tags:#responsive design#components#vue#ux design#tailwindcss#frappe#ui patterns
One-click install
npx skills add https://github.com/lubusIN/frappe-skills --skill ui-patterns-lubusin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/lubusIN/frappe-skills/tree/main/ui-patterns
Command: npx skills add https://github.com/lubusIN/frappe-skills --skill ui-patterns-lubusin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing interfaces for custom Frappe applications often results in inconsistent layouts, missing states, and unfamiliar UX when developers lack reference patterns from official apps like CRM, Helpdesk, and HRMS. ## Core Features & Use Cases - App Shell Patterns: Standard sidebar, header, list view, and split detail-panel layouts matching official Frappe apps. - Component Guidelines: Usage patterns for Frappe UI components including Button, FormControl, Badge, Dialog, Tabs, and Skeleton loaders. - Responsive Design: Mobile patterns with collapsible sidebars, bottom sheets, swipe actions, and safe-area handling. - Use Case: When building a CRM-like app, apply the Kanban view pattern for deal pipelines, the activity feed for tracking changes, and the status color conventions to match the Frappe ecosystem. ## Quick Start Use the ui-patterns skill to design a list view with detail panel for my custom Frappe app following CRM layout conventions.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
How do I design a Frappe app UI consistent with CRM and Helpdesk?▼

Follow the standard app shell with a sidebar navigation, main content area, and optional split detail panel. Study official apps like Frappe CRM and Helpdesk for list views, Kanban boards, and activity feed patterns before designing custom layouts.

What Frappe UI components should I use for list views?▼

Use ListView with search Input, FilterDropdown, ViewToggle for list/kanban/grid modes, and a solid Button for creating records. Rows typically combine Avatar, Badge for status, and Dropdown for row actions.

Does Frappe UI support mobile responsive layouts?▼

Yes, use TailwindCSS breakpoints with useMediaQuery from @vueuse/core to detect mobile. Hide the sidebar behind a drawer, stack list and detail views, and replace inline filters with bottom sheets on small screens.

Why should I use skeleton loaders instead of spinners?▼

Skeleton loaders preserve layout structure during loading, giving users a preview of incoming content and reducing perceived wait time. Spinners cause jarring layout shifts and are discouraged in Frappe app patterns.

What status colors should I use in Frappe app badges?▼

Use green for success/active states, yellow for pending or warnings, red for errors or overdue items, blue for new or informational states, and gray for drafts or cancelled records. Apply these through Badge variants consistently.

Related Skills

Explore More Design & Creative Skills→
lubusINlubusIN
48

frappe-frontend-development

Build Frappe app frontends with Vue 3 and Frappe UI components.

Official
Intermediate
lubusINlubusIN
48

frappe-api-development

Build secure REST and RPC APIs in Frappe with authentication and permission checks.

Official
Advanced
lubusINlubusIN
48

frappe-desk-customization

Automate Frappe Desk UI customization with form scripts, list scripts, and dialogs.

Official
Intermediate
vultisigvultisig
19

svg-icon-pattern

Define SVG icon components using SvgProps and fontSize sizing.

Official
Basic