メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Azure-Samples/art-voice-agent-accelerator --skill add-componentコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | add-component |
| description | Add a new React component with Material UI |
Add React components to apps/artagent/frontend/src/components/.
/**
* ComponentName
* Brief description of what this component does.
*/
import { memo, useCallback, useState } from 'react';
import { Box, Typography, Button } from '@mui/material';
// ═══════════════════════════════════════════════════════════════════════════════
// COMPONENT
// ═══════════════════════════════════════════════════════════════════════════════
const ComponentName = memo(function ComponentName({ prop1, prop2, onAction }) {
const [state, setState] = useState(null);
const handleAction = useCallback(() => {
onAction?.(state);
}, [onAction, state]);
return (
<Box
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Typography variant="h6">{prop1}</Typography>
<Button onClick={handleAction} variant="contained">
Action
</Button>
</Box>
);
});
export default ComponentName;
src/components/ComponentName.jsxmemo() for performance optimizationuseCallback() for event handlerssx prop for styling with theme valuessx Prop// Theme spacing: p: 2 = 16px (8px * 2)
<Box
sx={{
p: 2,
mt: 1,
bgcolor: 'background.paper',
borderRadius: 1,
display: 'flex',
gap: 2,
}}
/>
// Responsive values
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
/>
// Layout
import { Box, Stack, Container, Grid } from '@mui/material';
// Inputs
import { TextField, Button, IconButton } from '@mui/material';
// Display
import { Typography, List, Chip, Avatar } from '@mui/material';
// Feedback
import { Dialog, Snackbar, Alert, CircularProgress } from '@mui/material';
// Icons
import { Send, Mic, Settings, Close } from '@mui/icons-material';
// Always add aria-label to icon buttons
<IconButton aria-label="Send message" onClick={handleSend}>
<SendIcon />
</IconButton>
// Use semantic HTML via component prop
<Typography component="h1" variant="h4">
Page Title
</Typography>
// Destructure with defaults
const Component = ({
title = 'Default',
isLoading = false,
onSubmit,
children,
}) => { ... };
For complex logic, create custom hook in hooks/:
// hooks/useComponentLogic.js
export const useComponentLogic = (initialValue) => {
const [value, setValue] = useState(initialValue);
const handleChange = useCallback((newValue) => {
setValue(newValue);
}, []);
return { value, handleChange };
};