ui-components

OverviewHistoryStatsSecurity

npx skills add ...

Documentation

SKILL.md

UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind

npx skills add elie222/inbox-zero --skill ui-components

Documentation

SKILL.mdView source

UI Components and Styling

UI Framework

Use Shadcn UI and Tailwind for components and styling
Implement responsive design with Tailwind CSS using a mobile-first approach
Use next/image package for images

Install new Shadcn components

pnpm dlx shadcn@latest add COMPONENT

Example:

pnpm dlx shadcn@latest add progress

Data Fetching with SWR

For API get requests to server use the swr package:

const searchParams

Loading Components

Use the LoadingContent component to handle loading states:

Form Components

Text Inputs

Text Area

npx skills add elie222/inbox-zero --skill ui-components

Documentation

SKILL.md

ui-components skill by elie222 | SkillBundle

<Card>
  <LoadingContent loading={isLoading} error={error}>
    {data && <MyComponent data={data} />}
  </LoadingContent>
</Card>

<Input
  type="email"
  name="email"
  label="Email"
  registerProps={register("email", { required: true })}
  error={errors.email}
/>

<Input
  type="text"
  autosizeTextarea
  rows={3}
  name="message"
  placeholder="Paste in email content"
  registerProps={register("message", { required: true })}
  error={errors.message}
/>