Justskill Design

Design and edit web pages as a validated HTML file with inline CSS, then fine-tune them on a local canvas. Use this skill whenever the user wants to design, mock up, wireframe, redesign or restyle a web page, app screen, or mobile screen — a landing page, dashboard, settings page, pricing page, empty state, onboarding flow, or any layout built from frames, text, images and icons — or wants to change the spacing, colour, typography or layout of an existing design, turn a design into deliverables, or bring in a `.pen` file. Also use it when the user asks for a visual editor for pages, a design f

10 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add justskill-ai/justskill-design --skill justskill-design

Manual install

git clone --depth 1 https://github.com/justskill-ai/justskill-design.git /tmp/justskill-design
mkdir -p ~/.claude/skills
cp -r /tmp/justskill-design/. ~/.claude/skills/justskill-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# justSkill

You write one HTML file with inline CSS. It is the design. This skill checks it,
lets you edit it one change at a time, and gives the user a canvas to drag.

Nothing installs, nothing logs in, no server runs in the background. Every
command is `node design.mjs <verb>`.

## The one rule

**The design file is the truth. Write it, do not rewrite it.**

- Write the file with `Write`. Give every element a `data-id` and a `data-type`.
- `format` rewrites a file into canonical form. Use it when a file came from
  somewhere else; do not use it to change a design.
- Change it with `set`, `add`, `remove`, `move`, `rename`. Never rewrite the whole
  file to change one value: an op is one undo step, and a rewrite is an afternoon
  of lost work for the user who has the canvas open.
- Run `validate` before you hand anything back.

If the user has the canvas open, you are not the only writer. `set` and friends
re-read the file first, so they never clobber the user's drag. A full-file
`Write` does.

## The file

Read the full skill on GitHub

Details

Skill name: justskill-design
Repository: justskill-ai/justskill-design
License: MIT
Repo updated: 25 October 2026

FAQ

What does the Justskill Design skill do?

How do I install the Justskill Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add justskill-ai/justskill-design --skill justskill-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Justskill Design popular?

It lives in justskill-ai/justskill-design, which has 10 GitHub stars and 0 forks.

Related skills

UX Audit

paulunemoon/ux-audit-skill

Evidence-based UX audit of a product that already exists — marketing website, web app, mobile app, or desktop app. LOAD WHEN the request is to evaluate, review, critique, or diagnose an existing interface: "audit the UX of this app", "review this flow", "review this screen", "what's wrong with this onboarding", "why do users drop off here", "audit our current workflow", "is this accessible", "critique this product", "heuristic review", "a11y audit" — and the same intents in French ("audite l'UX", "revois ce parcours / cet écran", "qu'est-ce qui cloche dans cet onboarding", "pourquoi les utilis

Frontend & Design

App UI Slopless

massipetro/app-ui-slopless

Visual design and UX for native app screens in SwiftUI (iOS and macOS), Jetpack Compose and Compose Multiplatform (KMP). Use whenever the user wants to design, build, restyle, redesign, theme or audit how an iOS, Android or Mac screen, window, flow, component or design system looks and feels — e.g. a screen that looks generic, boring, stock Material or "AI-made"; picking a type scale, colour palette or theme code; giving an app a style (warm premium, neo-brutalist, playful, editorial); or a UX critique of a mobile or Mac screen or screenshot (hierarchy, tap targets, thumb reach, sidebar and to

Frontend & Design

Designgate

sukenik-collab/claude-designgate

Mandatory human-in-the-loop UI design checkpoint. Use automatically — before writing any UI code — whenever the task involves building, creating, adding, or redesigning a user-facing screen, page, flow, component, interface, or frontend, unless every interaction maps to an already-decided pattern. Verifies a brand brief exists, reads prior UX decisions to avoid re-asking resolved questions, surfaces only genuinely unresolved interaction decisions (batched, max 5), generates a complete screen-generation prompt for the configured design MCP, and enforces a hard human approval gate before impleme

Frontend & Design

Web Card Game

mars-tw/web-card-game-skill

維護「阿軒卡牌對戰」時使用。這是一款原生 HTML/CSS/JS 網頁 TCG，包含對戰、卡包、收藏、牌組工作台、每日任務、收藏里程碑與週任務。

Frontend & Design

Mqc Female Lawyer Brandcast

MiaoQichuan/mqc-female-lawyer-brandcast

女律师 IP 形象内容工作台。一套固定的风格，播成多种内容形态——用内置的 53 张女律师漫画形象素材，把法律内容做成成套图文：朋友圈九宫格（八股结构）、小红书 3:4 多图、公众号（封面 + 正文插图组）、单张方图、竖版长图。凡是用户要写公众号推文、小红书图文、朋友圈九宫格、普法内容、案例解读、法律科普，或者提到"配图""插图""封面""九宫格""做成图""普法漫画""案情漫画""律师形象""IP 形象"，都要使用这个 Skill。注意：公众号要的是散落在正文段落之间的插图和两张封面，**不是一整张长图**，做公众号一律走 wechat 格式。用户直接给短句让你排版，或者丢一整篇长文、一段案情让你梳理提炼再配图，两种都用它。素材库已内置形象素材，不要调用任何文生图工具。

Frontend & Design

Wcag Accessibility

mrKanoh/wcag-accessibility-audit-skill

WCAG 2.1/2.2 AA accessibility skill: audits, remediation, ARIA roles and patterns, keyboard navigation, focus management, screen reader behavior (NVDA, JAWS, VoiceOver, TalkBack), color contrast, accessible components (modals, menus, tabs, forms, tables, comboboxes), React, Vue, Angular, Svelte and Next.js, mobile a11y (React Native, SwiftUI, Compose), cognitive accessibility, legal compliance (ADA, EAA, Section 508, EN 301 549, VPAT/ACR) and CI testing (axe-core, pa11y, Playwright). Use when the user asks whether UI is accessible or passes WCAG, asks about ARIA, focus traps, live regions, ski

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.