jovivaspo
13 verified skills
skills/shadcn
--- name: shadcn/ui description: Complete guide con contexto de uso license: MIT metadata: author: next-agent-template version: "1.0" scope: [root, ui, components] auto_invoke: - "Adding shadcn components" - "Working with shadcn/ui" - "Creating shadcn components" - "Styling components with Tailwind" - "Setting up component themes" - "Composing UI layouts" - "Fixing component styling" - "Customizing component variants" - "shadcn init" - "create an app with --preset"
documentation
supabase
Supabase integration patterns - Auth, RLS, Client configuration. Trigger: When working with Supabase (Auth, Database, Storage, Realtime) in Next.js. Use alongside drizzle skill for database operations. Client files go in: app/lib/supabase/
tools
tdd
Test-Driven Development workflow using Vitest + React Testing Library. Trigger: ALWAYS when implementing features, fixing bugs, or refactoring in Next.js. This is a MANDATORY workflow for all TypeScript/React code.
development
commit
Creates professional git commits following conventional-commits format. Trigger: When creating commits, after completing code changes, when user asks to commit.
development
zod-4
Zod 4 schema validation patterns. Trigger: When creating or updating Zod v4 schemas for validation/parsing (forms, request payloads, adapters), including v3 -> v4 migration patterns.
databases
tailwind-4
Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).
development
react-19
React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-16.
development
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
development
drizzle
Drizzle ORM patterns and best practices. Trigger: When working with database schemas, queries, or migrations using Drizzle. Works with PostgreSQL, MySQL, SQLite, and cloud providers like Supabase, Neon. Schema files go in: app/lib/drizzle/
development
cloudinary
Cloudinary image upload and transformation patterns. Trigger: When working with image uploads, storage, or transformations using Cloudinary. Use for user avatars, product images, content media in Next.js apps. Client files go in: app/lib/cloudinary/
tools
typescript
TypeScript strict patterns and best practices. Trigger: When implementing or refactoring TypeScript in .ts/.tsx (types, interfaces, generics, const maps, type guards, removing any, tightening unknown).
development
zustand-5
Zustand 5 state management patterns. Trigger: When implementing client-side state with Zustand (stores, selectors, persist middleware, slices).
tools
playwright
Playwright E2E testing patterns. Trigger: When writing Playwright E2E tests (Page Object Model, selectors, MCP exploration workflow). For Prowler-specific UI conventions under ui/tests, also use prowler-test-ui.
tools