The design knowledge layer for AI agents.
577 enriched skill files — styles, palettes, typography, workflow rules, patterns — structured for any agent to consume.
Design agents generate UI from prompts. But they're only as good as the design knowledge they have access to.
Ask an agent to "make it glassmorphism" without giving it procedural rules, and you get a guess. Ask it to "use a financial dashboard palette" without giving it hex values, and you get generic blues. Ask it to "lay out a conversion-optimized landing page" without the actual pattern structure, and you get a generic template.
That knowledge exists — scattered across dozens of repos, CSVs, and blog posts. No single place collects, structures, and deduplicates it in a format agents can consume.
Skill-kit is that place.
Every file is a self-contained design skill — with structured frontmatter for querying and a body of procedural instructions any agent can follow directly. Drop a file into your agent's context, and it stops guessing.
Skills/styles/glassmorphism.md → Procedural rules + tokens → agent applies the style correctly
Skills/palettes/financial-dashboard-palette.md → Hex table, CSS vars, Tailwind config → paste into project
Skills/typography/modern-professional.md → Font pairing, Google Fonts URL, @import → ready to use
Skills/patterns/conversion-optimized.md → Landing-page conversion pattern → structure, not a guess
With any AI agent: Copy a skill file into your system prompt, project context, or agent workspace. The agent reads the procedural rules and applies them.
With any project: Open a palette file, copy the CSS variables or Tailwind config, paste into your project. Done.
For comparison: Want to know which styles use frosted-glass effects? grep -l "blur\|backdrop" Skills/styles/*.md — the brain is queryable.
skill-kit/
├── README.md ← you are here
├── METHODOLOGY.md ← how this was built (the interesting part)
├── _MOC.md ← map of content — start here to browse
│
├── Platforms/ (24 files) ← one index per platform
│ ├── typeui.md
│ ├── designmd-ai.md
│ ├── ui-ux-pro-max.md
│ └── ...
│
└── Skills/ (577 files across 9 categories)
├── styles/ (121) ← glassmorphism, brutalism, neumorphism, liquid-glass...
├── palettes/ (96) ← 6-color hex tables, CSS vars, Tailwind config
├── typography/ (57) ← font pairings, Google Fonts URLs, @import snippets
├── rules/ (95) ← audit rules, accessibility checks, spacing systems
├── workflows/ (105) ← UX guidelines, design process patterns
├── patterns/ (46) ← landing page patterns, form flows, nav structures
├── commands/ (27) ← agent command templates
├── charts/ (25) ← chart type metadata, when to use what
└── components/ (5) ← component-level design specs
Every file has the same frontmatter shape — this is the queryable index:
---
name: glassmorphism
type: style
category: styles
platforms: [typeui, ui-ux-pro-max-skill]
url_sources:
- https://github.com/bergside/awesome-design-skills/tree/main/skills/glassmorphism
license: MIT
fetched_at: 2026-05-13
status: enriched
---Concept-first, not platform-first. When three platforms describe "glassmorphism," that's one file with three sources — not three duplicate files. Dedup at the concept level.
Frontmatter as schema. Every file carries structured YAML: name, type, category, platforms, sources, license, status. Filter with grep, parse with any YAML library, or browse in Obsidian.
Wiki-links as edges. Files reference related concepts: [[neumorphism]], [[claymorphism]], [[liquid-glass]]. In Obsidian, this renders as a navigable graph. In any editor, it's a searchable cross-reference.
Re-runnable, not artisanal. The _raw-catalogs/ folder contains the Python scripts that built every file. New skills get added to the data tables, the script reruns, the brain refreshes.
Design agents are moving fast. They all produce better results when they have structured design knowledge to work with — procedural rules, real tokens, actual layout patterns.
But that knowledge is scattered. Brand design systems live in private repos. Glassmorphism rules live in another. Palette definitions live in CSVs. Typography pairings live in blog posts.
Skill-kit brings it together. One concept, one file, one format, any agent.
skill-kit is a collection with two licensing layers.
Original work is MIT. The build scripts, frontmatter schema, _MOC.md, METHODOLOGY.md, the repository structure, and the composer are MIT-licensed (see LICENSE).
Aggregated skill content is licensed per file. Each file under Skills/ keeps its upstream license. The governing license for any skill file is the value of its frontmatter license: field. Full source attribution is in ATTRIBUTIONS.md.
| Source | License | Contributes to (v1) |
|---|---|---|
| TypeUI / bergside repos | MIT | styles, palettes, typography, charts |
| MC Dean | MIT | workflows, commands |
| Vercel labs | MIT | rules |
| ui-ux-pro-max | MIT | styles, palettes, typography, workflows, patterns, charts |
| designmd.ai community | CC-BY-SA (per kit) | patterns, components |
| Anthropic frontend-design | Anthropic custom terms | rules (enrichment layer) |
A note on ShareAlike. 36 files carry CC-BY-SA, which is copyleft — an adaptation that incorporates a CC-BY-SA file must itself be CC-BY-SA and cannot be relicensed under MIT. These files are tagged license: CC-BY-SA and composable: false in frontmatter so they can be filtered out of composed output. See NOTICE.md.
Each file's frontmatter includes its specific source URL and license. When in doubt, check the file.
Five files that show the range:
-
Skills/styles/glassmorphism.md— Procedural rules + design tokens + CSV metadata from three platforms. The canonical example of concept-first merging. -
Skills/palettes/financial-dashboard-palette.md— Full hex table, CSS variables, Tailwind config. Copy-paste ready for any fintech project. -
Skills/patterns/conversion-optimized.md— A landing-page conversion pattern: layout structure, section order, and the reasoning behind them — so the agent builds structure, not a guess. -
Skills/rules/contrast-escalates-with-state.md— A single, concrete audit rule your agent can check its own UI against while building. One of 95 inrules/. -
Skills/typography/modern-professional.md— Font pairing with Google Fonts URL, CSS @import, and Tailwind config. Five seconds from file to project.
The full story of how this brain was built — from one 17 KB landscape report to hundreds of enriched files in a single focused session — is in METHODOLOGY.md. The short version:
- 8 parallel research agents enumerated 24 platforms
- A single Python script scaffolded 1,148 stub files in under a second
- Focused merge scripts enriched each category from its source
- An audit-first pattern (audit → merge → fix → report) kept quality high
- Rate-limit engineering (not patience) handled designmd.ai's API throttling
The methodology generalizes to any domain. Take a landscape, decide a structure, scaffold at scale, enrich from sources, refuse to fake completeness.
Contributions welcome. The quality bar:
- One concept, one file. Don't add a file that duplicates an existing concept under a different name.
- Real content only. Every file must have a verifiable source. No AI-generated filler.
- Frontmatter required. Follow the schema: name, type, category, platforms, url_sources, license, status.
- Status must be honest. If you can't find a source, mark it
stub-no-sourcewith a note explaining why.
To add a new skill:
- Check if the concept already exists (search by name and common aliases)
- Create the file in the appropriate category folder
- Fill the frontmatter completely
- Add wiki-links to related concepts in a
## Relatedsection - Open a PR with the source URL in the description
- Skill Composer — a web app to pick a style + palette + typography and export a merged SKILL.md
- Agent-native distribution — MCP server, CLI, multiple agent format exports
- Community contributions — expand beyond the initial 24 platforms
Built by Umair Ali Khatri — Head of UX & Design, mapping the intersection of design systems and AI agents.