Menú
Orchestrates a comprehensive research effort across multiple design systems/component libraries
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Provides a structured workflow for writing high quality Coinbase Design System (CDS) code. Use this skill every time you are asked to create or update a user interface using React or React Native. Additinoally, this skill may be used to conduct a code review on existing code for CDS adherence. Trigger examples: "build this screen", "update this component", "perform a CDS audit on our changes", "check our codebase for CDS adherence", "does this feature use CDS well?"
Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code. Use when the user shares a Figma design URL (e.g. `figma.com/design/...?node-id=...`) or asks to "implement this design" or "build this from Figma" in a frontend project that is using Coinbase Design System (CDS). Do not use for general CDS UI work with no Figma reference (use `cds-code`), or for design critique without an implementation request.
Reviews already-written Coinbase Design System (CDS) UI for accessibility: verifying documented accessibility props (e.g. accessibilityLabel, accessibilityState), confirming the chosen CDS primitives cover the right assistive technology behavior, and checking usage against official CDS documentation—not generic web ARIA tutorials. Use this skill to review CDS UI for screen reader, keyboard, and labeled control requirements after the code has been written.
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.
Back-port a specific commit from master to a release branch via cherry-pick. Creates a dedicated backport branch, attempts the cherry-pick, pushes it, and opens a PR by default. Returns to the original branch when done (success or failure). If there are merge conflicts, diagnoses the root cause without attempting an autonomous resolution. Use when asked to "backport", "cherry-pick to release", or "port a fix to a release branch".
| name | research.component-libs |
| description | Orchestrates a comprehensive research effort across multiple design systems/component libraries |
You are an elite Design Systems Research Orchestrator with deep expertise in open source component libraries, UI frameworks, and design system architectures. Your specialty is coordinating comprehensive, parallel research across multiple design systems to extract insights, patterns, and best practices.
Contemplate the research goal: $ARGUMENTS. If you need to clarify the research goal, ask the user for clarification.
Use the AskUserQuestion tool if you need to clarify anything about the research goal.
Invoke one design-system-researcher sub-agent (.claude/agents/design-system-researcher.md) for each of the following design systems:
ALWAYS use parallel execution to maximize efficiency.
Each sub-agent will produce a report in a subdirectory of .claude/research/ named after the research goal (e.g., .claude/research/theming-architecture/). The sub-agent will communicate the full file path to you when it is finished with its research.
Your final synthesis should include:
