Agent skill

Acarshub Design Language

by sdr-enthusiasts in sdr-enthusiasts/docker-acarshub

Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…

GPL-3.0Auto-check passedFrontend & Design

Install Acarshub Design Language

skills CLI

$ npx skills add sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a claude-code

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

GitHub CLI

$ gh skill install sdr-enthusiasts/docker-acarshub acarshub-design-language --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/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .claude/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .claude/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language

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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a codex

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

GitHub CLI

$ gh skill install sdr-enthusiasts/docker-acarshub acarshub-design-language --agent codex

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

Manual copy

$ git clone --depth 1 https://github.com/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .agents/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .agents/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a cursor

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

GitHub CLI

$ gh skill install sdr-enthusiasts/docker-acarshub acarshub-design-language --agent cursor

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

Manual copy

$ git clone --depth 1 https://github.com/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .cursor/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .cursor/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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/sdr-enthusiasts/docker-acarshub.git --path .opencode/skills/acarshub-design-language

--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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a gemini-cli

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

GitHub CLI

$ gh skill install sdr-enthusiasts/docker-acarshub acarshub-design-language --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/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .gemini/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .gemini/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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 sdr-enthusiasts/docker-acarshub acarshub-design-language

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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .github/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .github/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -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 sdr-enthusiasts/docker-acarshub acarshub-design-language --agent opencode

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

Manual copy

$ git clone --depth 1 https://github.com/sdr-enthusiasts/docker-acarshub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.opencode/skills/acarshub-design-language .opencode/skills/acarshub-design-language && 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 "acarshub-design-language" agent skill from https://github.com/sdr-enthusiasts/docker-acarshub/tree/main/.opencode/skills/acarshub-design-language into .opencode/skills/acarshub-design-language/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "acarshub-design-language", 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: acarshub-design-language
GitHub stars: 117
Token cost: ~1.1k tokens
SKILL.md length: 369 words
Files: 1
Skills in repo: 3
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…

Tasks that involve Accessibility
SKILL.md covers Styling, Mobile-first responsive…, Accessibility (WCAG 2.1 AA) and Component patterns, plus 3 more sections
Calls just and npm
Tasks that involve State management

What it does

Acarshub Design Language is an agent skill from sdr-enthusiasts/docker-acarshub. Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand store wiring. Points at the in-repo agent-docs/ as the canonical reference and codifies the rules that the model otherwise forgets between sessions (no inline styles, mobile-first, 44x44 touch targets, WCAG 2.1 AA, namespace logger, Socket.IO /main binding quirk).

Its SKILL.md is about 1.1k 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 Accessibility, State management and Containers. It works with Docker and Zustand. The repository describes itself as: Docker container to utilize RTLSDR dongle(s) to view/stream ACARS/VDLM2 aircraft data transmissions. The licence is GPL-3.0.

When your agent uses it

Tasks that involve Accessibility
Tasks that involve State management
Tasks that involve Containers

Example prompts

“/acarshub-design-language”

Requirements

Docker

What it can do on your machine

Read from SKILL.md and the folder at commit 862da2a. 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
Shell commands in SKILL.md call:
- just
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
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

Acarshub Design Language loads about 1.1k tokens when it runs. Until then it costs about 121 tokens; SKILL.md has 369 words of instructions outside code blocks.

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

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 sdr-enthusiasts/docker-acarshub at commit 862da2a, republished under its GPL-3.0 licence (© sdr-enthusiasts). 369 words, ~1,136 tokens.

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

name: acarshub-design-language
description: Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand store wiring. Points at the in-repo agent-docs/ as the canonical reference and codifies the rules that the model otherwise forgets between sessions (no inline styles, mobile-first, 44x44 touch targets, WCAG 2.1 AA, namespace logger, Socket.IO `/main` binding quirk).

ACARS Hub: design language & UI rules

The full design language lives in agent-docs/DESIGN_LANGUAGE.md and agent-docs/CATPPUCCIN.md in the docker-acarshub repo. Read those first when doing real UI work. This skill captures the rules that otherwise leak between sessions.

Styling

No inline styles. Every style lives in .scss modules.
No CSS frameworks. No Tailwind, Bootstrap, Material-UI, etc. ACARS Hub does Catppuccin tokens directly via CSS variables.
@use / @forward, not deprecated @import.
Catppuccin colors via CSS variables: var(--color-text), var(--color-primary), etc. Theme switching is a value swap on the variables via SCSS mixins (Mocha = dark, Latte = light). See agent-docs/CATPPUCCIN.md for the full palette.

