oxygen-component
Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.
ソース情報
- リポジトリ
- wso2/reference-implementation-openhie
- ソースの最終更新活動
- 2026年5月7日 05:12
- 検出された SKILL.md の言語
- 英語
- スター
- 2
- フォーク
- 4
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- oxygen-component
- description
- Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.
# Generate Oxygen UI Component
## Instructions
1. Read `.claude/oxygen-ui/CLAUDE.md` for critical rules
2. Read `.claude/oxygen-ui/components.md` for API reference
3. Generate component using Oxygen UI patterns
## Critical Rules
- Import ALL components from `@wso2/oxygen-ui` (never from `@mui/material`)
- Import icons from `@wso2/oxygen-ui-icons-react`
- Use theme tokens via `sx` prop (e.g., `p: 2`, `bgcolor: 'background.paper'`)
- Never hardcode colors or spacing values
- For data tables, prefer `ListingTable` over MUI's `Table`
- For layouts, use `AppShell`, `Header`, `Sidebar`
## Component Template
```tsx
import { Box, Typography, Button } from '@wso2/oxygen-ui';
import { IconName } from '@wso2/oxygen-ui-icons-react';
interface MyComponentProps {
// Define props
}
function MyComponent({ ...props }: MyComponentProps) {
return (
<Box sx={{ p: 2, bgcolor: 'background.paper' }}>
{/* Component content */}
</Box>
);
}
export default MyComponent;
```
## Common Patterns
### Data Table Component
```tsx
import { ListingTable, Chip, IconButton } from '@wso2/oxygen-ui';
import { EditIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';
<ListingTable.Container>
<ListingTable.Toolbar showSearch actions={<Button>Add Item</Button>} />
<ListingTable variant="card">
<ListingTable.Head>
<ListingTable.Row>
<ListingTable.Cell>Name</ListingTable.Cell>
<ListingTable.Cell>Status</ListingTable.Cell>
<ListingTable.Cell align="right">Actions</ListingTable.Cell>
</ListingTable.Row>
</ListingTable.Head>
<ListingTable.Body>
{data.map((item) => (
<ListingTable.Row key={item.id}>
<ListingTable.Cell>{item.name}</ListingTable.Cell>
<ListingTable.Cell>
<Chip label={item.status} color="success" size="small" />
</ListingTable.Cell>
<ListingTable.Cell align="right">
<IconButton size="small"><EditIcon size={18} /></IconButton>
<IconButton size="small" color="error"><TrashIcon size={18} /></IconButton>
</ListingTable.Cell>
</ListingTable.Row>
))}
</ListingTable.Body>
</ListingTable>
</ListingTable.Container>
```
### Card Component
```tsx
import { Paper, Typography, Box, Button } from '@wso2/oxygen-ui';
<Paper sx={{ p: 3 }}>
<Typography variant="h6" gutterBottom>Card Title</Typography>
<Typography color="text.secondary" sx={{ mb: 2 }}>
Card description text
</Typography>
<Box sx={{ display: 'flex', gap: 1 }}>
<Button variant="contained">Primary</Button>
<Button variant="outlined">Secondary</Button>
</Box>
</Paper>
```
### Dialog Component
```tsx
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
} from '@wso2/oxygen-ui';
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>Dialog Title</DialogTitle>
<DialogContent>
<DialogContentText>Dialog content goes here.</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<Button variant="contained" onClick={onConfirm}>Confirm</Button>
</DialogActions>
</Dialog>
```
## MUI X Components (Use Namespaces)
```tsx
import { DataGrid, Charts, DatePickers, TreeView } from '@wso2/oxygen-ui';
// DataGrid
<DataGrid.DataGrid rows={rows} columns={columns} />
// Charts
<Charts.LineChart series={series} />
<Charts.BarChart series={series} />
<Charts.PieChart series={series} />
// DatePickers
<DatePickers.DatePicker value={date} onChange={setDate} />
// TreeView
<TreeView.SimpleTreeView>
<TreeView.TreeItem itemId="1" label="Item 1" />
</TreeView.SimpleTreeView>
```
GitHubで見る