UI Components
Code-based UI component generation and styling
ui-development
by redpanda-data
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
state-management
by redpanda-data
Manage client and server state with Zustand stores and React Query patterns.
tanstack-router-migration
by redpanda-data
"Migrate React applications from React Router to TanStack Router with file-based routing. Use when user requests: (1) Router migration, (2) TanStack Router setup, (3) File-based routing implementation, (4) React Router replacement, (5) Type-safe routing, or mentions 'migrate router', 'tanstack router', 'file-based routes'."
testing
by redpanda-data
Write and maintain tests with Vitest v4 dual configuration, mock utilities, and Zustand store testing patterns.
Frontend Testing
by exceptionless
Unit and component testing for the frontend with Vitest and Testing Library. Keywords: Vitest, @testing-library/svelte, component tests, vi.mock, render, screen, fireEvent, userEvent, test.ts, spec.ts, describe, it, AAA pattern
.NET Conventions
by exceptionless
C# coding standards for the Exceptionless codebase. Naming conventions, async patterns, structured logging, nullable reference types, and formatting rules. Keywords: C# style, naming conventions, _camelCase, PascalCase, async suffix, CancellationToken, nullable annotations, structured logging, ExceptionlessState
vercel-react-best-practices
by CloudAI-X
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
web-design-guidelines
by CloudAI-X
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
analyzing-projects
by CloudAI-X
Analyzes codebases to understand structure, tech stack, patterns, and conventions. Use when onboarding to a new project, exploring unfamiliar code, or when asked "how does this work?" or "what's the architecture?"
dependency-analyzer
by lis186
Analyze dependencies for upgrade planning and migration. Use when user asks "upgrade to X", "migrate from X to Y", "what breaks if we upgrade", "iOS 17 migration", "React 18 upgrade", or planning framework/SDK upgrades.
team-audio
by Donchitos
"Orchestrate audio team: audio-director + sound-designer + technical-artist + gameplay-programmer for full audio pipeline from direction to implementation."
react-best-practices
by redpanda-data
Client-side React performance optimization patterns.
rerender-functional-setstate
by TheOrcDev
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
shadcn-ui-conventions
by TheOrcDev
UI component conventions for 8-bit styled components. Use when working with shadcn/ui components or implementing retro-styled UI elements.
fumadocs-component-docs
by TheOrcDev
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
registry-component-patterns
by TheOrcDev
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
animation-performance-retro
by TheOrcDev
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
js-tosorted-immutable
by TheOrcDev
Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.
component-wrapper-architecture
by TheOrcDev
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
8bit-docs-patterns
by TheOrcDev
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
rerender-memo
by TheOrcDev
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.
bundle-barrel-imports
by TheOrcDev
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
fumadocs-registry-integration
by TheOrcDev
Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.
rendering-hoist-jsx
by TheOrcDev
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.