frontend-design

v0.3.1

Frontend/UI design guidance, gated by scope: a light or surgical change gets inline principles; a wide-sweeping or highly-detailed design gets routed to Claude Design in the browser with a paste-ready design brief.

Claude Code1 Skill

By Jason MatthewLicense: MIT5 GitHub starsUpdated 2 weeks ago

Directory evidence

Runtimes: Claude Code
Parsed components: 1 skill or MCP entry
Source updated: Sep 5, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install frontend-design for Claude Code

Installs for the current user

claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install frontend-design-5@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/jasonm4130/claude-skills

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/frontend-design/.

Plugin files

plugins/frontend-design/

├── .claude-plugin/plugin.json
└── skills/frontend-design/SKILL.md

Included Skills1

frontend-designskills/frontend-design/SKILL.md

Guidance for distinctive, intentional frontend/UI design — aesthetic direction, typography, layout, motion, and copy — when building new UI or reshaping existing UI. Gates by scope before designing: a light/surgical change (one component, one page section, extending an existing design system) gets inline design principles; a wide-sweeping or highly-detailed design (a new page, a new flow, a visual identity, an ambiguous "make it look better") gets a paste-ready goal/layout/content/audience brief to build in Claude Design at claude.ai/design instead of being designed blind in a terminal. Do NOT use for backend/API/data-model work, copy-only edits with no visual change, or a design the user has already fully specified (exact tokens/brand guide supplied) — apply those directly. Do NOT use when the user wants a visual mockup, wireframe, canvas, or artboard to tweak by hand rather than code they will ship — that is the built-in `design` skill. This skill applies design decisions to real code in the repo.

Plugin manifests1

plugins/frontend-design/.claude-plugin/plugin.json

{
  "name": "frontend-design",
  "description": "Frontend/UI design guidance, gated by scope: a light or surgical change gets inline principles; a wide-sweeping or highly-detailed design gets routed to Claude Design in the browser with a paste-ready design brief.",
  "version": "0.3.1",
  "author": {
    "name": "Jason Matthew",
    "email": "[email protected]"
  },
  "homepage": "https://github.com/jasonm4130/claude-skills",
  "repository": "https://github.com/jasonm4130/claude-skills",
  "license": "MIT",
  "keywords": [
    "claude-code",
    "frontend",
    "design",
    "ui",
    "visual-design"
  ]
}