Blueprint UI

What it does

When your agent uses it

• Creating marketing sites
• Tasks that involve Landing pages
• Tasks that involve UI design

Example prompts

• “/blueprint-ui”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

1. 1No rounded corners. Everything is sharp-edged. Never use rounded-* classes.
2. 2Connected sections. Sections share borders and flow into each other via border-x border-border on a shared max-width container. No…
3. 3Dashed outlines for content boundaries, illustration placeholders, and measurement guides.
4. 4Section labels — small monospace uppercase labels positioned over section borders (e.g., "Hero", "Features", "CLI").
5. 5Measurement annotations — thin dashed lines with monospace dimension labels (e.g., "48px", "grid: 3 cols", "max-width: 672px") placed…
6. 6Dot grid background on the page body.
7. 7Numbered elements — cards and list items get small monospace counters like "01", "02", "03".

What it can do on your machine

Read from SKILL.md and the folder at commit 18afd5f. 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 html and css).

  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

Blueprint UI loads about 1.9k tokens when it runs. Until then it costs about 65 tokens; SKILL.md has 428 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~65

When it runs · the whole SKILL.md, loaded when a task matches

~1.9k

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

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 superhq-ai/shuru at commit 18afd5f, republished under its Apache-2.0 licence (© superhq-ai). 428 words, ~1,894 tokens.

name

blueprint-ui

description

Build landing pages and web UIs using a dark blueprint/wireframe aesthetic with sharp edges, connected sections, dashed outlines, measurement annotations, and technical typography. Use when creating marketing sites, landing pages, or product pages.

Background:     #0a0a0a
Surface:        #111111
Border:         #1e1e1e
Border bright:  #333333
Text primary:   #e8e8e8
Text muted:     #666666
Text dim:       #525252  (labels, annotations, counters)
Accent:         #f59e0b  (amber — CTAs, highlights, output text)
Accent alt:     #ea580c  (orange — hover states, secondary accent)

<section class="relative border-x border-border">
  <span class="section-label">Features</span>
  <div class="border-b border-dashed border-border px-8 pt-16 pb-16 md:px-16 md:pt-24 md:pb-24">
    <!-- content -->
  </div>
</section>

<div class="grid border border-border md:grid-cols-3">
  <div class="border-b border-border p-6 md:border-b-0 md:border-r md:p-8">
    <div class="mb-3 font-mono text-[10px] uppercase tracking-widest text-dim">01</div>
    <h3>Title</h3>
    <p class="text-muted">Description</p>
  </div>
  <!-- more cards... last card has no border-r -->
</div>

<div class="border border-border">
  <div class="flex items-center gap-2 border-b border-border px-4 py-2.5">
    <span class="h-2.5 w-2.5 border border-[#ff5f57] bg-[#ff5f57]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#febc2e] bg-[#febc2e]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#28c840] bg-[#28c840]/20"></span>
    <span class="ml-2 font-mono text-[10px] text-dim">terminal</span>
  </div>
  <div class="p-5 font-mono text-xs leading-[1.8] md:p-6 md:text-sm">
    <p><span class="text-dim">$</span> <span class="text-text">command here</span></p>
    <p class="text-amber">output here</p>
  </div>
</div>

<!-- Primary (filled) -->
<a class="border border-amber bg-amber px-5 py-2 font-mono text-xs font-medium text-bg hover:bg-transparent hover:text-amber">
  GET STARTED
</a>

<!-- Secondary (outline) -->
<a class="border border-border px-5 py-2 font-mono text-xs font-medium text-muted hover:border-text hover:text-text">
  GITHUB
</a>

<div class="flex items-center gap-2">
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
  <span class="measure">48px</span>
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
</div>

<div class="flex h-48 items-center justify-center border border-dashed border-border">
  <span class="font-mono text-[10px] text-dim">[ 400 x 300 ]</span>
</div>

<div class="carousel flex gap-0 overflow-x-auto scroll-smooth border border-border">
  <div class="flex min-w-[300px] flex-col border-r border-border">
    <!-- card content -->
  </div>
  <!-- more cards... -->
</div>

<nav class="fixed top-0 z-50 w-full border-b border-border bg-bg/90 backdrop-blur-md">
  <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
    <a class="font-mono text-lg font-semibold">brand</a>
    <!-- links + CTA -->
  </div>
</nav>

@import "tailwindcss";

@theme {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-border: #1e1e1e;
  --color-border-bright: #333333;
  --color-text: #e8e8e8;
  --color-muted: #666666;
  --color-dim: #525252;
  --color-amber: #f59e0b;
  --color-orange: #ea580c;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.dot-grid {
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 24px 24px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dim);
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--color-bg);
  padding: 0 6px;
}

.measure {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-dim);
  letter-spacing: 0.05em;
}

.carousel::-webkit-scrollbar { display: none; }
.carousel { -ms-overflow-style: none; scrollbar-width: none; }

© superhq-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/blueprint-ui of superhq-ai/shuru.

Open the folder on GitHubat commit 18afd5f