Agent skill

Design Guidelines

Applies GitArena's official design system, colors, and typography to frontend components and pages.

Install Design Guidelines

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a claude-code

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

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines --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/mellowagain/gitarena.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/design-guidelines .claude/skills/design-guidelines && 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/

Paste into Claude Code

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .claude/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mellowagain/gitarena.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/design-guidelines .agents/skills/design-guidelines && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .agents/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mellowagain/gitarena.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/design-guidelines .cursor/skills/design-guidelines && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .cursor/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/mellowagain/gitarena.git --path .claude/skills/design-guidelines

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mellowagain/gitarena.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/design-guidelines .gemini/skills/design-guidelines && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .gemini/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/mellowagain/gitarena.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/design-guidelines .github/skills/design-guidelines && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .github/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mellowagain/gitarena --skill design-guidelines -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install mellowagain/gitarena design-guidelines --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mellowagain/gitarena.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/design-guidelines .opencode/skills/design-guidelines && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "design-guidelines" agent skill from https://github.com/mellowagain/gitarena/tree/main/.claude/skills/design-guidelines into .opencode/skills/design-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-guidelines", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: design-guidelines
GitHub stars: 115
Token cost: ~2.5k tokens
SKILL.md length: 909 words
Files: 1
Skills in repo: 3
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Applies GitArena's official design system, colors, and typography to frontend components and pages.

Building new UI
SKILL.md covers Overview, Technology Stack, Brand Guidelines and Component Patterns, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Styling components

What it does

Design Guidelines is an agent skill from mellowagain/gitarena. Applies GitArena's official design system, colors, and typography to frontend components and pages. Use it when building new UI, styling components, or ensuring consistency with the established dark monochromatic visual identity.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Logo and visual identity, Typography and Design systems. It works with shadcn/ui, Git, Rust and Linux. The repository describes itself as: Rust-based Software development platform (forge) with built-in vcs, issue tracking and code review. The licence is MIT.

When your agent uses it

Building new UI
Styling components
Ensuring consistency with the established dark monochromatic visual identity

Example prompts

“Use the design-guidelines skill to apply GitArena's official design system, colors, and typography to frontend components and pages”
“/design-guidelines”

What it can do on your machine

Read from SKILL.md and the folder at commit a9b0bf7. 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 Guidelines loads about 2.5k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 909 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~62
When it runs · the whole SKILL.md, loaded when a task matches: ~2.5k

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 mellowagain/gitarena at commit a9b0bf7, republished under its MIT licence (© mellowagain). 909 words, ~2,544 tokens.

