Design Hub — Security skill for Claude Code

design-hub

One entry point for all your design skills. `design-hub` is a small router skill for Claude: you type a short shortcut like `be` or `security-product`, and it loads the matching design skill(s) and applies them with consistent rules.

/design-hub en scan results dashboard
/design-hub be pricing section
/design-hub security-product full frontend
/design-hub pick landing page for a security startup
/design-hub list

It does **not** contain the design styles themselves. It maps a shortcut to a style skill you already have installed, so the real style rules are always loaded from the source skill and never paraphrased from memory.

Why

With 60+ design style skills installed, nobody remembers their exact names. design-hub gives every style a 2-letter code, groups them by category, adds ready-made combinations (recipes), and enforces a few pairing rules so products don't end up with five clashing looks.

Requirements

• Claude Code or any Claude client that supports skills and slash commands.
• The design style skills you want to call. This repo only references them by name. The 67-style set it was built around comes from the awesome-design-skills collection by bergside. Check that repository for its license and install the styles you want.
• Optional helper skills used by the helper shortcuts: design system, brand, banner design, slides, UI styling, frontend design, 3D web experience, glassmorphism, image-to-code, dataviz and scroll-world.

A shortcut whose target skill is not installed simply can't load. design-hub should tell you which skill is missing.

Install

Clone straight into your skills folder:

git clone https://github.com/Momen-Shili/design-hub ~/.claude/skills/design-hub

Or copy the folder manually so you end up with `~/.claude/skills/design-hub/SKILL.md`.

Usage

`/design-hub `

• A shortcut is a 2-