skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

seed-component-map

Maps a SEED Design component's sources, implementations, exports, docs, and tests from the current checkout.

1.1k|89|Updated Mar 11, 2021
Search Tags:#impact analysis#code navigation#Monorepo#lynx#component mapping#Design system#reAct
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-component-map
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seed-component-map
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-component-map
Command: npx skills add https://github.com/daangn/seed-design --skill seed-component-map

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

In the SEED Design monorepo, a single component is spread across Rootage token definitions, style recipes, headless logic, React and Lynx implementations, package exports, registry entries, docs, examples, and tests. Finding every connected file before making a change is slow and error-prone. This Skill scans the current checkout and returns a deterministic JSON map of every surface tied to one component.

Core Features & Use Cases

  • Component connection map: Given a component name (PascalCase or kebab-case), it locates Rootage sources, recipe sources, generated outputs, headless code, React/Lynx implementations, package export chains, registry entries, docs, examples, and tests.
  • Match state handling: Returns matched, ambiguous, or not-found, and for ambiguous names lists exact candidate components to re-query instead of guessing.
  • Source vs. generated separation: Clearly distinguishes files you edit directly (Rootage, recipes) from generated outputs you must not modify.
  • Use Case: Before changing ProgressCircle, run the script to see its React and Lynx implementations, public export chain, and Storybook stories so you can assess impact and platform parity.

Quick Start

Ask the AI to run the component map for a component, for example: "Map the ProgressCircle component in the SEED Design repo so I can see all its sources and public surfaces."

Frequently Asked Questions about seed-component-map

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find all files related to a component in the SEED Design repo?▼

Run the component map script with Bun, passing one component name in PascalCase or kebab-case, for example `bun skills/seed-component-map/scripts/component-map.ts ProgressCircle`. It returns JSON listing Rootage sources, recipes, implementations, exports, docs, examples, and tests.

How do I check impact before changing a design system component?▼

Query the component map first to see every connected surface, then read the listed paths to confirm responsibilities and public APIs. Exclude generatedOutputs from edits and modify the corresponding Rootage or recipe source instead.

Does the component map support both React and Lynx platforms?▼

Yes, results are split into react and lynx platform buckets, covering packages like react, react-headless, lynx-react, and their docs, registry, and examples. The platforms field lists only platforms where surfaces were actually found.

What happens when a component name matches multiple components?▼

The result state becomes ambiguous and the ambiguities array lists exact candidate names with their paths. Re-run the script with one of the exact candidate names; the tool never guesses a partial match.

Can the component map modify or generate component code?▼

No, it only reads the current checkout and returns paths as JSON. It does not change, generate, or validate code; for implementation work it points to the separate seed-create-component skill's gates and verification steps.

Related Skills

Explore More Software Engineering Skills→
NOMARJNOMARJ
5

scan-repo

Scan repositories for malicious patterns and credential exposures using Sigil CLI.

Official
Intermediate
daangndaangn
1.0k

component-guidelines-docs

Generate Korean-language SEED component guideline docs from Rootage YAML.

Official
Advanced
alexgorbatchevalexgorbatchev
1

react-testing

Automate React component validation with Storybook stories and play functions.

Community
Intermediate
NomaDamasNomaDamas
7.1k

toss-securities

Retrieve TOSS Securities account summaries, portfolios, quotes, orders, and watchlists via tossctl.

Official
Intermediate