Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Design Minimal · serejaris | DecimalAI

serejaris/design-minimal

SkillScore68Maintained

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.

Frontendby serejaris

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/serejaris-design-minimal/SKILL.md

decimalai skills pull serejaris-design-minimal --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/serejaris-design-minimal/SKILL.md https://app.decimal.ai/s/serejaris-design-minimal/SKILL.md

Raw file: /s/serejaris-design-minimal/SKILL.md ↗ · machine-readable summary at /s/serejaris-design-minimal.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

25 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 28d ago

Yes — +44% lift · at higher cost+30% tokens0% turns68% of whole cases pass with skill (17/25)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-08	✗→✓	▲ Improved	16%	0%
case-09	✗→✓	▲ Improved	24%	0%
case-16	✗→✓	▲ Improved	24%	0%
case-01	✗→✓	▲ Improved	24%	0%
case-02	✗→✓	▲ Improved	22%	0%

Showing 5 of 25 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

serejaris / personal-corp-os

skills/design-minimal/SKILL.md

View on GitHub ↗

License MITImported 8/10/2026Version v1

Skill contents

SKILL.md

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:

html
<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:

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

Tailwind Usage

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

html
<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

html
<!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.

Illustrative Want to see what serejaris/design-minimal would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/30/2026, 14:24 UTC · 25 cases

Lift

+44%

68% vs 24%

Agent turns

1.0 vs 1.0

Tokens

+30%

9,823.08 vs 7,569.2

fail → pass · 14pass → pass · 3fail → fail · 5pass → fail · 3

