david-li0406/meta-skill-evloving/oxygen-component

Claude Code and agent skill by david-li0406/meta-skill-evloving

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.

Install

npx vskill@latest install david-li0406/meta-skill-evloving/oxygen-component

SKILL.md

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>

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/david-li0406/meta-skill-evloving/oxygen-component/badge)](https://verified-skill.com/skills/david-li0406/meta-skill-evloving/oxygen-component)

Something wrong with this skill or its page? Tell us.