Agent Skills › elie222/inbox-zero › ui-components

ui-components

GitHub

提供基于 Shadcn UI、Radix UI 和 Tailwind CSS 的 UI 组件与样式规范。涵盖响应式设计、组件安装、SWR 数据获取及表单处理，指导前端界面开发。

.claude/skills/ui-components/SKILL.md elie222/inbox-zero

Trigger Scenarios

需要构建或优化用户界面询问前端组件库使用指南实现响应式布局或样式

Install

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

More Options

Non-standard path

npx skills add https://github.com/elie222/inbox-zero/tree/main/.claude/skills/ui-components -g -y

Use without installing

npx skills use elie222/inbox-zero@ui-components

指定 Agent (Claude Code)

npx skills add elie222/inbox-zero --skill ui-components -a claude-code -g -y

安装 repo 全部 skill

npx skills add elie222/inbox-zero --all -g -y

预览 repo 内 skill

npx skills add elie222/inbox-zero --list

SKILL.md

Frontmatter

{
    "name": "ui-components",
    "description": "UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind"
}

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 = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
  `/api/user/planned/history?page=${page}`
);

Loading Components

Use the LoadingContent component to handle loading states:

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

Form Components

Text Inputs

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

Text Area

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