extract-design-system

extract-design-system18 wordsCuratedinstall-now-after-trust-gate

Curated third-party skill source. Run external-skill-auditor before repo promotion.

Quick Start

Install:

npx skills add arvindrk/extract-design-system --skill extract-design-system -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Use: /extract-design-system

Works with Claude Code, Gemini CLI, OpenCode, and other agentskills.io-compatible agents.

Curated external (hand-maintained)

Composed compose-external-wave-4 using authoring SSOT (docs/src/authoring/skills/extract-design-system.mdx) + research. Do not run wagents docs generate on this file (HAND-MAINTAINED sentinel). Run external-skill-auditor before using in production or promoting.

What It Does

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Reverse-engineers visual primitives and generates starter W3C-compatible tokens.json + tokens.css (CSS custom props) for local projects. Available as focused AI agent skill (for Claude/Cursor/Codex etc) and standalone npm CLI + MCP server exposing extract/init/get tools. Workflow: confirm public site, run extraction (Playwright), normalize, summarize findings, emit starter files under design-system/ and .extract-design-system/. Not a full component lib or auto-rewriter; for initialization and repeatable extraction before broader styling work. MIT.

Harness Coverage

Targets verified harnesses: antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode.

Portable multi-harness install command:

npx skills add arvindrk/extract-design-system --skill extract-design-system -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Trust / Audit

Trust tier: Curated (curated-trust-gated)

Curated status: install-now-after-trust-gate

Risk notes: Curated third-party skill source. Run external-skill-auditor before repo promotion.

Entry maintained via authoring + research for compose-external-wave-4; provenance and audit notes are authoritative there (research context is advisory).

Install Prerequisites

npx skills add arvindrk/extract-design-system --skill extract-design-system -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

status=install-now-after-trust-gate; selector=named (or source-spec). Requires npm + optional npx playwright install chromium. Also publishes MCP server (extract-design-system-mcp) for direct tool use in supported hosts. Config supports global/project install.

Public Metadata

Field	Value
Source Type	curated-external
Display Source	arvindrk/extract-design-system
Source Kind	github
Installability	portable command
Review State	curated
Trust Tier	curated-trust-gated
Target Agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

General

Field	Value
Name	extract-design-system

Curated catalog entry

docs/src/authoring/skills/extract-design-system.mdx (full SSOT excerpt)

---
name: "extract-design-system"
description: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
title: "Extract Design System"
source_kind: "curated-external"
source: "arvindrk/extract-design-system"
install_source: "arvindrk/extract-design-system"
status: "install-now-after-trust-gate"
trust_tier: "curated-trust-gated"
provenance_status: "verified-install-command"
install_command: "npx skills add arvindrk/extract-design-system --skill extract-design-system -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode"
target_agents: [antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode]
source_url: "https://github.com/arvindrk/extract-design-system"
notes: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
risk_notes: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
promotion_policy: "Install only after trust gate; audit again before repo promotion."
provenance_evidence: "Curated `npx skills add` command with named `--skill` selectors under `install-now-after-trust-gate` in config/external-skills.md."
---

{/* GENERATED-AUTHORING: source=config/external-skills.md; entry=extract-design-system; re-run migration to refresh */}

Curated third-party skill source. Run external-skill-auditor before repo promotion.

Install / provenance (from authoring frontmatter + research):

Field	Value
install_command	npx skills add arvindrk/extract-design-system --skill extract-design-system -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode
source	arvindrk/extract-design-system
source_url	https://github.com/arvindrk/extract-design-system
trust_tier	curated-trust-gated
curated_status	install-now-after-trust-gate
target_agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

Resources

Skill Catalog Browse custom and external skills.

CLI Reference Install and manage skills.