Agent skill

UI Guidelines

HMIS UI development guidelines for JSF/XHTML pages. An agent skill from hmislk/hmis.

GPL-3.0Auto-check passedFrontend & Design

Install UI Guidelines

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/ui-guidelines .claude/skills/ui-guidelines && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .claude/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/ui-guidelines .agents/skills/ui-guidelines && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .agents/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/ui-guidelines .cursor/skills/ui-guidelines && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .cursor/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/hmislk/hmis.git --path .codex/skills/ui-guidelines

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/ui-guidelines .gemini/skills/ui-guidelines && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .gemini/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/ui-guidelines .github/skills/ui-guidelines && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .github/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add hmislk/hmis --skill ui-guidelines -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install hmislk/hmis ui-guidelines --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/hmislk/hmis.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/ui-guidelines .opencode/skills/ui-guidelines && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-guidelines" agent skill from https://github.com/hmislk/hmis/tree/development/.codex/skills/ui-guidelines into .opencode/skills/ui-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-guidelines", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ui-guidelines
GitHub stars: 236
Token cost: ~816 tokens
SKILL.md length: 237 words
Files: 1
Skills in repo: 33
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

HMIS UI development guidelines for JSF/XHTML pages. An agent skill from hmislk/hmis.

Modifying XHTML pages
SKILL.md covers Critical Rules, Page Skeleton, Layout and Typography and Panel Structure, plus 3 more sections
Reaches xmlns.jcp.org and w3.org
PrimeFaces components

What it does

UI Guidelines is an agent skill from hmislk/hmis. 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.

Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Responsive design, Frontend development and Accessibility. The repository describes itself as: This is an Open Source Java EE based Hospital Information Management System. The licence is GPL-3.0.

When your agent uses it

Modifying XHTML pages
PrimeFaces components
Any frontend/UI work

Example prompts

“/ui-guidelines”

What it can do on your machine

Read from SKILL.md and the folder at commit 1820c4a. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are xhtml).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- xmlns.jcp.org
- w3.org
- primefaces.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Guidelines loads about 816 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 237 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~86
When it runs · the whole SKILL.md, loaded when a task matches: ~816

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hmislk/hmis at commit 1820c4a, republished under its GPL-3.0 licence (© hmislk). 237 words, ~816 tokens.

