How do I install the UI Guidelines skill?

Run npx skillmds@latest add majiayu000/ui-guidelines-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Guidelines?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Guidelines by majiayu000 — Agent Skill

Name: UI Guidelines
Rating: 4.2 (5 reviews)
Author: majiayu000

UI Guidelines

HMIS UI development guidelines for JSF/XHTML pages. Use when creating or modifying XHTML pages, PrimeFaces components, page layouts, forms, buttons, panels, datatables, or any frontend/UI work. Covers page structure, layout patterns, panel best practices, form inputs, button styling, responsive design, and accessibility rules.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

HMIS UI Development Guidelines

When working on any UI/XHTML task, follow these rules and patterns.

Critical Rules

UI-ONLY CHANGES: When UI improvements are requested, make ONLY frontend/XHTML changes
KEEP IT SIMPLE: Use existing controller properties and methods - avoid introducing filteredValues, globalFilter, or new backend logic
FRONTEND FOCUS: Stick to HTML/CSS styling, PrimeFaces component attributes, and layout improvements
ERP UI RULE: Use h:outputText instead of HTML headings (h1-h6)
PRIMEFACES CSS: Use PrimeFaces button classes, not Bootstrap button classes
XHTML STRUCTURE: HTML DOCTYPE with ui:composition and template inside h:body
XML ENTITIES: Always escape ampersands as & in XHTML attributes

Page Skeleton

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
    <title>Page Title</title>
</h:head>
<h:body>
    <ui:composition template="/resources/template/template.xhtml">
        <ui:define name="content">
            <h:form>
                <!-- Page content -->
            </h:form>
        </ui:define>
    </ui:composition>
</h:body>
</html>

Layout and Typography

Use PrimeFaces components for interaction and Bootstrap utilities for layout (row, col-*, d-flex, spacing)
Prefer p:panelGrid for grid with header; only use p:panel when you need facets/panel styling
Use h:outputText and p:outputLabel for headings/labels instead of HTML heading tags
Keep screens dense and business-focused

Panel Structure

Use f:facet name="header" for panel-related actions
Use p:panelGrid columns="2" layout="tabular" for label-value pairs
Avoid over-nesting; place dataTable directly in panel content

Forms and Inputs

Align labels with p:outputLabel + PrimeFaces components; include for attributes
Heavy operations (reports, exports) use ajax="false" for file downloads
Include descriptive title attributes on interactive elements

Buttons

Navigation: ui-button-info ui-button-outlined
Save/Submit: ui-button-success
Delete/Cancel: ui-button-danger
Secondary actions: ui-button-warning or ui-button-secondary
Always add icons: Use Font Awesome (fa fa-*) icons

For complete reference

Read developer_docs/ui/comprehensive-ui-guidelines.md for the full UI handbook including responsive design, accessibility, datatables, dialogs, and more.

---name: ui-guidelines-2description: HMIS UI development guidelines for JSF/XHTML pages. Use when creating or modifying XHTML pages, PrimeFaces components, page layouts, forms, buttons, panels, datatables, or any frontend/UI work. Covers page structure, layout patterns, panel best practices, form inputs, button styling, responsive design, and accessibility rules.--- # HMIS UI Development Guidelines When working on any UI/XHTML task, follow these rules and patterns. ## Critical Rules - **UI-ONLY CHANGES**: When UI improvements are requested, make ONLY frontend/XHTML changes - **KEEP IT SIMPLE**: Use existing controller properties and methods - avoid introducing filteredValues, globalFilter, or new backend logic - **FRONTEND FOCUS**: Stick to HTML/CSS styling, PrimeFaces component attributes, and layout improvements - **ERP UI RULE**: Use `h:outputText` instead of HTML headings (h1-h6) - **PRIMEFACES CSS**: Use PrimeFaces button classes, not Bootstrap button classes - **XHTML STRUCTURE**: HTML DOCTYPE with `ui:composition` and template inside `h:body` - **XML ENTITIES**: Always escape ampersands as `&` in XHTML attributes ## Page Skeleton ```xhtml <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:head> <title>Page Title</title> </h:head> <h:body> <ui:composition template="/resources/template/template.xhtml"> <ui:define name="content"> <h:form>  </h:form> </ui:define> </ui:composition> </h:body> </html> ``` ## Layout and Typography - Use **PrimeFaces components for interaction** and **Bootstrap utilities for layout** (`row`, `col-*`, `d-flex`, spacing) - Prefer `p:panelGrid` for grid with header; only use `p:panel` when you need facets/panel styling - Use `h:outputText` and `p:outputLabel` for headings/labels instead of HTML heading tags - Keep screens dense and business-focused ## Panel Structure - Use `f:facet name="header"` for panel-related actions - Use `p:panelGrid columns="2" layout="tabular"` for label-value pairs - Avoid over-nesting; place dataTable directly in panel content ## Forms and Inputs - Align labels with `p:outputLabel` + PrimeFaces components; include `for` attributes - Heavy operations (reports, exports) use `ajax="false"` for file downloads - Include descriptive `title` attributes on interactive elements ## Buttons - **Navigation**: `ui-button-info ui-button-outlined` - **Save/Submit**: `ui-button-success` - **Delete/Cancel**: `ui-button-danger` - **Secondary actions**: `ui-button-warning` or `ui-button-secondary` - **Always add icons**: Use Font Awesome (`fa fa-*`) icons ## For complete reference Read [developer_docs/ui/comprehensive-ui-guidelines.md](../../developer_docs/ui/comprehensive-ui-guidelines.md) for the full UI handbook including responsive design, accessibility, datatables, dialogs, and more.

Frequently asked questions