Per-case results (25)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-08 Create an HTML page for an incident post-mortem analysis. Give the major panels card-like borders. Use standard Tailwind border classes, and add smooth rounded-md or rounded-lg rounded corners to modernise the UI.	fail→pass	46,558	50,876	+9%	1	1	0%	8,234	9,591	+16%	0	0	—
case-09 Generate a single-file HTML dashboard summarizing server error logs. Give the status cards extra visual pop using Tailwind gradient backgrounds like bg-gradient-to-r and soft box shadows like shadow-md.	fail→pass	37,464	37,893	+1%	1	1	0%	8,229	10,171	+24%	0	0	—
case-16 Generate a standalone HTML document for an audit changelog. Create horizontal section separators using text dash lines inside HTML elements styled with monospaced muted text rather than thick standard hr tags.	fail→pass	38,256	36,532	-5%	1	1	0%	8,225	10,167	+24%	0	0	—
case-01 Can you build a standalone HTML page in Russian to present an internal system telemetry report? I want an ultra-minimal, high-density layout featuring clear visual hierarchy, structured data panels, and stark text-focused formatting to display our cluster health and recent incident logs.	fail→pass	34,684	56,634	+63%	1	1	0%	8,242	10,184	+24%	0	0	—
case-02 I need a complete single-file HTML document for an Architectural Decision Record (ADR). Please structure it with a plain, restrained design aesthetic that relies on strong typographic hierarchy, grid layouts for main content and side notes, and explicit structural dividers without any flashy visual effects.	fail→pass	39,886	39,821	-0%	1	1	0%	7,413	9,031	+22%	0	0	—
case-03 Could you create a self-contained HTML page for a developer brief outlining our new API deployment pipeline? The layout should have a minimal visual style, featuring a structured header, multi-column panels for endpoint specs, and a clean feed of recent code deployments.	fail→pass	36,214	49,355	+36%	1	1	0%	8,240	10,182	+24%	0	0	—
case-04 Create a pure CSS stylesheet file for a mobile-responsive marketing landing page using flexbox layout and screen media queries to adapt to desktop and mobile screen sizes.	pass→fail	44,417	39,552	-11%	1	1	0%	7,757	7,422	-4%	0	0	—
case-05 Write a React functional component for a dynamic user profile card using Tailwind CSS with responsive breakpoints and hover transition animations.	pass→fail	29,065	43,899	+51%	1	1	0%	5,088	10,153	+100%	0	0	—
case-06 Design a CSS stylesheet tailored for printing documents, using print media query rules to hide non-printable navigation bars and adjust page margins for A4 paper.	pass→pass	21,466	43,554	+103%	1	1	0%	3,321	10,161	+206%	0	0	—
case-07 I need a single-file HTML document for a database schema index. The page should use a dark/light muted color system defined via custom properties in CSS variables inside a style block. Ensure you add hover classes for buttons and custom styling rules for .table-card inside style tags.	fail→pass	44,813	39,740	-11%	1	1	0%	8,246	10,188	+24%	0	0	—
case-10 Produce a standalone HTML page for an internal engineering roadmap. Please import Inter or Roboto from Google Fonts in the HTML head to enhance typography.	fail→pass	49,860	36,167	-27%	1	1	0%	8,216	10,158	+24%	0	0	—
case-11 Generate a single HTML document for a microservice status dashboard. Please include Heroicons or Lucide SVG icons next to each service name for status indicators.	fail→pass	38,129	38,099	-0%	1	1	0%	8,219	10,161	+24%	0	0	—
case-12 Создай одностраничный HTML-документ на русском языке для внутреннего регламента информационной безопасности. Подготовь разметку с шапкой, блоками правил и подвалом.	pass→fail	27,345	49,322	+80%	1	1	0%	4,306	10,170	+136%	0	0	—
case-13 Build a single HTML document for a quarterly infrastructure cost report. Make sure the grid layout is fully responsive across mobile and desktop viewports using Tailwind breakpoint prefixes like sm:grid-cols-1 md:grid-cols-3.	fail→fail	35,794	36,161	+1%	1	1	0%	8,235	10,177	+24%	0	0	—
case-14 Create a self-contained HTML page for a software release log. Avoid writing custom styling rules for buttons or panels in style tags, and instead load the standard CDN distribution of Tailwind CSS for layout.	pass→pass	37,642	35,560	-6%	1	1	0%	8,228	10,170	+24%	0	0	—
case-15 Provide a single-file HTML executive brief on network uptime. Ensure the viewport meta tag is configured appropriately for a fixed non-responsive desktop presentation.	fail→fail	37,121	38,556	+4%	1	1	0%	8,218	10,160	+24%	0	0	—
case-17 Create a single-file HTML report for build pipeline status. Highlight failing builds with bright red status tags like bg-red-500 and passing builds with emerald green like bg-emerald-500.	fail→fail	36,833	38,573	+5%	1	1	0%	8,232	10,174	+24%	0	0	—
case-18 Produce a single-file HTML page for a key-value configuration manifest. Wrap the primary document shell in a fixed desktop width container centered horizontally with auto margins.	fail→pass	38,846	39,260	+1%	1	1	0%	8,221	10,163	+24%	0	0	—
case-19 Write a standalone HTML page for an API deprecation notice. Give the main page header a stark top and bottom border using the high-contrast ink color variable.	fail→pass	37,019	35,448	-4%	1	1	0%	8,221	9,126	+11%	0	0	—
case-20 Generate a single HTML page for a server migration checklist. Render section titles with high-density bracketed prefix badges like [ MAIN ] using inverted background and text colors.	fail→pass	49,376	39,913	-19%	1	1	0%	8,222	8,666	+5%	0	0	—
case-21 Create a single-file HTML layout for a code review summary with a main content area and a sidebar. Give the main area a solid border and the sidebar a dashed border using design tokens.	pass→pass	29,931	30,366	+1%	1	1	0%	7,008	8,547	+22%	0	0	—
case-22 Create a standalone HTML page for an API status page. Add hover effects for links in the style block using custom CSS rules like a:hover { background-color: black; }.	fail→pass	26,780	50,699	+89%	1	1	0%	6,247	10,167	+63%	0	0	—
case-23 Build a single HTML page displaying software vulnerability advisories. Label each advisory severity with small, uppercase, thin-bordered badges.	fail→pass	47,825	49,220	+3%	1	1	0%	8,214	10,156	+24%	0	0	—
case-24 Create a single-file HTML document for an interactive data catalog. Include Alpine.js or Vue.js via CDN to add client-side search filtering functionality.	fail→fail	37,872	50,550	+33%	1	1	0%	8,221	10,163	+24%	0	0	—
case-25 Create an HTML document for a system architecture overview. Put all markup, inline styles, and design tokens into one single HTML file that can be opened directly in a browser without external CSS files.	fail→fail	50,846	39,382	-23%	1	1	0%	8,227	10,169	+24%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +44 percentage points is the difference between those two pass rates over the 25 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 24%
Pass rate with the skill: 68%
Cases attempted: 25
Cases counted toward lift: 25
Cases that regressed: 3
Skill version measured: v1
Run completed: 8/30/2026, 14:24 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-08

Prompt

Create an HTML page for an incident post-mortem analysis. Give the major panels card-like borders. Use standard Tailwind border classes, and add smooth rounded-md or rounded-lg rounded corners to modernise the UI.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run68

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+56% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 28 days ago

Other measured skills in the registry, with their headline benchmark lift.