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

code-review

Review CDS React component code for structure, type safety, styling, accessibility, and testing coverage.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured checklist to ensure that changes made to CDS React components adhere to established standards for structure, type safety, styling, accessibility, and testing.

Core Features & Use Cases

  • Component Structure Validation: Checks if the file organization within a component follows best practices.
  • Type Safety Enforcement: Verifies prop typing, backward compatibility, and identifies breaking changes.
  • Styling Guidelines: Ensures adherence to theme tokens and CSS variable usage.
  • Accessibility Checks: Promotes best practices for platform accessibility.
  • Testing and Story Coverage: Confirms the presence and quality of Jest tests and Storybook examples.
  • Use Case: A developer can use this Skill to get automated feedback on a new or modified React component before submitting it for a human code review, ensuring it meets all predefined quality gates.

Quick Start

Review the attached React component code for adherence to CDS standards.

Frequently Asked Questions about code-review

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

FAQPage Schema
How do I review React component code for adherence to design system standards?▼

Reviewing React component code for design system standards involves validating file structure, prop typing, backward compatibility, theme token styling, and accessibility. This process ensures components meet established quality gates before human code review.

What does a React component code review check for type safety and backward compatibility?▼

A React component code review for type safety verifies prop typing and identifies breaking changes to maintain backward compatibility. This ensures component APIs remain stable and predictable during development and maintenance.

How do I validate React component styling guidelines and theme tokens?▼

Validating React component styling guidelines checks adherence to design system theme tokens and CSS variable usage. This ensures consistent visual presentation and proper styling practices across the component library.

Can I use this to check React component accessibility and testing coverage?▼

Yes, you can check React component accessibility and testing coverage by verifying platform accessibility best practices, confirming Jest tests are present, and validating Storybook examples for comprehensive component documentation.

Does this code review skill work with any React design system or only Coinbase CDS?▼

This code review skill is specifically tailored for the Coinbase Design System (CDS) React components. It applies predefined rules for structure, type safety, styling, and accessibility unique to the CDS development workflow.

When do I need to run a React component code review against CDS standards?▼

You need to run a React component code review against CDS standards when developing new components or modifying existing ones. This ensures changes adhere to established structure, type safety, styling, accessibility, and testing requirements before submission.

Related Skills

Explore More Software Engineering Skills→
mkusakamkusaka
7

design-sync-storybook-source-shape

Synchronize and validate Storybook source shapes for React components.

Community
Advanced
musher-devmusher-dev

shaping-reviewing-test-strategy

Generate a test strategy review evaluating scenario coverage, test types, and edge cases.

Official
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate