Skip to content
Agent Memory
Skill

/ui-elements

Creation rules for Engram UI elements, pages, cards, metrics, and detail flows. Trigger: Adding or changing dashboard UI components or connected browsing flows.

BOOST
@gentleman-programminggentleman-programming@gentleman-programming
From plugin
engram
8.1k20 skills

Claude Code

$ npx -y skills add Gentleman-Programming/engram --skill ui-elements --agent claude-code

SKILL.md

ui-elements.SKILL.md
name: engram-ui-elements
description: >
  Creation rules for Engram UI elements, pages, cards, metrics, and detail flows.
  Trigger: Adding or changing dashboard UI components or connected browsing flows.
license: Apache-2.0
metadata:
  author: gentleman-programming
  version: "1.0"

When to Use

Use this skill when:

  • Adding a new page or partial to the dashboard
  • Creating cards, metrics, tables, lists, or detail views
  • Designing connected navigation between related entities

---

UX Rules

1. Every list item should lead somewhere useful when domain relationships exist. 2. Prefer connected flows: project -> session -> observation -> full detail. 3. Empty states must explain what is missing and what unlocks data. 4. Metrics must reflect real system state, not decorative counters. 5. Detail pages should show metadata, content, and the next relevant links.

---

Composition Rules

  • Use metrics for orientation, not for replacing core content.
  • Use cards for browsable entities and tables for dense comparative admin data.
  • Avoid nested framed boxes unless they communicate a hierarchy the user needs.
  • Keep action controls close to the entity they affect.
Read it on GitHub ↗
Stats
PythonJavaScriptNodeBashSQLiteLinuxGitGitHubAnthropicGeminiMCPObsidian
8,135
Stars
825
Forks
Active
Maintenance
Go
Language
MIT
License
Last commit
Created

Repo: Gentleman-Programming/engram

In this plugin
20 skills
See everything inside
@gentleman-programming
Ships withengram

Persistent memory system for AI coding agents. Agent-agnostic Go binary with SQLite + FTS5, MCP server, HTTP API, CLI, and TUI.

8.1k20 skills
Get the whole plugin

Stars on GitHub

Momentum

stars in total
8.1k
Star history of Gentleman-Programming/engram on GitHub, a chart by star-history.com
See what's trending this week

Other skills on engram.

memory

memory

ALWAYS ACTIVE — Selective persistent memory: preserve verified, durable knowledge worth reconstructing, with safe topic updates…

engram
@gentleman-programming@gentleman-programmingInstall Skill
branch-pr

branch-pr

PR creation workflow for Engram following the issue-first enforcement system. Trigger: When creating a pull request, opening a…

engram
@gentleman-programming@gentleman-programmingInstall Skill
See all 20 skills in engram

More skills from other plugins.

agent-cost-report

agent-cost-report

Believable agent cost report for any period, default the last 7 full days PT, not counting today. Measured tokens from Claude…

claude-mem3d116k
@thedotmack@thedotmackInstall Skill
bot-handoff

bot-handoff

Keep a durable record of work passed between Bots in the shared Hindsight memory bank. Use when handing work to another Bot, when…

hindsight4d60k
@vectorize-io@vectorize-ioInstall Skill
mempalace

mempalace

Install, configure, and operate MemPalace, including a private local palace, a shared-brain hub, or a client joining an existing…

mempalace2w60k
@mempalace@mempalaceInstall Skill
mempalace

mempalace

Install, configure, and operate MemPalace, including a private local palace, a shared-brain hub, or a client joining an existing…

mempalace2w60k
@milla-jovovich@milla-jovovichInstall Skill

Questions about ui-elements.

Which coding agents can use ui-elements?
ui-elements installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.