ingest-github

Name: ingest-github
Author: bluzir

39installs10forks

How to install ingest-github?

bluzir/claude-code-design/ingest-github

$npx -y skills add bluzir/claude-code-design --skill ingest-github

Installs into the current project.

Summary

Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a github.com URL and wants a design system or design work rooted in the repo's style.

Files · 1

View on GitHub

SKILL.md

1	# Ingest GitHub
2
3	Pull a repo into a temp location and extract design tokens. No manual `git clone` required for the user — uses `gh` CLI.
4
5	## Preflight
6
7	1. `Bash(which gh)` — if missing, tell user: `brew install gh && gh auth login`
8	2. Check `$ARGUMENTS` matches `github.com/owner/repo[/(tree\|blob)/ref/path]`
9
10	## Steps
11
12	1. Parse URL into `{owner, repo, ref, subpath}`.
13	- Bare repo: `github.com/foo/bar` → `{owner:foo, repo:bar, ref:default, subpath:''}`
14	- Tree: `github.com/foo/bar/tree/main/src` → `{owner:foo, repo:bar, ref:main, subpath:'src'}`
15
16	2. Clone shallow into a temp dir under `/tmp/cd-ingest-<slug>-<timestamp>`:
17	```
18	Bash(mkdir -p /tmp/cd-ingest-<slug>)
19	Bash(gh repo clone <owner>/<repo> /tmp/cd-ingest-<slug>/<repo> -- --depth 1 --branch <ref>)
20	```
21
22	3. Find token files via Glob (in clone path):
23	- `**/theme.{ts,tsx,js,jsx,json}`
24	- `**/tokens.{css,scss,json}`
25	- `**/tailwind.config.{js,ts,cjs,mjs}`
26	- `**/_variables.{css,scss}`
27	- `**/colors.{ts,js,json}`
28	- `*/.tokens.json` (W3C DTCG format)
29	- `*/design-tokens.`
30	- `*/palette.`
31
32	4. Read candidate files (cap at 20 biggest) and extract:
33	- Colors: regex `#[0-9a-fA-F]{3,8}`, `rgb$...$`, `oklch$...$`, `hsl$...$` + the var/key they're assigned to
34	- Fonts: `font-family:` values, named font stacks
35	- Spacing: numeric scales in Tailwind config, CSS vars with `--space-` / `--spacing-` / `--gap-*`
36	- Radii: CSS vars with `--radius-` / `--rounded-`, Tailwind `borderRadius` config
37
38	5. Write structured output:
39	```
40	artifacts/ingested/<repo>-tokens.json
41	```
42	Schema:
43	```json
44	{
45	"source": { "url": "...", "ref": "...", "ingested_at": "2026-04-20T..." },
46	"colors": { "primary": "#...", "accent": "#...", "bg": "#...", "text": "#...", "semantic": {...}, "all": {...} },
47	"fonts": { "display": "...", "body": "...", "mono": "...", "stacks": [...] },
48	"spacing": [...],
49	"radii": { "sm": 4, "md": 8, "lg": 16 },
50	"shadows": [...],
51	"components": { "Button": { "found_at": "src/.../Button.tsx" }, ... }
52	}
53	```
54
55	6. Summarize to user:
56	- "Found N colors, M fonts, spacing scale [...], K radii. Saved to `artifacts/ingested/<repo>-tokens.json`."
57	- Offer: `/create-design-system` to turn into visual style guide, or start `/make-deck` / `/interactive-prototype` with these tokens pre-loaded.
58
59	7. Cleanup: optionally `Bash(rm -rf /tmp/cd-ingest-<slug>)` — or keep for further exploration.
60
61	## Failure modes
62
63	- No `gh` → clear error + install instruction
64	- Repo private + no auth → `gh auth login` prompt
65	- No tokens found → report "repo has no clear design tokens; suggest manual `AskUserQuestion` fallback or try a specific subpath"
66	- Huge repo (>500MB) → warn user, offer `--subpath` to narrow

People who liked this also viewed