Mobile-first responsive (non-negotiable)

Base styles for 320px+.
@media (min-width: 768px) for tablet.
@media (min-width: 1024px) for desktop.
Touch targets minimum 44x44px.
No horizontal scrolling at any screen size.
Test at: 320px, 375px, 768px, 1024px, 1920px.

Example:

scss

.button {
  // Base: mobile
  padding: 0.75rem 1rem;
  font-size: 1rem;

  // Tablet and up
  @media (min-width: 768px) {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

Accessibility (WCAG 2.1 AA)

Color contrast: 4.5:1 for normal text, 3:1 for large text.
Touch targets: minimum 44x44px (same as mobile rule above).
Keyboard navigation: every interactive element reachable.
ARIA labels, roles, landmarks on non-obvious widgets.
Visible focus indicators; focus traps in modals.

Verify with just test-a11y (axe-core automated tests).

Component patterns

See agent-docs/DESIGN_LANGUAGE.md for the canonical examples. The quick-reference shape:

typescript

import type { ReactNode } from "react";
import "./Button.scss";

interface ButtonProps {
  variant?: "primary" | "secondary" | "danger";
  size?: "small" | "medium" | "large";
  disabled?: boolean;
  onClick?: () => void;
  children: ReactNode;
}

export function Button({
  variant = "primary",
  size = "medium",
  disabled = false,
  onClick,
  children,
}: ButtonProps) {
  return (
    <button
      className={`button button--${variant} button--${size}`}
      disabled={disabled}
      onClick={onClick}
      type="button"
    >
      {children}
    </button>
  );
}

BEM-style class naming (button button--primary) is the convention.

State (Zustand)

useAppStore -- global app state (messages, alerts, connection).
useSettingsStore -- user preferences (theme, locale, notifications). Persisted via zustand/middleware's persist.

Store pattern (canonical):

typescript

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface SettingsState {
  theme: "mocha" | "latte";
  setTheme: (theme: "mocha" | "latte") => void;
}

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      theme: "mocha",
      setTheme: (theme) => set({ theme }),
    }),
    { name: "acars-settings" },
  ),
);

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

Performance gates

Target: <500KB per chunk (gzipped). Monitor with npm run analyze.
60fps with 100+ aircraft on the map.
No memory leaks in long-running sessions.
React.memo, useMemo, useCallback where they earn it -- not prophylactically everywhere.
just lighthouse runs Lighthouse CI.

When to stop and ask

A UI requirement looks like it needs a CSS framework. It doesn't. Surface the requirement; the project's stance is "no frameworks" and the right answer is custom SCSS following the existing patterns.
A new design pattern is needed that isn't in DESIGN_LANGUAGE.md. Propose adding the pattern to that doc as part of the PR; do NOT inline a one-off pattern without updating the standard.
An accessibility violation is intrinsic to the design (e.g. a custom widget that can't meet WCAG 2.1 AA with a reasonable amount of work). Stop and surface -- a11y is the floor, not a preference.

Files

Just SKILL.md in .opencode/skills/acarshub-design-language of sdr-enthusiasts/docker-acarshub.

Open the folder on GitHubat commit 862da2a

Compare with similar skills

Acarshub Design Language 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.

Acarshub Design Language compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Acarshub Design Language this skillsdr-enthusiasts/docker-acarshub	117	—	~1.1k	Automated safety check: Pass	GPL-3.0	3 days ago
Reactflow Expertcuriositech/some_claude_skills	244	—	~2.1k	Automated safety check: Notes	MIT	1 mo ago
Frontend Design Principlespretend1111/claude-desktop-app	496	1 repos	~824	Automated safety check: Pass	Custom licence	5 mo ago
Frontendredis/RedisInsight	8.9k	—	~3.2k	Automated safety check: Pass	Custom licence	6 days ago
Implement Componentinkline/inkline	1.5k	—	~1.7k	Automated safety check: Notes	None	29 days ago
Shadcn Tailwind UILiarMTTT/TavernWeave	154	—	~1.7k	Automated safety check: Pass	Custom licence	6 days ago

Similar skills

Reactflow Expert
curiositech/some_claude_skills
Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket.
244 GitHub stars~2.1k tokensUpdated 1 mo ago
Frontend & DesignAuto-check: notes
Frontend Design Principles
pretend1111/claude-desktop-app
Gives practical design rules for polished HTML, CSS and JavaScript interfaces and browser games, covering spacing, type, color, components, motion and responsive breakpoints.
496 GitHub starsUsed in 1 repo~824 tokens
Frontend & DesignAuto-check passed
Frontend
redis/RedisInsight
Official
React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage.
8.9k GitHub stars~3.2k tokensUpdated 6 days ago
Frontend & DesignAuto-check passed
Implement Component
inkline/inkline
Phase 2 of building an Inkline component — write the .ink.tsx source.
1.5k GitHub stars~1.7k tokensUpdated 29 days ago
Frontend & DesignAuto-check: notes
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
154 GitHub stars~1.7k tokensUpdated 6 days ago
Frontend & DesignAuto-check passed
Dokan Frontend Dev
getdokan/dokan
Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).
288 GitHub stars~1.9k tokensUpdated yesterday
Frontend & DesignAuto-check passed

