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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.5 | $0.00033 | $0.01268 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (145 stars, last pushed 2d ago), licensed Apache-2.0. It adds 83 tokens to every session and 3,171 once invoked, about $0.0003 per session on Opus 5.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
open-pencil
Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.
visualize
Render a polished visual inline in the chat as part of your answer — a diagram, a chart, an interactive explainer, or a UI mockup. Load it proactively whenever an explanation would land better as a picture than as prose. Do not wait to be asked.
openscreen-design
Use this skill to generate well-branded interfaces and assets for OpenScreen (an AI-native screen-recording studio & video editor), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
vellum-workspace-theme
Customize the app's visual theme — author design-token overrides (accent, background, surfaces, text, message-bubble colors) in the workspace ui/theme.json, validated by the assistant runtime and applied live to connected clients. Covers the token slots, the all-or-none override groups, the contrast floor, and reading…
vellum-avatar
Customize the assistant's avatar - build a native character, upload an image, or generate one with AI.
shieldcn-badges
Create polished shieldcn README badges, badge groups, charts, headers, sponsors grids, and full README hero sections. Use when a user wants shadcn/ui-styled badges, Shields.io replacement, npm/GitHub/CI/status badges, download charts, README header banners, contributor/sponsor images, or README Studio guidance.…