Design guidance for the Clauder web management dashboard, a single-page web app served by a Go server. It covers the HTML, CSS, JavaScript, terminal, real-time connection, and file structure used by the interface.

Designing, improving, or modifying the dashboard, including its layout, styling, browser behavior, terminal view, and live WebSocket features.

It gives an agent the project’s specific design and architecture rules before changing the dashboard.

How MaorBril/clauder configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to MaorBril/clauder. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/MaorBril/clauder/main/.claude/skills/web-design/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/MaorBril/clauder

Made for: Claude Code.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/maorbril/clauder/web-design/github.svg)](https://agentmods.dev/skills/maorbril/clauder/web-design)

Your own site

<a href="https://agentmods.dev/skills/maorbril/clauder/web-design"><img src="https://agentmods.dev/badge/skills/maorbril/clauder/web-design/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/maorbril/clauder/web-design"><img src="https://agentmods.dev/badge/skills/maorbril/clauder/web-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,030 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

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.00000	$0.03030
Opus 5.5	$0.00000	$0.01212
Sonnet 5.5	$0.00000	$0.00606
Haiku 4.5	$0.00000	$0.00303

Measured 2mo ago against content hash 50f1f7d1d136, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

web-design 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 2mo 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.

.claude/skills/web-design/SKILL.md · 269 lines

How it starts

The opening of the file, as written. The whole thing — 269 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Web Design Skill - Clauder Dashboard

Use this skill when designing, improving, or modifying the Clauder web management interface.

Architecture Overview

The web dashboard is a single-page application served by a Go HTTP server. All UI lives in one file:

Template: internal/ui/templates/dashboard.html (~2,570 lines)
- Inline <style> block (CSS custom properties + pure CSS)
- Semantic HTML structure
- Vanilla JavaScript (no frameworks)
Server: internal/ui/web.go (~665 lines)
- Go html/template rendering
- REST API endpoints
- WebSocket terminal support
Embedded: Templates are embedded in the binary via //go:embed templates/*

Technology Stack

Layer	Technology
HTML	HTML5 with Go template directives (`{{.RefreshInterval}}`, `{{.WorkDir}}`)
CSS	Pure CSS with CSS custom properties, Flexbox/Grid, no preprocessor
JavaScript	Vanilla JS, no build step, no frameworks
Fonts	Google Fonts: Inter (UI), JetBrains Mono (code/monospace)
Terminal	XTerm.js v5.3.0 + fit addon + web-links addon
Real-time	WebSockets (Gorilla) for terminal PTY
Icons	Unicode/emoji characters (no icon library)

Design System

Color Palette (CSS Variables)

:root {
    /* Primary - Purple */
    --primary: #8B5CF6;
    --primary-light: #A78BFA;
    --primary-dark: #7C3AED;

    /* Secondary - Cyan */
    --secondary: #06B6D4;
    --secondary-light: #22D3EE;

    /* Semantic */
    --success: #10B981;
    --success-light: #34D399;
    --warning: #F59E0B;
    --warning-light: #FBBF24;
    --error: #EF4444;

    /* Neutral */
    --muted: #64748B;
    --muted-light: #94A3B8;
    --text: #F1F5F9;
    --text-secondary: #CBD5E1;

    /* Backgrounds - Dark theme */
    --bg: #0F172A;           /* Page background */
    --bg-card: #1E293B;      /* Card/surface background */
    --bg-card-hover: #334155; /* Hover state */

    /* Borders */
    --border: #334155;
    --border-light: #475569;

    /* Glass effects */
    --glass: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(148, 163, 184, 0.1);

    /* Shadows */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);

    /* Border radius */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
}

Read the full file on GitHub · 269 lines

Changes

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.

2mo ago First seen · 269 lines · 0 tokens per session scan A 50f1f7d1d136

Subscribe to this mod's changes

web-design is a skill published in the GitHub repository MaorBril/clauder (54 stars, last pushed 3mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 3,030 tokens. 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.

CSS and styling Design and UX Frontend

web-design next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
web-designMaorBril/clauder	Skill	54	3mo ago	MIT	A	0	Claude Code
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	3d ago	MIT	A	52	Codex
open-design-setupcompozy/compozy	Skill	2.8k	yesterday	MIT	A	67	Claude Code, Codex
frontend-visual-qadaymade/claude-code-skills	Skill	1.5k	yesterday	MIT	A	125	Claude Code, Codex
prototype-webnexu-io/html-anything	Skill	9.4k	24d ago	Apache-2.0	A	24	Claude Code, Codex

clauder: Skill for Claude Code