Menu
Use when creating new React views in apps/web/src/views/
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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/