Expert guidance for building and maintaining the Mosaic LifeTech healthcare AI governance website using React, TypeScript, Vite, and Tailwind CSS
Guide for working with the Mosaic LifeTech healthcare AI governance consulting website - a React + TypeScript + Vite + Tailwind CSS application targeting healthcare executives.
**Target Audience:** Healthcare C-suite executives, board members, and compliance/quality leaders seeking defensible AI governance frameworks.
**Tech Stack:**
The site follows a standard React SPA structure:
```
src/
├── App.tsx # Root component with routing config
├── main.tsx # Application entry point
├── components/
│ ├── layout/ # Header, Footer, Layout wrapper
│ ├── ui/ # shadcn/ui base components
│ └── NavLink.tsx # Navigation helper component
├── pages/ # Route page components
│ ├── Index.tsx # Homepage
│ ├── WhatWeDo.tsx
│ ├── WhoWeHelp.tsx
│ ├── OurApproach.tsx
│ ├── About.tsx
│ ├── Contact.tsx
│ └── NotFound.tsx
├── hooks/ # Custom React hooks
└── lib/
└── utils.ts # Utility functions (cn() class merger)
```
```bash
npm run dev
npm run lint
npm run build
npm run build:dev
npm run preview
```
Always use `@/` alias for imports from `src/`:
```tsx
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Layout } from "@/components/layout/Layout";
```
**Color System** (CSS custom properties via HSL):
**Custom Utility Classes:**
**Button Variants** (beyond shadcn defaults):
**Primary Typeface:** Inter font family
**Icon Library:** `lucide-react`
All pages should follow this structure:
```tsx
import { Layout } from "@/components/layout/Layout";
const PageName = () => {
return (
<Layout>
<section className="section-padding">
<div className="container-narrow">
{/* Page content here */}
</div>
</section>
</Layout>
);
};
export default PageName;
```
For repeated card patterns, define local components within pages:
```tsx
interface CardProps {
icon: React.ReactNode;
title: string;
description: string;
}
function FeatureCard({ icon, title, description }: CardProps) {
return (
<div className="bg-card rounded-lg p-8 shadow-card border border-border/50">
<div className="mb-4">{icon}</div>
<h3 className="text-xl font-semibold mb-2">{title}</h3>
<p className="text-muted-foreground">{description}</p>
</div>
);
}
```
When adding a new page:
1. **Create the page component** in `src/pages/NewPage.tsx`
2. **Add route in `src/App.tsx`** (above the catch-all `*` route):
```tsx
<Route path="/new-page" element={<NewPage />} />
```
3. **Update navigation** in `src/components/layout/Header.tsx`:
```tsx
<NavLink to="/new-page">New Page</NavLink>
```
The site uses `lovable-tagger` plugin (development only) for component tracking and debugging.
Use React Hook Form + Zod for form validation:
```tsx
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
const formSchema = z.object({
email: z.string().email(),
name: z.string().min(2),
});
const MyForm = () => {
const form = useForm({
resolver: zodResolver(formSchema),
});
// ...
};
```
Use TanStack React Query for server state:
```tsx
import { useQuery } from "@tanstack/react-query";
const { data, isLoading, error } = useQuery({
queryKey: ['key'],
queryFn: fetchFunction,
});
```
1. **Maintain consistent spacing** using `section-padding` and `container-narrow`
2. **Use design system tokens** instead of arbitrary values
3. **Keep page components clean** by extracting repeated patterns into local components
4. **Follow TypeScript strict mode** - define proper types and interfaces
5. **Leverage shadcn/ui components** before building custom UI elements
6. **Use semantic HTML** for accessibility
7. **Apply animations thoughtfully** with `animate-fade-in` and staggered delays
**Adding a new shadcn/ui component:**
```bash
npx shadcn-ui@latest add [component-name]
```
**Merging Tailwind classes conditionally:**
```tsx
import { cn } from "@/lib/utils";
<div className={cn("base-class", condition && "conditional-class")} />
```
**Creating responsive layouts:**
```tsx
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Cards */}
</div>
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-healthcare-site-development/raw