New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design Guide

by LF-Decentralized-Trust-labs in LF-Decentralized-Trust-labs/gitmesh

GitMesh Agents UI design system. An agent skill from LF-Decentralized-Trust-labs/gitmesh.

Apache-2.0Auto-check passedFrontend & Design

Install Design Guide

skills CLI
$ npx skills add LF-Decentralized-Trust-labs/gitmesh --skill design-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install LF-Decentralized-Trust-labs/gitmesh design-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/LF-Decentralized-Trust-labs/gitmesh.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/design-guide .claude/skills/design-guide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-guide
GitHub stars
144
Token cost
~3.1k tokens
SKILL.md length
1,225 words
Files
2 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
Apache-2.0

At a glance

GitMesh Agents UI design system. An agent skill from LF-Decentralized-Trust-labs/gitmesh.

  • Works in 5 steps: Density beats padding. Show information… → Keyboard-first. Global shortcuts (Cmd+K,… → Contextual, not modal. Inline editing… → …
  • Tasks that involve Design patterns
  • SKILL.md covers Section A - Foundations, Section B - Building blocks and Section C - Working in the…
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design Guide is an agent skill from LF-Decentralized-Trust-labs/gitmesh. GitMesh Agents UI design system. Invoke this skill when creating new components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language. Covers component creation, design tokens, typography, status/priority systems, composition patterns, and the live /design-guide showcase page. Always pair with the frontend-design and web-design-guidelines skills.

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/component-index.md`).

It sits in Frontend & Design, covering Design patterns, Design tokens and Typography. The repository describes itself as: GitMesh: Policy-as-Code Engine for Open Source AI Agent Orchestration. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Design patterns
  • Tasks that involve Design tokens
  • Tasks that involve Typography

Example prompts

  • “/design-guide”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Density beats padding. Show information without requiring clicks. Whitespace separates; it does not pad.
  2. Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.
  3. Contextual, not modal. Inline editing over dialogs. Dropdowns over page navigations.
  4. Dark-themed by default. Neutral grays (OKLCH), not pure black. Accent colour reserved for status / priority. Text is the primary visual…
  5. Component-driven. Reusable components capture conventions. Build at the right abstraction - not too granular, not monolithic.

What it can do on your machine

Read from SKILL.md and the folder at commit df6a2ea. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design Guide loads about 3.1k tokens when it runs, and up to ~5.4k if it reads all its reference files. Until then it costs about 112 tokens; SKILL.md has 1,225 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~112
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from LF-Decentralized-Trust-labs/gitmesh at commit df6a2ea, republished under its Apache-2.0 licence (© LF-Decentralized-Trust-labs). 1,225 words, ~3,137 tokens.

Download SKILL.mdSave it as .claude/skills/design-guide/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
design-guide
description
GitMesh Agents UI design system. Invoke this skill when creating new components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language. Covers component creation, design tokens, typography, status/priority systems, composition patterns, and the live /design-guide showcase page. Always pair with the frontend-design and web-design-guidelines skills.

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:

  1. Density beats padding. Show information without requiring clicks. Whitespace separates; it does not pad.
  2. Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.
  3. Contextual, not modal. Inline editing over dialogs. Dropdowns over page navigations.
  4. Dark-themed by default. Neutral grays (OKLCH), not pure black. Accent colour reserved for status / priority. Text is the primary visual element.
  5. Component-driven. Reusable components capture conventions. Build at the right abstraction - not too granular, not monolithic.
A.2 Stack
ConcernChoice
FrameworkReact 19 + TypeScript + Vite
StylingTailwind CSS v4 with CSS variables (OKLCH)
UI primitivesshadcn/ui (new-york style, neutral base, CSS variables on)
AccessibilityRadix UI primitives
IconsLucide React (16px nav, 14px inline)
Variantsclass-variance-authority (CVA)
Class mergingclsx + 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 pairUsed for
--background / --foregroundPage background and primary text
--card / --card-foregroundCard surfaces
--primary / --primary-foregroundPrimary actions and emphasis
--secondary / --secondary-foregroundSecondary surfaces
--muted / --muted-foregroundSubdued text and labels
--accent / --accent-foregroundHover states and active nav
--destructiveDestructive actions
--borderAll borders
--ringFocus rings
--sidebar-*Sidebar-specific variants
--chart-1...--chart-5Data visualisation
Radius

A single base --radius (0.625rem) drives a small ladder:

  • rounded-sm: small inputs, pills
  • rounded-md: buttons, inputs, small components
  • rounded-lg: cards, dialogs
  • rounded-xl: card containers, large components
  • rounded-full: badges, avatars, status dots

Hard ceiling: rounded-xl (except rounded-full). No rounded-2xl.

Shadows

Minimal: shadow-xs for outline buttons, shadow-sm for cards. Nothing heavier - no shadow-md and up.

A.4 Typography scale

Use these patterns exactly. Do not invent new ones.

PatternClassesWhere it lives
Page titletext-xl font-boldTop of pages
Section titletext-lg font-semiboldMajor sections
Section headingtext-sm font-semibold text-muted-foreground uppercase tracking-wideDesign guide, sidebar
Card titletext-sm font-medium or text-sm font-semiboldCard headers, list item titles
Bodytext-smDefault body text
Muted bodytext-sm text-muted-foregroundDescriptions, secondary text
Tiny labeltext-xs text-muted-foregroundMetadata, timestamps, property labels
Mono identifiertext-xs font-mono text-muted-foregroundIssue keys (GM-001), CSS vars
Large stattext-2xl font-boldDashboard metric values
Code / logfont-mono text-xsLog output, snippets
A.5 Status & priority systems

Status colour is consistent across every entity that has a status. The mapping lives in StatusBadge.tsx and StatusIcon.tsx:

Status (any of)ColourEntity types
active, achieved, completed, succeeded, approved, donegreen shadesAgents, goals, issues, approvals
runningcyanAgents
pausedorangeAgents
idle, pendingyellowAgents, approvals
failed, error, rejected, blockedred shadesRuns, agents, approvals, issues
archived, planned, backlog, cancelledneutral grayVarious
todoblueIssues
in_progressindigoIssues
in_reviewvioletIssues

Priority icons (PriorityIcon.tsx):

  • Critical → red AlertTriangle
  • High → orange ArrowUp
  • Medium → yellow Minus
  • Low → blue ArrowDown

Inline agent status dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).

A.6 Layout

Three-zone shell defined in Layout.tsx:

  • Sidebar: w-60, collapsible, hosts ProjectSwitcher and SidebarSections.
  • Main content: flex-1, scrollable.
  • Properties panel: w-80, only shown on detail views, hidden on lists.

Section B - Building blocks

B.1 Component hierarchy

Three tiers, in order of growing app-specificity:

  1. shadcn/ui primitives: ui/src/components/ui/. Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly - extend through composition.
  2. Custom composites: ui/src/components/. StatusBadge, EntityRow, MetricCard, etc. These encode GitMesh-specific design language.
  3. Pages: ui/src/pages/. Compose primitives + composites into routes.

The complete inventory lives in references/component-index.md. Treat that file as the canonical list of available components.

B.2 When (and when not) to make a new component

Make a new component when:

  • the same visual pattern appears in two or more places;
  • the pattern carries interactive behaviour (status changes, inline editing);
  • the pattern encodes domain logic (status colours, priority icons).

Don't make a component for:

  • one-off layouts specific to a single page;
  • simple className combinations - use Tailwind directly;
  • thin wrappers that add no semantic value.
Show full SKILL.md (489 more words)Show less
B.3 Composition patterns

These patterns may not all be a single component, but they must be applied consistently wherever they appear.

Entity row with status + priority

The standard list-item shape for issues and similar entities:

tsx
<EntityRow
  leading={<><StatusIcon status="in_progress" /><PriorityIcon priority="high" /></>}
  identifier="GM-001"
  title="Implement authentication flow"
  subtitle="Assigned to Agent Alpha"
  trailing={<StatusBadge status="in_progress" />}
  onClick={() => {}}
/>

Leading slot ordering is fixed: StatusIcon first, then PriorityIcon. Trailing slot is a StatusBadge or a timestamp.

Grouped list (status header + rows)
tsx
<div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">
  <StatusIcon status="in_progress" />
  <span className="text-sm font-medium">In Progress</span>
  <span className="text-xs text-muted-foreground ml-1">2</span>
</div>
<div className="border border-border rounded-b-md">
  <EntityRow ... />
  <EntityRow ... />
</div>
Property row (label / value pairs)
tsx
<div className="flex items-center justify-between py-1.5">
  <span className="text-xs text-muted-foreground">Status</span>
  <StatusBadge status="active" />
</div>

The label is always text-xs text-muted-foreground; the value sits on the right; the container uses space-y-1.

Metric card grid (dashboard)
tsx
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
  <MetricCard icon={Bot} value={12} label="Active Agents" description="+3 this week" />
  ...
</div>
Budget progress bar (threshold-coloured)

Colour by threshold: green at <60%, yellow at 60&ndash;85%, red at >85%.

tsx
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
  <div className="h-full rounded-full bg-green-400" style={{ width: `${pct}%` }} />
</div>
Comment thread

Author header (name + timestamp), then body, in bordered cards with space-y-3. Composer textarea + primary button below.

Cost table

Plain <table> with text-xs, header row bg-accent/20, font-mono on numeric values.

Log viewer

bg-neutral-950 rounded-lg p-3 font-mono text-xs container. Colour lines by level: default (foreground), WARN (yellow-400), ERROR (red-400), SYS (blue-300). Include a live indicator dot when streaming.

B.4 Interactive patterns
ConcernTailwind
Entity row hoverhover:bg-accent/50
Nav item hoverhover:bg-accent/50 hover:text-accent-foreground
Active nav itembg-accent text-accent-foreground
Focusfocus-visible:ring-ring focus-visible:ring-[3px]
Disableddisabled:opacity-50 disabled:pointer-events-none
Inline editingUse the InlineEditor component - click to edit, Enter saves, Escape cancels
Popover selectorsStatusIcon and PriorityIcon use Radix Popover for inline selection. Match this pattern for any clickable property that opens a picker.

Section C - Working in the codebase

C.1 File conventions
KindPath / casing
shadcn primitivesui/src/components/ui/{component}.tsx (lowercase, kebab-case)
Custom componentsui/src/components/{ComponentName}.tsx (PascalCase)
Pagesui/src/pages/{PageName}.tsx (PascalCase)
Utilitiesui/src/lib/{name}.ts
Hooksui/src/hooks/{useName}.ts
API modulesui/src/api/{entity}.ts
Context providersui/src/context/{Name}Context.tsx

All components merge classes with cn() from @/lib/utils. All components with multiple visual variants use CVA.

C.2 The /design-guide page
  • Location. ui/src/pages/DesignGuide.tsx
  • Route. /design-guide

This is the living showcase for every component and pattern. It is the source of truth for how things look. Three rules:

  1. When you add a new reusable component, you must add it to the design guide. Show all variants, sizes, and states.
  2. When you change an existing component's API, update its design guide section in the same change.
  3. When you add a new composition pattern, add a section demonstrating it.

Section structure to follow:

tsx
<Section title="My New Component">
  <SubSection title="Variants">
    {/* show all variants */}
  </SubSection>
  <SubSection title="Sizes">
    {/* show all sizes */}
  </SubSection>
  <SubSection title="States">
    {/* show interactive / disabled states */}
  </SubSection>
</Section>

Section ordering is logical: foundations (colours, typography) first, then primitives, then composites, then patterns.

C.3 Workflow when you add a new reusable component
  1. Add it under ui/src/components/ (PascalCase).
  2. Register it in references/component-index.md.
  3. Show every variant / size / state on /design-guide.
  4. Follow the naming and file conventions in §C.1.
C.4 Mistakes to avoid
  • Raw hex / rgb values instead of CSS variable tokens.
  • Inventing typography styles instead of using the established scale.
  • Hardcoding status colours instead of using StatusBadge / StatusIcon.
  • Building one-off styled elements when a reusable component already exists.
  • Shipping a new component without updating the /design-guide page.
  • Using shadow-md or heavier - keep shadows at xs / sm only.
  • Using rounded-2xl or larger - the cap is rounded-xl (except rounded-full for pills and dots).
  • Forgetting dark mode - always use semantic tokens; never hardcode light or dark values.

© LF-Decentralized-Trust-labs, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in .claude/skills/design-guide of LF-Decentralized-Trust-labs/gitmesh.

  • SKILL.md
  • references/component-index.md

Open the folder on GitHubat commit df6a2ea

Compare with similar skills

Design Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design Guide this skillLF-Decentralized-Trust-labs/gitmesh144—~3.1kAutomated safety check: PassApache-2.0
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT
Ijfw DesignFerroxLabs/ijfw212—~2.2kAutomated safety check: PassMIT
Distinctive Frontend Design Builderirahardianto/awesome-agv156—~2.4kAutomated safety check: PassMIT
Frontend Blueprinttech-leads-club/agent-skills7k1 repos~5.3kAutomated safety check: PassCC-BY-4.0
Visual Design Foundationswshobson/agents40k2 repos~1.8kAutomated safety check: PassMIT

Similar skills

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Ijfw Design

    FerroxLabs/ijfw

    A skill your agent uses when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience'…

    212 GitHub stars~2.2k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Distinctive Frontend Design Builder

    irahardianto/awesome-agv

    Commits to one bold aesthetic direction, sets up a CSS token system for it, then builds the interface in Vue or plain HTML using those tokens.

    156 GitHub stars~2.4k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Frontend Blueprint

    tech-leads-club/agent-skills

    AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code.

    7k GitHub starsUsed in 1 repo~5.3k tokens
    Frontend & DesignAuto-check passed

  • Visual Design Foundations

    wshobson/agents

    Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs.

    40k GitHub starsUsed in 2 repos~1.8k tokens
    Frontend & DesignAuto-check passed

  • Theming Components

    ancoleman/ai-design-components

    Provides design token system and theming framework for consistent, customizable UI styling across all components.

    525 GitHub stars~2.3k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

Categories

Questions about Design Guide

What does Design Guide do?

GitMesh Agents UI design system. An agent skill from LF-Decentralized-Trust-labs/gitmesh. Design Guide is an agent skill from LF-Decentralized-Trust-labs/gitmesh. GitMesh Agents UI design system.

When should I use Design Guide?

Design Guide fits situations like: tasks that involve Design patterns; tasks that involve Design tokens; tasks that involve Typography.

How do I install Design Guide in Claude Code?

Run `npx skills add LF-Decentralized-Trust-labs/gitmesh --skill design-guide -a claude-code`. Or copy the skill folder (.claude/skills/design-guide in LF-Decentralized-Trust-labs/gitmesh) into .claude/skills/design-guide in your project. Claude Code loads it when a task matches its description.

How do I install Design Guide in Codex?

Run `npx skills add LF-Decentralized-Trust-labs/gitmesh --skill design-guide -a codex`. Or copy the skill folder (.claude/skills/design-guide in LF-Decentralized-Trust-labs/gitmesh) into .agents/skills/design-guide in your project. Codex loads it when a task matches its description.

Can I use Design Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LF-Decentralized-Trust-labs/gitmesh --skill design-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-guide, .gemini/skills/design-guide, .github/skills/design-guide and .opencode/skills/design-guide in your project.

What does Design Guide need to run?

SKILL.md names no scripts, command-line tools or credentials: Design Guide is instructions for the agent only.

Does Design Guide access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design Guide use?

Design Guide is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design Guide use?

About 3.1k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.

What are the alternatives to Design Guide?

Skills that share tags, products or a category with Design Guide: Design Guide (paperclipai/paperclip, 99k stars), Ijfw Design (FerroxLabs/ijfw, 212 stars), Distinctive Frontend Design Builder (irahardianto/awesome-agv, 156 stars) and Frontend Blueprint (tech-leads-club/agent-skills, 7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Guide?

LF-Decentralized-Trust-labs (a GitHub organization) maintains it in LF-Decentralized-Trust-labs/gitmesh, which has 144 GitHub stars. The repository was last updated on October 4, 2026.

Source: LF-Decentralized-Trust-labs/gitmesh on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.