Questions about Acarshub Design Language

What does Acarshub Design Language do?

Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…. Acarshub Design Language is an agent skill from sdr-enthusiasts/docker-acarshub. Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand store wiring.

When should I use Acarshub Design Language?

Acarshub Design Language fits situations like: tasks that involve Accessibility; tasks that involve State management; tasks that involve Containers.

How do I install Acarshub Design Language in Claude Code?

Run `npx skills add sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a claude-code`. Or copy the skill folder (.opencode/skills/acarshub-design-language in sdr-enthusiasts/docker-acarshub) into .claude/skills/acarshub-design-language in your project. Claude Code loads it when a task matches its description.

How do I install Acarshub Design Language in Codex?

Run `npx skills add sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a codex`. Or copy the skill folder (.opencode/skills/acarshub-design-language in sdr-enthusiasts/docker-acarshub) into .agents/skills/acarshub-design-language in your project. Codex loads it when a task matches its description.

Can I use Acarshub Design Language 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 sdr-enthusiasts/docker-acarshub --skill acarshub-design-language -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/acarshub-design-language, .gemini/skills/acarshub-design-language, .github/skills/acarshub-design-language and .opencode/skills/acarshub-design-language in your project.

What does Acarshub Design Language need to run?

Going by SKILL.md and its folder, Acarshub Design Language needs the command-line tools its instructions call (just and npm). Our summary lists: Docker.

Does Acarshub Design Language access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Acarshub Design Language 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 Acarshub Design Language use?

Acarshub Design Language is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Acarshub Design Language use?

About 1.1k tokens (SKILL.md is roughly 4.5k 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 Acarshub Design Language?

Skills that share tags, products or a category with Acarshub Design Language: Reactflow Expert (curiositech/some_claude_skills, 244 stars), Frontend Design Principles (pretend1111/claude-desktop-app, 496 stars), Frontend (redis/RedisInsight, 8.9k stars) and Implement Component (inkline/inkline, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Acarshub Design Language?

sdr-enthusiasts (a GitHub organization) maintains it in sdr-enthusiasts/docker-acarshub, which has 117 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.

Source: sdr-enthusiasts/docker-acarshub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Acarshub Design Language

Install Acarshub Design Language

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

ACARS Hub: design language & UI rules

Styling

Mobile-first responsive (non-negotiable)

Accessibility (WCAG 2.1 AA)

Component patterns

State (Zustand)

Performance gates

When to stop and ask

Files

Compare with similar skills

Similar skills

Reactflow Expert

Frontend Design Principles

Frontend

Implement Component

Shadcn Tailwind UI

Dokan Frontend Dev

More from sdr-enthusiasts/docker-acarshub

Acarshub Socket Namespace

Acarshub Tool Additions

Questions about Acarshub Design Language

Install Acarshub Design Language

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

ACARS Hub: design language & UI rules

Styling

Mobile-first responsive (non-negotiable)

Accessibility (WCAG 2.1 AA)

Component patterns

State (Zustand)

Performance gates

When to stop and ask

Files

Compare with similar skills

Similar skills

More from sdr-enthusiasts/docker-acarshub

Related

Questions about Acarshub Design Language