coinbase/cds

cds-docs

Retrieve Coinbase Design System (CDS) documentation: setup, installation, theming, tokens, and per-component APIs/examples.

查看源码
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

CDS Documentation Skill

Goal: Pull CDS documentation into the session so your next edits, recommendations, and API usage are grounded in current docs—not to produce a documentation handout for the user.

Treat fetched pages as source material you have read: internalize props, patterns, imports, and setup constraints, then act (code, refactors, answers) from that understanding. Quote or summarize for the user only when it helps. Keep the actual doc page contents to yourself and only share their contents directly to the user if they ask.

Whether you use the CDS MCP server or fetch the pages yourself with curl is an implementation detail. The use does not need to know your methodology unless they indicated they are debugging this skill.

Ambiguous product requests (e.g. “turn this into tabs,” “make it a card”) after you’ve read the index: if several CDS components could be relevant (e.g. underline Tabs vs pill SegmentedTabs vs TabNavigation), it is acceptable and often better to ask one short, concrete question (e.g. which visual pattern matches their spec) while briefly naming the options and how they differ per the docs. Do not pick one arbitrarily just to avoid asking.

1. Choose platform

Decide whether the work targets web (React, @coinbase/cds-web) or mobile (React Native, @coinbase/cds-mobile). If unclear, infer from the repo (e.g. package.json dependencies, apps/* layout) or ask a single clarifying question.

Pass web or mobile to list-cds-routes and when building curl URLs.

2. Tool order (try in sequence)

  1. CDS MCP server (packaged mcp-docs in @coinbase/cds-mcp-server / packages/mcp-server):
  • list-cds-routes with platform: "web" | "mobile".
  • get-cds-doc with route: path including the platform, ending in `.txt` (e.g.

web/getting-started/installation.txt). Paths must come from the index.

  1. curl if MCP is not configured, fails, or returns errors:
  • Index: https://cds.coinbase.com/llms/web/routes.txt or

https://cds.coinbase.com/llms/mobile/routes.txt

  • Page: https://cds.coinbase.com/llms/<route> where <route> matches the index (e.g.

web/getting-started/theming.txt).

Use curl -fsSL '<url>'. Prefer targeted fetches (the pages you need for this task) over loading everything; the index is for routing, not for echoing back wholesale.

3. Workflow whenever this skill applies

  1. Resolve platform (web or mobile).
  2. Load the index once per platform focus (list-cds-routes or routes.txt) and use it as the

canonical map of .txt paths.

  1. Fetch additional pages only as needed for the work ahead; after each fetch, apply what

you learned (imports, props, patterns)—do not stop at regurgitating the file.

4. Practical notes

  • Routes are case-sensitive; doc content is `.txt` from MCP or HTTP.
  • Web and mobile docs differ; confirm the component or topic exists for that platform’s index.
  • Human-readable URLs inside the .txt files are optional to share with the user; your priority is

correct implementation, not reproducing the doc site in the reply.

5. What “done” looks like

  • Platform is correct or explicitly chosen.
  • Index informed which pages you pulled.
  • User-facing output is implementation-focused (components, imports, structure); retrieval steps

stay implicit unless the user needs them.

  • If multiple components fit, you either ground the choice in doc differences or **ask one

clarifying question** when the product spec is under-specified.

  • Your actions and explanations reflect fetched CDS details (APIs, setup, tokens)—especially

where memory would be risky—not a dump of documentation for its own sake.

来自同一仓库

更多 Skills

全部 Skills
coinbase
官方

cds-code

Provides a workflow for building and reviewing high-quality React and React Native UI with the Coinbase Design System (CDS). Use this skill to create UI or make visual changes to existing UI with CDS components, tokens, style props, icons, and illustrations. Use it for explicit CDS-adherence audits and reviews, not non-visual logic, data, analytics, navigation, tests, generated code, or refactoring. Examples: "build this screen", "fix spacing on this component", "replace this UI with CDS components", "perform a CDS audit on our changes", "check our codebase for CDS adherence", "does this feature use CDS well?"

安装量
1
GitHub Stars
500
最近更新
9月3日
coinbase
官方

components.styles

Guidelines writing styles API (styles, classNames, and static classNames) for a CDS component. Use this skill when adding customization options to a React component via styles or classNames props or when needing to update the docsite with component styles documentation.

安装量
1
GitHub Stars
500
最近更新
9月3日
coinbase
官方

dev.cds-mobile

USE THIS when asked to work on a new or existing (MOBILE) CDS React component in packages/mobile

安装量
1
GitHub Stars
500
最近更新
9月3日
coinbase
官方

eslint-plugin-custom-rule

USE THIS when asked to create a new eslint plugin rule for the eslint-plugin-cds package

安装量
1
GitHub Stars
500
最近更新
9月3日