frontend-design

A set of rules for designing web interfaces, covering text styles, colours, page layout, animation, interactions, and user-facing wording.

In plain words
What is it for?
Use it when creating or improving front-end pages, CSS, user interfaces, and user experiences.
Why use it?
It gives an AI coding agent specific design guidance when a generic result would not match your intended interface.

Plugin for Claude Code

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Claude Code
/plugin marketplace add harnessprotocol/harness-kit
agentmods
npx agentmods add plugins/harnessprotocol/harness-kit/frontend-design
Clone the repo
git clone --depth 1 https://github.com/harnessprotocol/harness-kit

Made for: Claude Code.

Per session not measured What this adds to a session before it is invoked.
When invoked not measured Not applicable: nothing here is loaded into a session.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Security

Grade A, and why

frontend-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 yesterday.

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.

plugins/frontend-design/.claude-plugin/plugin.json · 9 lines

What it actually says

{
  "name": "frontend-design",
  "description": "Production-grade frontend design skill that avoids AI slop — specific rules for typography, color (OKLCH), layout, motion, interaction, and UX writing",
  "version": "0.1.2",
  "category": "design",
  "tags": ["design", "frontend", "css", "typography", "color", "ui", "ux"],
  "x-developed-with": "claude-sonnet-4-6"
}
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. yesterday First seen · 9 lines scan A 798f8cd3bbdc

Subscribe to this mod's changes

frontend-design is a plugin published in the GitHub repository harnessprotocol/harness-kit (10 stars, last pushed 2d ago), licensed Apache-2.0. Its token cost is not measured: this kind of file is read by the harness, not the model. 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 plugins, from other repositories

interaction-design

Design meaningful interactions with micro-animations, state machines, gestures, error handling, and feedback patterns.

Owl-Listener/designer-skills · not measured

llm-wiki

Plugin marketplace listing 1 plugin: llm-wiki.

praneybehl/llm-wiki-plugin · not measured

mindmap

Generate interactive mind maps from any content — with contradiction detection, gap analysis, source attribution, adaptive layouts, and a persistent knowledge atlas. Outputs interactive React artifacts or portable Markmap files.

0x-man/mindmap-skill · not measured

ui-clone-skills

Motion forensics for the animated web. Four jobs against a live URL: decode (analyse motion + build, no code), clone (URL → React + Tailwind), verify (AE/SSIM + motion-parity score vs. an existing impl), extract (raw JSON dump). Extracts real CSS and animation params (GSAP / Framer Motion / Lenis / anime.js) directly…

voidmatcha/ui-clone-skills · not measured

limitless

Pyro's curated Claude Code skill pack: article-pack, Codies Research, Surface-First Development, SFD v2 (docket-emitting contract handoff), SearXNG, Suno Pack (lyric craft, inspiration audits, rendering, experiment lanes, saga-synced journals), Hivemind, Dojo, Learn Anything (tier-gated beginner→expert curricula), and.

pyros-projects/limitless · not measured

rad-context-prompter

Write, debug, reverse-engineer, and migrate AI prompts — now including agentic loops and goal conditions. The prompt-engineering skill covers writing patterns and platform-specific shape (Claude, GPT, Gemini, Claude Code, OpenAI Codex/AGENTS.md, image generators, agentic tools). The loop-goal-engineering skill authors.

RadOrigin-LLC/RAD-Claude-Skills · not measured