Download SKILL.mdSave it as .claude/skills/ui-guidelines/SKILL.md (or your agent's skills folder).

name: ui-guidelines
description: 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.
user-invocable: true

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>
                <!-- 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.

Files

Just SKILL.md in .codex/skills/ui-guidelines of hmislk/hmis.

Open the folder on GitHubat commit 1820c4a

Compare with similar skills

UI Guidelines next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Guidelines compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI Guidelines this skillhmislk/hmis	236	—	~816	Automated safety check: Pass	GPL-3.0	today
UI CraftMemTensor/memmy-agent	2.1k	—	~2.9k	Automated safety check: Pass	MIT	7 days ago
Web Design Guidelinesehmo/platform-design-skills	605	—	~9.7k	Automated safety check: Pass	MIT	6 mo ago
Web Design GuidelinesCloudAI-X/claude-workflow-v2	1.4k	—	~1.7k	Automated safety check: Pass	MIT	yesterday
Frontend DesignRedWoodOG/Hermes-Desktop	177	—	~1.2k	Automated safety check: Pass	None	4 mo ago
Common Web Visual TestingHoangNguyen0403/agent-skills-standard	570	—	~760	Automated safety check: Pass	MIT	yesterday

Similar skills

UI Craft
MemTensor/memmy-agent
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.
2.1k GitHub stars~2.9k tokensUpdated 7 days ago
Frontend & DesignAuto-check passed
Web Design Guidelines
ehmo/platform-design-skills
Web platform design and accessibility guidelines. An agent skill from ehmo/platform-design-skills.
605 GitHub stars~9.7k tokensUpdated 6 mo ago
Frontend & DesignAuto-check passed
Web Design Guidelines
CloudAI-X/claude-workflow-v2
Review UI code for Web Interface Guidelines compliance. An agent skill from CloudAI-X/claude-workflow-v2.
1.4k GitHub stars~1.7k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Frontend Design
RedWoodOG/Hermes-Desktop
Frontend development with modern frameworks, responsive design, and accessibility best practices.
177 GitHub stars~1.2k tokensUpdated 4 mo ago
Frontend & DesignAuto-check passed
Common Web Visual Testing
HoangNguyen0403/agent-skills-standard
Standardizes visual audits, responsive design, and behavioral testing for web apps.
570 GitHub stars~760 tokensUpdated yesterday
Frontend & DesignAuto-check passed
HTML Coder
TokenRhythm/opensquilla
Guides semantic, accessible HTML work: pages, forms, media and HTML5 APIs, plus how to deliver a runnable webpage project with a preview.
7.1k GitHub stars~1.4k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed

Questions about UI Guidelines

What does UI Guidelines do?

HMIS UI development guidelines for JSF/XHTML pages. An agent skill from hmislk/hmis. UI Guidelines is an agent skill from hmislk/hmis. HMIS UI development guidelines for JSF/XHTML pages.

When should I use UI Guidelines?

UI Guidelines fits situations like: modifying XHTML pages; primeFaces components; any frontend/UI work.

How do I install UI Guidelines in Claude Code?

Run `npx skills add hmislk/hmis --skill ui-guidelines -a claude-code`. Or copy the skill folder (.codex/skills/ui-guidelines in hmislk/hmis) into .claude/skills/ui-guidelines in your project. Claude Code loads it when a task matches its description.

How do I install UI Guidelines in Codex?

Run `npx skills add hmislk/hmis --skill ui-guidelines -a codex`. Or copy the skill folder (.codex/skills/ui-guidelines in hmislk/hmis) into .agents/skills/ui-guidelines in your project. Codex loads it when a task matches its description.

Can I use UI Guidelines in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hmislk/hmis --skill ui-guidelines -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-guidelines, .gemini/skills/ui-guidelines, .github/skills/ui-guidelines and .opencode/skills/ui-guidelines in your project.

What does UI Guidelines need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Guidelines is instructions for the agent only.

Does UI Guidelines access the network?

SKILL.md names 3 domains. In commands or code: xmlns.jcp.org, w3.org and primefaces.org; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is UI Guidelines safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Guidelines use?

UI Guidelines is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Guidelines use?

About 816 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Guidelines?

Skills that share tags, products or a category with UI Guidelines: UI Craft (MemTensor/memmy-agent, 2.1k stars), Web Design Guidelines (ehmo/platform-design-skills, 605 stars), Web Design Guidelines (CloudAI-X/claude-workflow-v2, 1.4k stars) and Frontend Design (RedWoodOG/Hermes-Desktop, 177 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Guidelines?

hmislk (a GitHub organization) maintains it in hmislk/hmis, which has 236 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on October 7, 2026.

Source: hmislk/hmis on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

UI Guidelines

Install UI Guidelines

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HMIS UI Development Guidelines

Critical Rules

Page Skeleton

Layout and Typography

Panel Structure

Forms and Inputs

Buttons

For complete reference

Files

Compare with similar skills

Similar skills

UI Craft

Web Design Guidelines

Web Design Guidelines

Frontend Design

Common Web Visual Testing

HTML Coder

More from hmislk/hmis

API Usage

App Configuration

Caveman

Database Guide

Demo Video

Deploy QA

Questions about UI Guidelines

Install UI Guidelines

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HMIS UI Development Guidelines

Critical Rules

Page Skeleton

Layout and Typography

Panel Structure

Forms and Inputs

Buttons

For complete reference

Files

Compare with similar skills

Similar skills

More from hmislk/hmis

Related

Questions about UI Guidelines