skills.rest
coinbase
coinbaseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

development-cds-web

Develop and maintain web-based React components for the Coinbase Design System.

493|101|Updated Nov 8, 2024
Search Tags:#accessibility#web development#react#design system#css#component development
One-click install
npx skills add https://github.com/coinbase/cds --skill development-cds-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: development-cds-web
Source: https://github.com/coinbase/cds/tree/main/.claude/skills/development-cds-web
Command: npx skills add https://github.com/coinbase/cds --skill development-cds-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidelines and best practices for developing new or modifying existing web-based React components within the Coinbase Design System (CDS).

Core Features & Use Cases

  • Styling with Linaria: Enforces the use of Linaria for zero-runtime CSS, emphasizing the use of CDS theme CSS variables for consistency.
  • Responsive Design: Details how to implement responsive styles using breakpoint values and the Box component's responsive prop API.
  • Accessibility: Outlines essential accessibility considerations, including ARIA attributes, keyboard navigation, and WCAG compliance.
  • Use Case: A developer needs to create a new button component for the CDS web application, ensuring it adheres to all styling, theming, and accessibility standards.

Quick Start

Follow the guidelines in this skill to create a new CDS React component for the web.

Frequently Asked Questions about development-cds-web

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

FAQPage Schema
How do I style React components with Linaria in a design system?▼

Implement responsive design in React components by applying breakpoint values and leveraging the Box component's responsive prop API to adjust layouts across different screen sizes. This method ensures consistent adaptive behavior within the design system.

What is the best way to handle accessibility in React design system components?▼

Handling accessibility in React design system components involves implementing ARIA attributes, ensuring full keyboard navigation, and adhering to WCAG compliance standards. These practices guarantee components are usable by everyone.

Can I use Framer Motion for animations in React web components?▼

Yes, you can use Framer Motion for animations in React web components. It provides the techniques needed to create smooth, accessible motion within the Coinbase Design System without relying on external animation libraries.

How do I create a new React component that adheres to web-specific prop conventions?▼

To create a React component with proper web-specific prop conventions, follow the specific component reference patterns detailed in the CDS guidelines. This ensures your component integrates seamlessly with existing design system architecture.

Does this React component development guide support zero-runtime CSS?▼

Yes, this React component development guide supports zero-runtime CSS by enforcing Linaria. It emphasizes using CDS theme CSS variables to achieve consistent styling without runtime performance overhead.

Related Skills

Explore More Software Engineering Skills→
daveiodaveio

tailwind-theme-builder

Configure Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

Community
Advanced
hschnehschne
1

design-review

Critique web interfaces against design briefs and WCAG standards.

Community
Advanced
melvinv007melvinv007

classey-ui

Implement consistent Classey UI/UX with CSS variables, glassmorphism, and Framer Motion.

Community
Advanced
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced