Borrowing it
Nothing to install: this file belongs to LF-Decentralized-Trust-labs/gitmesh. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/LF-Decentralized-Trust-labs/gitmesh/main/.claude/skills/design-guide/SKILL.mdgit clone --depth 1 https://github.com/LF-Decentralized-Trust-labs/gitmeshWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/lf-decentralized-trust-labs/gitmesh/design-guide)<a href="https://agentmods.dev/skills/lf-decentralized-trust-labs/gitmesh/design-guide"><img src="https://agentmods.dev/badge/skills/lf-decentralized-trust-labs/gitmesh/design-guide.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00083 | $0.03171 |
| Opus 5 | $0.00042 | $0.01586 |
| Sonnet 5 | $0.00017 | $0.00634 |
| Haiku 4.5 | $0.00008 | $0.00317 |
Grade A, and why
design-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 341 lines — stays where its author put it; the contents beside it link to each section on GitHub.
GitMesh Agents Design Guide
This guide is split into:
- Section A - Foundations. What the system is, what it's built on, and the tokens you draw from.
- Section B - Building blocks. Components, when to make new ones, how to compose them.
- Section C - Working in the codebase. File conventions, the showcase page, common mistakes.
Use this skill alongside frontend-design (visual polish) and
web-design-guidelines (web best practices).
Section A - Foundations
A.1 Stance
GitMesh Agents is a professional control plane - dense, keyboard-driven, dark-themed by default. Every pixel earns its place.
The five non-negotiable principles:
- Density beats padding. Show information without requiring clicks. Whitespace separates; it does not pad.
- Keyboard-first. Global shortcuts (
Cmd+K,C,[,]). Power users rarely touch the mouse. - Contextual, not modal. Inline editing over dialogs. Dropdowns over page navigations.
- Dark-themed by default. Neutral grays (OKLCH), not pure black. Accent colour reserved for status / priority. Text is the primary visual element.
- Component-driven. Reusable components capture conventions. Build at the right abstraction - not too granular, not monolithic.
A.2 Stack
| Concern | Choice |
|---|---|
| Framework | React 19 + TypeScript + Vite |
| Styling | Tailwind CSS v4 with CSS variables (OKLCH) |
| UI primitives | shadcn/ui (new-york style, neutral base, CSS variables on) |
| Accessibility | Radix UI primitives |
| Icons | Lucide React (16px nav, 14px inline) |
| Variants | class-variance-authority (CVA) |
| Class merging | clsx + tailwind-merge via the cn() utility |
Path aliases live in ui/components.json: @/components,
@/components/ui, @/lib, @/hooks.
A.3 Tokens
All tokens are CSS variables in ui/src/index.css. Both light and dark
themes use OKLCH. Never use raw hex / rgb values - always use a
semantic token.
Colour tokens
| Token pair | Used for |
|---|---|
--background / --foreground |
Page background and primary text |
--card / --card-foreground |
Card surfaces |
--primary / --primary-foreground |
Primary actions and emphasis |
--secondary / --secondary-foreground |
Secondary surfaces |
--muted / --muted-foreground |
Subdued text and labels |
--accent / --accent-foreground |
Hover states and active nav |
--destructive |
Destructive actions |
--border |
All borders |
--ring |
Focus rings |
--sidebar-* |
Sidebar-specific variants |
--chart-1...--chart-5 |
Data visualisation |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 341 lines · 83 tokens per session scan A bdbbc95719eb
design-guide is a skill published in the GitHub repository LF-Decentralized-Trust-labs/gitmesh (143 stars, last pushed yesterday), licensed Apache-2.0. It adds 83 tokens to every session and 3,171 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
layout-patterns
Common UI layout patterns using fundamental-styles - login forms, dashboards, master-detail, wizards, and more.
component-composition
How to combine fundamental-styles components correctly - required wrappers, nesting rules, and common composition patterns.
bem-naming
BEM (Block Element Modifier) methodology and naming conventions used in fundamental-styles with real examples.
component-docs
Browse fundamental-styles component documentation with complete HTML examples from 140+ auto-generated markdown files. Use this when the user asks about component examples, modifiers, variants, HTML structure, or wants to see working code for any fundamental-styles component (button, table, input, dialog, etc.). Also…
static-web-artifacts-builder
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.
component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc.