mcpbeat Sign in

Design Minimal Agent Skill

Use when the user explicitly asks for a standalone HTML page in a restrained minimal style, especially reading-first dashboards, briefs, handouts, maps, or internal reports. User-invoked only; do not auto-trigger.

103k tokens
context cost
the whole folder, loaded on every use
4
files
instructions only
0
copies elsewhere
how many repositories repackaged it
217
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/serejaris/personal-corp-skills --skill design-minimal

What comes with it

406 412 bytes besides the instruction
README.md
README.ru.md
assets/illustration.png

The instruction itself

7 sections, as written by the author

Design Minimal

Generate one standalone HTML page with a restrained minimal visual system: clear hierarchy, strong spacing, explicit structure, limited palette, and no decorative effects.

Language

  • Match the visible interface language to the user's language and artifact context.
  • For Russian pages, write visible UI labels, headings, section names, status explanations, and footer copy in Russian.
  • Keep English only for file paths, commands, code identifiers, schema fields, API names, model/tool names, and literal values that must remain copyable.
  • If an English technical term is useful for teaching, pair it with a plain-language local label once, then use the local label in the interface.

Hard Contract

  • Use one self-contained HTML file.
  • Use Tailwind CDN only for layout and component styling.
  • Do not write custom CSS rules for components, layout, typography, states, cards, grids, buttons, headers, or sections.
  • The only allowed CSS is design tokens as CSS variables in :root.
  • Do not add mobile adaptation: no responsive Tailwind prefixes (sm:, md:, lg:, xl:, 2xl:), no media queries, no alternate mobile layout.
  • Do not use external fonts, JavaScript frameworks, icon libraries, SVG icons, gradients, shadows, rounded corners, or accent colors.
  • Use typography, color, spacing, and layout through Tailwind classes plus token variables.

Allowed <style> shape:

<style>
  :root {
    --bg: #f5f4ef;
    --ink: #1a1a1a;
    --muted: #77736b;
    --hair: #d4d2cc;
    --paper-soft: #eeece4;
    --font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  }
</style>

Forbidden CSS shape:

.card { ... }
@media (...) { ... }
body { ... }
button:hover { ... }

Tailwind Usage

Use Tailwind classes directly on elements. Reference tokens through arbitrary values:

<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
  <main class="mx-auto w-[1120px] px-8 py-8 pb-20">
    <header class="border-y-2 border-[var(--ink)] py-4">
      <p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
      <h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
    </header>
  </main>
</body>

Use fixed desktop-oriented widths such as w-[960px], w-[1120px], max-w-[1200px], grid-cols-[...], min-h-[...]. Do not add mobile fallbacks. One-column, two-column, and dense multi-panel layouts are allowed when the content benefits from them.

Visual Vocabulary

| Element | Tailwind Pattern |

|---|---|

| Page | bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55] |

| Shell | mx-auto w-[1120px] px-8 py-8 pb-20 |

| Grid | grid grid-cols-[1fr_320px] gap-6 or grid grid-cols-3 gap-4 |

| Header | border-y-2 border-[var(--ink)] py-4 |

| Meta | text-[11px] uppercase tracking-[0.14em] text-[var(--muted)] |

| Section label | [ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] |

| Panel | border border-[var(--ink)] p-4 |

| Soft panel | border border-dashed border-[var(--ink)] p-4 |

| Divider | Text dashes inside HTML, styled with muted mono text |

| Entry | border-t border-[var(--hair)] pt-5 mt-5 |

| Link | underline decoration-[var(--hair)] underline-offset-4 hover:bg-[var(--ink)] hover:text-[var(--bg)] |

| Badge | border border-[var(--hair)] px-1 text-[10px] uppercase text-[var(--muted)] |

Skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=900">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    :root {
      --bg: #f5f4ef;
      --ink: #1a1a1a;
      --muted: #77736b;
      --hair: #d4d2cc;
      --paper-soft: #eeece4;
      --font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    }
  </style>
  <title>Design Minimal</title>
</head>
<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
  <main class="mx-auto w-[1120px] px-8 py-8 pb-20">
    <header class="border-y-2 border-[var(--ink)] py-4">
      <p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
      <h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
      <p class="mt-2 text-[var(--muted)]">Short one-line description.</p>
    </header>

    <div class="mt-6 grid grid-cols-[1fr_320px] gap-6">
      <section class="border border-[var(--ink)] p-4">
        <div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">
          [ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] important
        </div>
        <p class="mt-3">...</p>
      </section>
      <aside class="border border-dashed border-[var(--ink)] p-4">
        <div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ SIDE ]</div>
        <p class="mt-3">...</p>
      </aside>
    </div>

    <div class="mt-8 text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">──── entries ──────────────────────────────</div>

    <article class="mt-5 border-t border-[var(--hair)] pt-5">
      <div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ 01 / 05 ] signal</div>
      <h2 class="mt-2 text-[20px] leading-tight font-normal">Section Title</h2>
      <p class="mt-3">...</p>
    </article>
  </main>
</body>
</html>

Common Mistakes

  • Adding component selectors in <style> instead of Tailwind classes.
  • Adding sm: / md: / lg: classes.
  • Adding @media for mobile.
  • Importing Google Fonts or icon libraries.
  • Using rounded corners, shadows, gradients, or color-coded statuses.
  • Using English UI labels in a Russian page when a clear Russian label exists.
  • Treating any specific layout pattern as mandatory when the content needs another structure.

Other skills for the same job

different authors, same section of the catalogue
XLSX
by anthropics
vendor ×15

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

5k tokens scripts
XLSX
by w95
×7

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

3k tokens
Raffle Winner Picker
by frostant
×5

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

949 tokens
Fda Database
by christophacham
×4

Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.

32k tokens scripts
Matlab
by christophacham
×4

MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.

25k tokens
Umap Learn
by ComeOnOliver
×4

UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.

14k tokens
D3 Viz
by chrisvoncsefalvay
×3

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

20k tokens
Alphafold Database
by christophacham
×3

Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.

7k tokens

How to use it

Copy the folder

Take serejaris/design-minimal from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.