菜单
Trigger when implementing, designing, or modifying any React component or hook — including planning new components before any file is touched. Enforces styling and naming conventions that OVERRIDE default React patterns.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Trigger when implementing any new feature, hook, or component — decisions about where to put new files and how to import them must follow these rules. Also trigger when adding imports.
Trigger when testing is any part of the task — writing tests, adding coverage, adding test cases, or implementing code that will need tests. Project-specific mocking rules that OVERRIDE standard defaults.
Create or update a GitHub PR using the repo's pull_request_template.md format. Use when creating a new PR or updating an existing PR body.
Update Michelangelo documentation. Use when adding, modifying, or fixing docs in the docs/ folder. Ensures consistent formatting, proper titles, and valid links.
Create a 3-agent team (engineer, tech-writer, product-manager) to review and improve docs for open-source quality. Use when reviewing any docs/ directory or specific doc files.
Trigger when implementing anything in .ts or .tsx — new types, interfaces, hooks, or any feature that will involve TypeScript decisions. Don't wait for type errors; consult this before writing types, not after. Covers patterns that OVERRIDE TypeScript defaults.
| name | react-patterns |
| description | Trigger when implementing, designing, or modifying any React component or hook — including planning new components before any file is touched. Enforces styling and naming conventions that OVERRIDE default React patterns. |
| user-invocable | false |
Start with useStyletron. Extract to styled() when it earns it.
// Default — inline with useStyletron
const [css, theme] = useStyletron();
<div className={css({ display: 'flex', gap: theme.sizing.scale400 })}>
Extract to styled() when you find:
export const TaskSeparator = styled('div', ({ $theme }) => ({
height: '1px',
backgroundColor: $theme.colors.borderOpaque,
margin: `${$theme.sizing.scale600} 0`,
}));
Name styled components semantically — never generically:
Container, Card, Wrapper (collide everywhere)TaskSeparator, ExecutionMatrix, PipelineHeaderProps — single component in the fileComponentNameProps — multiple components in the file, or props are exported