From fairmind-integration
Use when implementing frontend features with React, NextJS, TypeScript, Tailwind CSS, or Shadcn UI. This skill provides patterns, conventions, and best practices for modern React development including component architecture, state management with Zustand, and responsive design.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fairmind-integration:frontend-react-nextjsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides guidance for frontend development using the React/NextJS/TypeScript stack with Tailwind CSS and Shadcn UI components.
This skill provides guidance for frontend development using the React/NextJS/TypeScript stack with Tailwind CSS and Shadcn UI components.
Announce at start: "I'm using the frontend-react-nextjs skill for this frontend implementation."
Use this skill when:
Before writing any code:
Follow this order:
For detailed patterns and examples, load the appropriate reference file:
| File | Content | When to Use |
|---|---|---|
references/react-patterns.md | Component patterns, hooks, composition | Building any React component |
references/nextjs-conventions.md | App router, server components, routing | NextJS-specific features |
references/typescript-guidelines.md | Type patterns, interfaces, generics | Type definitions, complex types |
references/tailwind-shadcn.md | UI components, styling patterns | Styling and UI components |
references/zustand-state.md | State management patterns | Global or complex state |
React.memo for expensive rendersWhen working on Fairmind tasks:
fairmind-context skill to gather requirements firstIf design requirements are unclear:
If API contracts are missing:
// Example: Creating a user profile component
// 1. Define types
interface UserProfileProps {
userId: string;
onUpdate?: (user: User) => void;
}
// 2. Create component with proper patterns
export function UserProfile({ userId, onUpdate }: UserProfileProps) {
// 3. Use appropriate hooks
const { user, isLoading } = useUser(userId);
// 4. Handle states
if (isLoading) return <ProfileSkeleton />;
if (!user) return <NotFound />;
// 5. Render with Tailwind + Shadcn
return (
<Card className="p-6">
<Avatar src={user.avatar} fallback={user.initials} />
<h2 className="text-lg font-semibold">{user.name}</h2>
{/* ... */}
</Card>
);
}
After completing frontend implementation:
fairmind-tdd skill for component testingnpx claudepluginhub fairmind-gen-ai-studio/fairmind-integration --plugin fairmind-integrationProvides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.