liveport: Skill for Claude Code

.claude/skills/design-system-from-reference/SKILL.md

design-system-from-reference is a skill for Claude Code from dundas/liveport. It costs 0 tokens per session (1,178 once invoked), scanned A, original, no licence file.

A four-phase workflow for examining a reference interface screenshot and turning its visual style into a reusable design system for a project.

In plain words
What is it for?
For extracting colours, typography, spacing, and other visual rules from a screenshot and documenting them for reuse.
Why use it?
It provides a structured way to capture visual decisions from an existing interface instead of starting the design system from scratch.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

This is dundas/liveport's own configuration. It tells Claude Code how to work on liveport itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything liveport configures →

Reuse

Borrowing it

Nothing to install: this file belongs to dundas/liveport. 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/dundas/liveport/main/.claude/skills/design-system-from-reference/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/dundas/liveport

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.

agentmods badge for design-system-from-reference

README.md
[![agentmods](https://agentmods.dev/badge/skills/dundas/liveport/design-system-from-reference.svg)](https://agentmods.dev/skills/dundas/liveport/design-system-from-reference)
Your own site
<a href="https://agentmods.dev/skills/dundas/liveport/design-system-from-reference"><img src="https://agentmods.dev/badge/skills/dundas/liveport/design-system-from-reference.svg" alt="Measured on agentmods" 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 1,178 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.
Origin unknown 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.01178
Opus 5 $0.00000 $0.00589
Sonnet 5 $0.00000 $0.00236
Haiku 4.5 $0.00000 $0.00118

Measured 6d ago against content hash bba465293fcd, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

design-system-from-reference 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 6d 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/design-system-from-reference/SKILL.md · 94 lines

The source is not reproduced here

No licence file

A repository with no LICENSE is all rights reserved by default, so the body is not copied here. The metadata, the measurements and the link are.

Read it on GitHub

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.

  1. 6d ago First seen · 94 lines · 0 tokens per session scan A bba465293fcd

Subscribe to this mod's changes

design-system-from-reference is a skill published in the GitHub repository dundas/liveport (0 stars, last pushed 5mo ago), with no licence file. It costs nothing until one of its globs matches a file; then it loads 1,178 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-31.

Related

Other skills, from other repositories

preview-design

Render a real artifact through this branch's local MERIDIAN design code (not the published npm package) so the team can test the new Design Convention on the document / handoff / platform surfaces before it ships. Use for /preview-design, "preview the design convention", "render this with the new design", or Design…

egregore-labs/egregore · 71 tokens

diagrams

Mermaid diagrams following the C4 model: context, container, component, sequence, ER and deployment. Use when saying "diagram", "visualize", or "architecture diagram".

anton-abyzov/specweave · 0 tokens

atomic-visual-options

Planning-phase visual comparison aid. Renders 2-4 side-by-side variants per decision dimension as a single throwaway, self-contained HTML file and captures the user's pick as typed terminal codes (e.g. "A2 B3"). Auto-fires on phrases like "show me a few options", "mock up some variants", "let me see this side by…

damusix/atomic-claude · 150 tokens

ppt-orchestrator

A dispatcher for creating presentations, slide decks, long images, and weekly reports. It chooses a visual style and output format, then sends the work to a more specialised add-on.

huangrichao2020/pretty-skills · 160 tokens

zhongguose-html-skill

An HTML-only presentation system using traditional Chinese colours and Chinese-style visual design. It helps organise source material into a report structure and produces a self-contained HTML file with its assets.

huangrichao2020/pretty-skills · 232 tokens

storyboard-generation

Rules and prompts for generating structured presentation slides and multi-panel storyboards.

alecs5am/ralphy · 18 tokens