Download SKILL.mdSave it as .claude/skills/design-guidelines/SKILL.md (or your agent's skills folder).

name: design-guidelines
description: Applies GitArena's official design system, colors, and typography to frontend components and pages. Use it when building new UI, styling components, or ensuring consistency with the established dark monochromatic visual identity.

GitArena Design System

Overview

GitArena follows a near-black monochromatic design language inspired by Linear and modern developer tools. The UI is dark-only, achromatic, and relies on luminance contrast rather than color to establish hierarchy.

Keywords: design system, dark theme, monochromatic, styling, brand colors, typography, UI components, visual identity, shadcn/ui, tailwind, Linear-style

Technology Stack

Layer	Technology
Framework	Next.js 16 (App Router, React Server Components)
Styling	Tailwind CSS v4 (CSS-only config via `@theme inline`)
Components	shadcn/ui (`new-york` style, `neutral` base)
Icons	Lucide React
Fonts	Geist (sans) + Geist Mono (loaded via Next.js built-in)
Color space	oklch throughout
Class merging	`cn()` utility from `clsx` + `tailwind-merge`

Brand Guidelines

Color System

The entire palette is achromatic (chroma 0 in oklch) except for the destructive red. Both :root and .dark define identical tokens -- the app is dark-only by design.

Surface Colors (background layers, darkest to lightest):

Background: oklch(0.09 0 0) -- Page-level background, near-black
Card: oklch(0.12 0 0) -- Elevated surface (cards, panels)
Input/Secondary/Muted: oklch(0.14 0 0) -- Input backgrounds, secondary surfaces
Popover: oklch(0.14 0 0) -- Dropdowns, popovers, overlays
Sidebar Accent: oklch(0.15 0 0) -- Active sidebar items
Accent: oklch(0.18 0 0) -- Hover states, highlighted rows
Sidebar Border: oklch(0.2 0 0) -- Sidebar dividers

Text Colors (lightest to dimmest):

Sidebar Primary/Foreground: oklch(0.95 0 0) -- Brightest text, sidebar emphasis
Foreground/Primary: oklch(0.93 0 0) -- Primary body text
Secondary Foreground: oklch(0.8 0 0) -- Secondary text
Muted Foreground: oklch(0.5 0 0) -- Tertiary text, placeholders, timestamps

Border and Focus:

Border: oklch(1 0 0 / 0.08) -- 8% white opacity, subtle dividers
Ring: oklch(1 0 0 / 0.2) -- 20% white opacity, focus rings

Semantic Colors:

Destructive: oklch(0.55 0.18 25) -- The only chromatic color; red for errors, delete actions, sign-out
Notification dot: blue-500 (Tailwind utility) -- Used sparingly for unread indicators

Chart Colors (achromatic gradient):

Chart 1: oklch(0.7 0 0)
Chart 2: oklch(0.6 0 0)
Chart 3: oklch(0.5 0 0)
Chart 4: oklch(0.4 0 0)
Chart 5: oklch(0.3 0 0)

Typography

Sans-serif (body/headings): Geist with Geist Fallback
Monospace (code, usernames): Geist Mono with Geist Mono Fallback
Base font size: 18px (112.5% scale, optimized for 4K readability)
Antialiasing: -webkit-font-smoothing: antialiased on body

Text Hierarchy Patterns:

Role	Classes
Page heading	`text-4xl font-bold tracking-tight` (up to `text-6xl` on lg)
Section heading	`text-3xl font-bold tracking-tight sm:text-4xl`
Card title	`font-semibold leading-none`
Section label	`text-xs font-medium uppercase tracking-widest text-muted-foreground`
Body text	`text-sm` or `text-base` depending on context
Description/secondary	`text-sm text-muted-foreground` or `text-sm leading-relaxed text-muted-foreground`
Stat/metric value	`text-3xl font-bold tracking-tight text-foreground`
Monospace/username	`font-mono text-xs text-muted-foreground`
Keyboard shortcut	`text-[11px] text-muted-foreground bg-secondary rounded border border-border`

Spacing and Layout

Border radius: 0.5rem base (--radius), computed variants: sm (-4px), md (-2px), lg (base), xl (+4px)
Page max-width: max-w-6xl (72rem) for landing pages
Content padding: px-6 horizontal, py-24 or py-16 vertical for sections
Card internal padding: px-6 py-6 with gap-6 between sections
Header height: h-14 (app) or h-16 (landing)
Interactive element height: h-9 (default), h-8 (sm), h-10 (lg)
Icon button size: size-9 (default), size-8 (sm), size-10 (lg)

Borders and Dividers

All borders use the border-border token (oklch(1 0 0 / 0.08))
Section dividers: border-t border-border or border-b border-border
Grid dividers via gap technique: gap-px bg-border on parent with bg-card on children
Vertical separators: w-px h-7 bg-border
Dashed borders for empty states: border-dashed

Transitions and Motion

Global interactive transition: all 180ms ease on button, a, input, [role="button"]
Color-only transitions: transition-colors for links and non-elevated elements
Box-shadow transitions: transition-[color,box-shadow] for inputs and badges
Full transitions: transition-all for buttons

Show full SKILL.md (359 more words)Show less

Shadows

Cards: shadow-sm
Inputs: shadow-xs
Decorative product previews: shadow-2xl shadow-black/20
Decorative background glow: gradient with blur-xl opacity-50

Component Patterns

shadcn/ui Convention

All UI primitives use the data-slot attribute for identification and follow the function-component pattern (no forwardRef, using React.ComponentProps):

tsx

function ComponentName({ className, ...props }: React.ComponentProps<"div">) {
    return (
        <div
            data-slot="component-name"
            className={cn("base-classes", className)}
            {...props}
        />
    );
}

Button Variants

Variant	Usage
`default`	Primary actions (white bg, dark text)
`destructive`	Dangerous actions (red bg)
`outline`	Secondary actions with border
`secondary`	Less prominent actions (dark bg, gray text)
`ghost`	Minimal, hover-only actions (nav links, icons)
`link`	Inline text links with underline on hover

Card Pattern

Cards use bg-card with border and rounded-xl. Internal spacing uses px-6 and gap-6. Sub-components: CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.

Empty States

Centered layout with border-dashed, vertically stacked icon + title + description + action. Use the Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent composable.

App header: Sticky, bg-background, h-14, breadcrumb with / separators
Landing header: Sticky, bg-background/80 backdrop-blur-xl, h-16
Logo: Text-based "GITARENA" (text-base font-semibold tracking-tight) in app; G icon block + "GitArena" on landing
Nav links: text-muted-foreground hover:text-foreground transition-colors
Active nav links: text-foreground

Hover States

Buttons: opacity reduction (hover:bg-primary/90) or background shift (hover:bg-accent)
Links: hover:text-foreground from text-muted-foreground
Rows/items: hover:bg-accent/50 or hover:bg-accent/30
Icon buttons: hover:text-foreground hover:bg-accent/50
Avatar: hover:ring-2 hover:ring-ring

Focus States

Visible focus ring: focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring
Invalid state: aria-invalid:ring-destructive/20 aria-invalid:border-destructive

Feature Grid Pattern

Use gap-px bg-border on the grid parent with bg-card cells for a border-separated grid layout. Each cell contains an icon, heading, and description.

File Structure

gitarena-frontend/
  app/
    globals.css          # Theme tokens and base styles (source of truth)
    layout.tsx           # Root layout with font and analytics
  components/
    ui/                  # 48 shadcn/ui primitives (new-york style)
    landing/             # 7 landing page sections
    top-bar.tsx          # App navigation header
    client-layout.tsx    # SWR + config providers
    ...
  lib/
    utils.ts             # cn() class merge utility
  public/                # Favicons and placeholder images
  components.json        # shadcn/ui configuration

Do's and Don'ts

Do:

Use the semantic CSS variable tokens (bg-card, text-muted-foreground, etc.) instead of raw oklch values
Use cn() for all className merging
Keep the achromatic palette -- express hierarchy through luminance, not hue
Use text-sm as the default text size (renders at ~14.4px given the 18px base)
Use Lucide icons consistently at w-4 h-4 (inline) or w-5 h-5 (standalone)
Use transition-colors for color-only transitions and transition-all only when needed
Apply tracking-tight to headings

Don't:

Introduce new chromatic/colored accents beyond destructive red without deliberate intent
Use light mode tokens -- the design is dark-only
Skip the data-slot attribute when creating new UI primitives
Use forwardRef -- use React.ComponentProps<> instead (React 19+ pattern)
Override the 18px base font size in components
Use raw Tailwind color utilities (e.g., bg-gray-800) instead of the design tokens

Files

Just SKILL.md in .claude/skills/design-guidelines of mellowagain/gitarena.

Open the folder on GitHubat commit a9b0bf7

Compare with similar skills

Design Guidelines 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 Guidelines compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Design Guidelines this skillmellowagain/gitarena	115	—	~2.5k	Automated safety check: Pass	MIT	today
Tailwind V4 Shadcnever-works/ever-works	158	2 repos	~3.8k	Automated safety check: Pass	MIT	2 days ago
Shadcn Tailwind UILiarMTTT/TavernWeave	150	—	~1.7k	Automated safety check: Pass	Custom licence	3 days ago
Design SystemWrongStack/WrongStack	370	—	~3.9k	Automated safety check: Pass	MIT	today
Design ReferencesMadAppGang/claude-code	284	—	~2.8k	Automated safety check: Pass	MIT	6 mo ago
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
158 GitHub starsUsed in 2 repos~3.8k tokens
Frontend & DesignAuto-check passed
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
150 GitHub stars~1.7k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Design System
WrongStack/WrongStack
Use this skill BEFORE writing or restyling ANY user-facing interface.
370 GitHub stars~3.9k tokensUpdated today
Frontend & DesignAuto-check passed
Design References
MadAppGang/claude-code
Predefined design system references for UI reviews. An agent skill from MadAppGang/claude-code.
284 GitHub stars~2.8k tokensUpdated 6 mo ago
Frontend & DesignAuto-check passed
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
795 GitHub starsUsed in 11 repos~1.7k tokens
Frontend & DesignAuto-check passed

Questions about Design Guidelines

What does Design Guidelines do?

Applies GitArena's official design system, colors, and typography to frontend components and pages. Design Guidelines is an agent skill from mellowagain/gitarena. Applies GitArena's official design system, colors, and typography to frontend components and pages.

When should I use Design Guidelines?

Design Guidelines fits situations like: building new UI; styling components; ensuring consistency with the established dark monochromatic visual identity.

How do I install Design Guidelines in Claude Code?

Run `npx skills add mellowagain/gitarena --skill design-guidelines -a claude-code`. Or copy the skill folder (.claude/skills/design-guidelines in mellowagain/gitarena) into .claude/skills/design-guidelines in your project. Claude Code loads it when a task matches its description.

How do I install Design Guidelines in Codex?

Run `npx skills add mellowagain/gitarena --skill design-guidelines -a codex`. Or copy the skill folder (.claude/skills/design-guidelines in mellowagain/gitarena) into .agents/skills/design-guidelines in your project. Codex loads it when a task matches its description.

Can I use Design Guidelines 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 mellowagain/gitarena --skill design-guidelines -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-guidelines, .gemini/skills/design-guidelines, .github/skills/design-guidelines and .opencode/skills/design-guidelines in your project.

What does Design Guidelines need to run?

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

Does Design Guidelines 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 Guidelines 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 Guidelines use?

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

How many tokens does Design Guidelines use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design Guidelines?

Skills that share tags, products or a category with Design Guidelines: Tailwind V4 Shadcn (ever-works/ever-works, 158 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 150 stars), Design System (WrongStack/WrongStack, 370 stars) and Design References (MadAppGang/claude-code, 284 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Guidelines?

mellowagain (a GitHub user) maintains it in mellowagain/gitarena, which has 115 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.

Source: mellowagain/gitarena on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Design Guidelines

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

GitArena Design System

Overview

Technology Stack

Brand Guidelines

Color System

Typography

Spacing and Layout

Borders and Dividers

Transitions and Motion

Shadows

Component Patterns

shadcn/ui Convention

Button Variants

Card Pattern

Empty States

Navigation

Hover States

Focus States

Feature Grid Pattern

File Structure

Do's and Don'ts

Files

Compare with similar skills

Similar skills

More from mellowagain/gitarena

Related

Questions about Design Guidelines