components.best-practices
React Component Development Rules
Component Development Workflow
- Research similar reference components and given requirements/description
- Optionally, ask clarifying questions about the component's requirements & behavior
- Implement the component with unit tests & stories on web first before proceeding to mobile if both platforms were requested.
- Never write figma code connect files unless explicitly instructed to do so.
- Follow remaining general coding standards and guidelines you've been given.
Reference Components
These high quality components demonstrate proper use of patterns/conventions:
- Select (alpha/): generics, controlled/uncontrolled, compound architecture
- Stepper: props-based defaults, metadata generics, compound components
- Carousel (web): compound components, imperative handle, context + hook
- RollingNumber: animation config extraction, measurement patterns
- SlideButton (mobile): gesture handling, spring animations, accessibility actions
More from coinbase/cds
cds-code
|
10cds-docs
|
6feature-planner
A guided workflow for non-technical contributors (designers, PMs) to describe a feature idea and produce a detailed technical implementation plan for an engineer. Invoke manually with /feature-planner.
3ktlo
Instructions to fetch assigned Linear issues in the current cycle and potentially kick off a development session.
2dev.cds-mobile
USE THIS when asked to work on a new or existing (MOBILE) CDS React component in packages/mobile
2git.repo-manager
Instructions to manage a local cache of GitHub repositories. This would typically done in cases where the user want to perform research/analysis on a repository. Invoke whenever you need to clone a repo that isn't present locally, bring an existing clone up to date, or remove a repo from the cache. This skill handles only the mechanical filesystem/git operations — not research, analysis, or anything about the repo's contents.
2