Source profileQuality 74/100

nexu-io/open-design/plugins/_official/atoms/design-extract/SKILL.md

design-extract

Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.

Source repository stars: 91,167
Declared platforms: 0
Static risk flags: 0
Last source update: 2026-08-25
Source checked: 2026-08-25

Decision Compatibility Install Workflow Permissions Evidence Source FAQ

Decision brief

What it does: where it fits

Spec §10 / §21.3.2: tokens scattered across a repo's CSS / theme files / Tailwind config / styled-components helpers / SCSS partials need to be lifted into one bag before token-map can crosswalk them onto the active OD design system. This atom does the lifting; the input shape i…

Best for

Not for

Hard-coded hex values inside JSX literals (color: 'fff') are
Tailwind utility scans must dedupe palette references against the

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/atoms/design-extract"

Safe inspection promptEditorial

Inspect the Agent Skill "design-extract" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/plugins/_official/atoms/design-extract/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Inputs
code/index.json from code-import (code-migration), OR
code/index.json from code-import (code-migration), ORfigma/tree.json from figma-extract (figma-migration), ORA folder of screenshot images (tune-collab quick-tune flows).
02
Output
Each token entry carries:
Each token entry carries:sources[] and usage[] are the audit trail token-map.unmatched.json references when a target token can't be found.
03
Convergence
The atom completes when code/tokens.json exists. Empty token bags emit a warning event but do not abort — token-map handles the empty case by skipping its mapping pass.
The atom completes when code/tokens.json exists. Empty token bags emit a warning event but do not abort — token-map handles the empty case by skipping its mapping pass.
04
Anti-patterns the prompt fragment forbids
Hard-coded hex values inside JSX literals (color: 'fff') are
Hard-coded hex values inside JSX literals (color: 'fff') areTailwind utility scans must dedupe palette references against the- Hard-coded hex values inside JSX literals (color: 'fff') are tokens for this atom's purposes; record them with kind:'color' and a synthetic name so they don't disappear into the noise. - Tailwind utility scans must de…

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	74/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	91,167	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: nexu-io/open-design
Skill path: plugins/_official/atoms/design-extract/SKILL.md
Commit: edfa6b5f447e95cb120eae030f03baba00dc34de
License: Apache-2.0
Collected: 2026-08-25
Default branch: main

View the original SKILL.md

Design extract

Spec §10 / §21.3.2: tokens scattered across a repo's CSS / theme files / Tailwind config / styled-components helpers / SCSS partials need to be lifted into one bag before token-map can crosswalk them onto the active OD design system. This atom does the lifting; the input shape is intentionally generic so the same atom serves both code-migration and figma-migration when fed different sources.

Inputs

code/index.json from code-import (code-migration), OR
figma/tree.json from figma-extract (figma-migration), OR
A folder of screenshot images (tune-collab quick-tune flows).

Output

project-cwd/
└── code/
    └── tokens.json     # { colors[], typography[], spacing[], radius[], shadow[] }

Each token entry carries:

{
  "kind":     "color",
  "name":     "primary-500",     // optional source name
  "value":    "#5b8def",          // canonical value
  "sources": ["styles/global.css:42", "tailwind.config.js:24"],
  "usage":   ["Header.tsx", "Footer.tsx"]
}

sources[] and usage[] are the audit trail token-map.unmatched.json references when a target token can't be found.

Convergence

The atom completes when code/tokens.json exists. Empty token bags emit a warning event but do not abort — token-map handles the empty case by skipping its mapping pass.

Anti-patterns the prompt fragment forbids

Hard-coded hex values inside JSX literals (color: '#fff') are tokens for this atom's purposes; record them with kind:'color' and a synthetic name so they don't disappear into the noise.
Tailwind utility scans must dedupe palette references against the active theme — never list bg-blue-500 and bg-blue-600 as one token.

Status

Implemented by the daemon runner in apps/daemon/src/plugins/atoms/design-extract.ts. It scans the indexed source files, extracts CSS, Tailwind, and JavaScript token evidence, and writes code/tokens.json.

Frequently asked questions

What to verify before installation and use

What does the design-extract source document cover?

How do I install design-extract?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/atoms/design-extract". Inspect the command and pinned source before running it.

Alternatives

Compare before choosing

Computed 10045,511

coreyhaines31/marketingskills

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

Computed 100147

oaustegard/claude-skills

featuring

Generate hierarchical _FEATURES.md files that describe what a codebase DOES from a user/consumer perspective, anchored to source symbols via tree-sitting. Supports large complex codebases through feature-driven decomposition into sub-feature files. Uses a multi-pass synthesis: orientation → detail → overview rewrite. Use when someone says "what does this do", "document features", "feature inventory", "_FEATURES.md", or needs to understand a codebase's purpose before modifying it. Complements tre

Computed 1008

narrative-io/narrative-skills-marketplace

design-analysis

Translate a fuzzy analytical question into a rigorous investigation plan. Interrogates the ask, grounds the plan in the available data dictionary, applies analytical best practices, and produces a structured brief of query specifications for a downstream query-writing skill. Plans, does not write SQL. Use when: "why did X drop", "is there a relationship between A and B", "who are our highest-value customers", "what's driving the change in Y", "investigate this trend", "design an analysis for", "

Computed 1007

event4u-app/agent-config

existing-ui-audit

Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.