6 picks

Type

ingest-github

39installs10forks

View on GitHub

How to install ingest-github?

bluzir/claude-code-design/ingest-github

$npx -y skills add bluzir/claude-code-design --skill ingest-github

Installs into the current project.

Summary

Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a github.com URL and wants a design system or design work rooted in the repo's style.

Files · 1

View on GitHub

SKILL.md

1	# Ingest GitHub
2
3	Pull a repo into a temp location and extract design tokens. No manual `git clone` required for the user — uses `gh` CLI.
4
5	## Preflight
6
7	1. `Bash(which gh)` — if missing, tell user: `brew install gh && gh auth login`
8	2. Check `$ARGUMENTS` matches `github.com/owner/repo[/(tree\|blob)/ref/path]`
9
10	## Steps
11
12	1. Parse URL into `{owner, repo, ref, subpath}`.
13	- Bare repo: `github.com/foo/bar` → `{owner:foo, repo:bar, ref:default, subpath:''}`
14	- Tree: `github.com/foo/bar/tree/main/src` → `{owner:foo, repo:bar, ref:main, subpath:'src'}`
15
16	2. Clone shallow into a temp dir under `/tmp/cd-ingest-<slug>-<timestamp>`:
17	```
18	Bash(mkdir -p /tmp/cd-ingest-<slug>)
19	Bash(gh repo clone <owner>/<repo> /tmp/cd-ingest-<slug>/<repo> -- --depth 1 --branch <ref>)
20	```
21
22	3. Find token files via Glob (in clone path):
23	- `**/theme.{ts,tsx,js,jsx,json}`
24	- `**/tokens.{css,scss,json}`
25	- `**/tailwind.config.{js,ts,cjs,mjs}`
26	- `**/_variables.{css,scss}`
27	- `**/colors.{ts,js,json}`
28	- `*/.tokens.json` (W3C DTCG format)
29	- `*/design-tokens.`
30	- `*/palette.`
31
32	4. Read candidate files (cap at 20 biggest) and extract:
33	- Colors: regex `#[0-9a-fA-F]{3,8}`, `rgb$...$`, `oklch$...$`, `hsl$...$` + the var/key they're assigned to
34	- Fonts: `font-family:` values, named font stacks
35	- Spacing: numeric scales in Tailwind config, CSS vars with `--space-` / `--spacing-` / `--gap-*`
36	- Radii: CSS vars with `--radius-` / `--rounded-`, Tailwind `borderRadius` config
37
38	5. Write structured output:
39	```
40	artifacts/ingested/<repo>-tokens.json
41	```
42	Schema:
43	```json
44	{
45	"source": { "url": "...", "ref": "...", "ingested_at": "2026-04-20T..." },
46	"colors": { "primary": "#...", "accent": "#...", "bg": "#...", "text": "#...", "semantic": {...}, "all": {...} },
47	"fonts": { "display": "...", "body": "...", "mono": "...", "stacks": [...] },
48	"spacing": [...],
49	"radii": { "sm": 4, "md": 8, "lg": 16 },
50	"shadows": [...],
51	"components": { "Button": { "found_at": "src/.../Button.tsx" }, ... }
52	}
53	```
54
55	6. Summarize to user:
56	- "Found N colors, M fonts, spacing scale [...], K radii. Saved to `artifacts/ingested/<repo>-tokens.json`."
57	- Offer: `/create-design-system` to turn into visual style guide, or start `/make-deck` / `/interactive-prototype` with these tokens pre-loaded.
58
59	7. Cleanup: optionally `Bash(rm -rf /tmp/cd-ingest-<slug>)` — or keep for further exploration.
60
61	## Failure modes
62
63	- No `gh` → clear error + install instruction
64	- Repo private + no auth → `gh auth login` prompt
65	- No tokens found → report "repo has no clear design tokens; suggest manual `AskUserQuestion` fallback or try a specific subpath"
66	- Huge repo (>500MB) → warn user, offer `--subpath` to narrow

People who liked this also viewed

6 picks

Type