القائمة
Use when creating new React views in apps/web/src/views/
التثبيت باستخدام 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 | react-view-builder |
| description | Use when creating new React views in apps/web/src/views/ |
apps/web/src/views/{Name}View.tsxapps/web/src/App.tsxapps/web/src/lib/api.tsapps/web/src/__tests__/{Name}View.test.tsximport { useState, useEffect } from 'react';
import { useAuth } from '../hooks/useAuth';
import { api } from '../lib/api';
export function MyView() {
const { user } = useAuth();
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
api.get('/api/v1/endpoint')
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, []);
if (loading) return <SkeletonCard />;
if (error) return <ErrorState onRetry={...} />;
if (!data?.length) return <EmptyState />;
return <div>{/* content */}</div>;
}
SkeletonCard componentuseAuth().user before renderingapps/web/src/views/HomeView.tsxapps/web/src/lib/api.tsapps/web/src/hooks/useAuth.tsapps/web/src/components/