elie222/inbox-zero94 installs
ui-components
UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind
How do I install this agent skill?
npx skills add https://github.com/elie222/inbox-zero --skill ui-componentsIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides standard documentation and code snippets for UI development using Shadcn UI, Radix UI, and Tailwind. No security risks or malicious patterns were detected.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
1/1 file flagged
What does this agent skill do?
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/imagepackage 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}
/>
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/elie222/inbox-zero/ui-components">View ui-components on skillZs</a>