メニュー
Guidelines for using the Commonplace Design System in React components
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/jakewaldrip/.dotfiles --skill react-component-library-usageコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
How to use and add DataLoaders in the Commons backend. Use when implementing batched lookups, adding a new loader, wiring field resolvers to loaders, or avoiding N+1 via request-scoped batching and caching.
Use the GitHub CLI (gh) for PRs, repos, search, releases, and API access from the terminal. Use when attempting to get information about other repos or about PRs in this repo.
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.
SKILL.md を表示中
SOC 職業分類に基づく
| name | react-component-library-usage |
| description | Guidelines for using the Commonplace Design System in React components |
This project uses the Commonplace Design System, Cityblock's comprehensive library of consistent, accessible, and well-tested components.
commons-packages/commonplace/@cityblock/commonplacecommonplace.ts and associated .stories.tsx files// 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>
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);
}