القائمة
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)