メニュー
Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when the user wants to draft, scope, or formalize a feature for shipcode — "write a PRD for X", "let's plan X", "scope this out", "what should X do", or when a GitHub issue body needs to be fleshed out before the pipeline plans it. Writes a PRD that maps cleanly onto shipcode's pipeline (objective / acceptanceCriteria / outOfScope / estimatedComplexity) so the planner agent can consume it without re-elicitation. Do NOT use for code edits, debugging, or PR reviews.
Expert in web accessibility (WCAG 2.1 AA compliance) for React/Next.js applications, ensuring all projects are usable by everyone
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
Validate Biome 2.3+ configuration and detect outdated patterns. Ensures proper schema version, domains, assists, and recommended rules. Use before any linting work or when auditing existing projects.
Validate Bun workspace configuration and detect common monorepo issues. Ensures proper workspace setup, dependency catalogs, isolated installs, and Bun 1.3+ best practices.
Comprehensive code review focusing on quality, security, performance, and testing. Use when user says 'review', 'code review', 'check my code', or before merging PRs.
| name | component-library |
| description | Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects |
| metadata | {"version":"1.0.0","tags":"react, nextjs, components, design-system, typescript, performance, patterns"} |
Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components.
Use when you're:
Button.tsx)ComponentNameProps interfaceuse- prefix (use-auth.ts)'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }
React.memo for pure componentsuseMemo / useCallback for expensive operationslazy + Suspense for code splittingreact-window for virtualizationbutton, nav, not div)