القائمة
Use when building shared React components in libs/ui/ or apps/web/src/components/
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Record browser-based feature demos as GIFs via Playwright and optionally document them in docs/features/index.md. Trigger with "Demo <feature>" or "Demo and Document <feature>".
Use when creating service modules in apps/api/skillhub/services/
Use when writing API tests in apps/api/tests/
Use when implementing division-based access control on any endpoint
Use when adding services to docker-compose.yml or creating Dockerfiles
Use when implementing error handling across the API, frontend, or MCP server
| name | component-library-builder |
| description | Use when building shared React components in libs/ui/ or apps/web/src/components/ |
// apps/web/src/components/MyComponent.tsx
interface MyComponentProps {
title: string;
variant?: 'default' | 'featured';
onClick?: () => void;
}
export function MyComponent({ title, variant = 'default', onClick }: MyComponentProps) {
return (
<div className={`my-component my-component--${variant}`} onClick={onClick}>
<h3>{title}</h3>
</div>
);
}
| Component | File | Purpose |
|---|---|---|
| SkillCard | components/SkillCard.tsx | Grid card for skill listings |
| Nav | components/Nav.tsx | Top navigation bar |
| DivisionChip | components/DivisionChip.tsx | Division badge/pill |
| SkeletonCard | components/SkeletonCard.tsx | Loading placeholder |
| AuthModal | components/AuthModal.tsx | Login/signup modal |
Shared components will move to libs/ui/src/ and export via @skillhub/ui. Currently components live in apps/web/src/components/.
apps/web/src/components/libs/ui/design/tokens.json