E
engram-visual-language
About engram-visual-language
A visual-design skill for contributors editing Engram’s dashboard. It sets guidance for hierarchy, spacing, typography, color, and the presentation of data in tables and metrics.
Key features
- 01Dashboard visual hierarchy guidance
- 02TUI-inspired palette and accents
- 03Spacing and typography rules
- 04Readable timestamps and identifiers
- 05Guidance for tables and metrics
Use cases
- 01Refining dashboard layout and spacing
- 02Choosing colors and display accents
- 03Presenting timestamps for quick scanning
- 04Making tables and metrics easier to read
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/engram-visual-languagein Claude Code to confirm it loaded.
Details
From the project READMEWhen to Use
Use this skill when:
- Editing
styles.css - Creating new dashboard sections or states
- Refining layout, spacing, typography, or color use
Visual Rules
- The dashboard must feel like Engram, not a generic SaaS admin.
- Prefer strong hierarchy, fewer containers, and clearer breathing room.
- Use the TUI-inspired palette and mono/display accents intentionally.
- Format machine timestamps and raw identifiers into human-scannable UI.
- Decorative framing must never make content harder to read.
Density Rules
- Avoid box-inside-box repetition unless it clarifies information grouping.
- Important text must never touch borders or feel cramped.
- Metrics should read instantly.
- Tables should stay clean, aligned, and visually quieter than hero areas.
Comments
Markdown supported