Agent skill
react-component-library-usage
Guidelines for using the Commonplace Design System in React components
Install this agent skill to your Project
npx add-skill https://github.com/jakewaldrip/.dotfiles/tree/main/misc/commons/.opencode/skills/react-component-library-usage
SKILL.md
Overview
This project uses the Commonplace Design System, Cityblock's comprehensive library of consistent, accessible, and well-tested components.
- Located at:
commons-packages/commonplace/ - Import from:
@cityblock/commonplace - Documentation: https://commonplace.design
- Before building anything new, check
commonplace.tsand associated.stories.tsxfiles
Usage Examples
// Good - Using Commonplace components with slots
import { Card, VerticalStack, Text, Row, Tag, Button } from '$commons/app/shared/commonplace';
<Card
title="Patient information"
actions={<Button text="Edit" />}
leftContent={<Tag text="Active" />}
titleRowContent={<Tag text="High priority" />}
>
<VerticalStack gap="medium">
<Text element="p" text="Patient details content" />
<Text element="p" text="Event description" />
</VerticalStack>
</Card>
// Avoid - Custom styling, custom classes
<div style={{ padding: '16px', backgroundColor: '#f5f5f5' }}>
<h2 style={{ fontSize: '18px' }}>Title</h2>
<p class="mt-6">Content</p>
</div>
Guidelines
- Use Commonplace components over raw HTML or custom elements
- Customization priority: Props → Slots → className → Wrappers → Never direct CSS
- Don't edit component source - customize through usage only
- When components don't exist: Search thoroughly, try composition, then propose new component
Custom CSS
Only add custom CSS if the Commonplace component doesn't provide a prop to achieve the desired styling. Use existing CSS variables instead of custom px, em, rem, or hex values. For example:
// component.tsx
import { Text } from '$commons/app/shared/commonplace';
import styles from './css/component.css'
<Text element="p" text="Item details" className={styles.details} />
// component.css
.details {
color: var(--color-text-light);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jakewaldrip/.dotfiles
react-component-writing
React component patterns and style guide for the Commons monorepo. Use when creating React components, working with GraphQL in components, or implementing internationalization with MessageFormat.
jakewaldrip/.dotfiles
graphite-cli
Use Graphite CLI (gt) for stacked PRs and branch management. Use when creating branches, committing changes, submitting PRs, syncing with trunk, or managing stacked pull requests.
jakewaldrip/.dotfiles
test-running
Run Jest tests in the Commons monorepo. Use when testing code changes, validating implementations, debugging test failures, or when the user mentions running tests.
jakewaldrip/.dotfiles
document-type-adding
Add new document types to the DocuSign integration in the Commons monorepo. Use when the user wants to add a patient document, consent form, or agreement to the DocuSign workflow.
jakewaldrip/.dotfiles
dataloader-dual-mode-migration
Migrate dataloaders to dual-mode pattern supporting both patientId and enrollmentId for Member Model 2.0. Use when converting a patient-based dataloader to support the MemberModelV2Switch.
jakewaldrip/.dotfiles
feature-flag-create-or-remove
Create or remove feature flags in the Commons application. Use when the user wants to add a new feature flag, delete a feature flag, or asks about feature flag naming conventions.
Didn't find tool you were looking for?