TheOrcDev/8bitcn-ui

8-bit-pixel-art-patterns

Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.

Idioma del texto original: inglés

8bit-docs-patterns

Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.

Idioma del texto original: inglés

animation-performance-retro

Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.

Idioma del texto original: inglés

bundle-barrel-imports

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.

Idioma del texto original: inglés

bundle-dynamic-imports

Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.

Idioma del texto original: inglés

component-wrapper-architecture

Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.

Idioma del texto original: inglés

fumadocs-component-docs

Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.

Idioma del texto original: inglés

fumadocs-mdx-structure

Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.

Idioma del texto original: inglés

fumadocs-registry-integration

Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.

Idioma del texto original: inglés

gaming-ui-state-management

Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.

Idioma del texto original: inglés

js-early-exit

Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions where the result can be determined before all iterations complete.

Idioma del texto original: inglés

js-hoist-regexp

Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.

Idioma del texto original: inglés

js-set-map-lookups

Use Set and Map for O(1) membership lookups instead of array.includes(). Apply when checking membership repeatedly or performing frequent lookups against a collection.

Idioma del texto original: inglés

js-tosorted-immutable

Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.

Idioma del texto original: inglés

registry-component-patterns

Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.

Idioma del texto original: inglés

rendering-animate-svg

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.

Idioma del texto original: inglés

rendering-conditional-render

Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.

Idioma del texto original: inglés

rendering-hoist-jsx

Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.

Idioma del texto original: inglés

rerender-functional-setstate

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.

Idioma del texto original: inglés

rerender-lazy-state

Use lazy state initialization with useState function form. Apply when computing expensive initial values like building search indexes, parsing JSON, or complex calculations.

Idioma del texto original: inglés

rerender-memo

Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't changed.

Idioma del texto original: inglés

retro-css-architecture

Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.

Idioma del texto original: inglés

shadcn-ui-conventions

UI component conventions for 8-bit styled components. Use when working with shadcn/ui components or implementing retro-styled UI elements.

Idioma del texto original: inglés