UI Components
Code-based UI component generation and styling
brand-style
by screenpipe
"Screenpipe brand style guide. Reference this when designing UI components, writing copy, or making visual decisions."
page-structure
by elie222
Page structure
clerk
by clerk
Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Next.js patterns, organizations, syncing users, or testing. Automatically routes to the specific skill based on their task.
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
livewire-development
by coollabsio
Develops reactive Livewire 3 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
livewire-development
by coollabsio
Develops reactive Livewire 3 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
web-design-guidelines
by openstatusHQ
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
UI/UX Pro Max - Design Intelligence
by zhom
Simple Yet Powerful Anti-Detect Browser 🍩
migrate-oai-app
by modelcontextprotocol
This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK. Provides step-by-step migration guidance with API mapping tables.
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.
gaming-ui-state-management
by TheOrcDev
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
rendering-animate-svg
by TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
retro-css-architecture
by TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.