Standardize TimeKast Starter Kit UI with reusable table, form, dialog, and navigation primitives.
npx skills add https://github.com/TimeKast/AgendaInteligente --skill sk-ui
Please help me install this Agent Skill. Skill: sk-ui Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/sk-ui Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill sk-ui
The sk-ui skill prevents UI inconsistencies and slow rework by standardizing the TimeKast Starter Kit’s ready-to-use UI building blocks (tables, forms, dialogs, navigation shells, and common interaction patterns) so teams don’t rediscover patterns project-to-project.
DataTable for common searchable + paginated tables, or switch to Table with useTableState / useServerTableState for custom toolbars and URL-synced, server-driven filtering.@/components/form and submit through the kit’s server-action workflow with fewer wiring mistakes.StatusToggle, ConfirmDialog, and BreadcrumbSetter to keep destructive actions safe, labels human-friendly, and dynamic routes breadcrumb-correct.DashboardShell, BottomNav, and BottomNavMoreSheet to get protected-page structure and mobile navigation behavior aligned with the kit.ConfirmDialog over raw confirm patterns, use the kit’s wrappers around popovers/tooling decisions, and display EmptyState and human IDs reliably.Use the sk-ui skill when you are about to build a new catalog page or settings screen in the TimeKast Starter Kit, and ask for the correct component (table/form/dialog/layout) plus the recommended usage pattern for the exact UI you need.
High-intent search queries and answers about installing and using this skill.
To build a searchable and paginated data table in Next.js, use a standardized DataTable component or combine Table with useTableState hooks for custom toolbars and URL-synced, server-driven filtering.
Zod-validated forms in a Next.js starter kit are best handled using kit-specific form components submitted through server actions, reducing wiring mistakes compared to using raw shadcn forms.
To manage destructive actions and status toggles in a CRUD UI, use standardized ConfirmDialog components for safe confirmations and StatusToggle wrappers for consistent user experience.
You should not edit standard shadcn UI primitives directly when building new screens. Instead, use the starter kit's wrapper components and conventions to prevent UI inconsistencies and repeated wiring.
To set up mobile navigation and protected page layouts in Next.js, use layout shells like DashboardShell for structure and BottomNav with BottomNavMoreSheet for aligned mobile navigation behavior.
Dynamic route breadcrumbs show incorrectly when not wired through the proper navigation hooks. Using BreadcrumbSetter ensures dynamic routes maintain correct breadcrumb navigation aligned with kit conventions.
BumpyClockInstall and configure shadcn/ui across Next.js, Vite, Remix, and Astro.
fgarofalo56Execute SQL Server queries and manage schemas via natural language.
ultramaxoAIEnforce end-to-end type safety for frontend-backend API contracts with Zod and TypeScript.
MajesteitBartBuild accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.