E
engram-ui-elements
About engram-ui-elements
A UX skill for contributors building Engram dashboard pages and components. It guides navigation, empty states, metrics, and the choice of cards, tables, and action placement.
Key features
- 01Connected navigation between entities
- 02Informative empty-state guidance
- 03Metrics tied to system state
- 04Cards and tables by content type
- 05Contextual action placement
Use cases
- 01Adding a dashboard page or partial
- 02Designing entity lists and detail views
- 03Explaining missing data in empty states
- 04Choosing between cards and tables
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/engram-ui-elementsin Claude Code to confirm it loaded.
Details
From the project READMEWhen 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
- Every list item should lead somewhere useful when domain relationships exist.
- Prefer connected flows: project -> session -> observation -> full detail.
- Empty states must explain what is missing and what unlocks data.
- Metrics must reflect real system state, not decorative counters.
- 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.
Comments
Markdown supported