theorcdev/8bitcn-ui

1

fumadocs-mdx-structure Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or up…

theorcdev/8bitcn-ui

255

2

8-bit-pixel-art-patterns Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI compon…

theorcdev/8bitcn-ui

127

3

fumadocs-component-docs Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit …

theorcdev/8bitcn-ui

127

4

rendering-animate-svg Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, espe…

theorcdev/8bitcn-ui

108

5

fumadocs-registry-integration Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the compone…

theorcdev/8bitcn-ui

82

6

retro-css-architecture Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying re…

theorcdev/8bitcn-ui

79

7

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

theorcdev/8bitcn-ui

77

8

gaming-ui-state-management Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI componen…

theorcdev/8bitcn-ui

72

9

bundle-barrel-imports Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/materia…

theorcdev/8bitcn-ui

44

10

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

theorcdev/8bitcn-ui

42

11

8bit-docs-patterns Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gami…

theorcdev/8bitcn-ui

41

12

component-wrapper-architecture Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui com…

theorcdev/8bitcn-ui

40

13

bundle-dynamic-imports Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or ri…

theorcdev/8bitcn-ui

39

14

js-early-exit Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating i…

theorcdev/8bitcn-ui

39

15

js-set-map-lookups Use Set and Map for O(1) membership lookups instead of array.includes(). Apply when checking membership repeatedly or…

theorcdev/8bitcn-ui

39

16

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

theorcdev/8bitcn-ui

38

17

rendering-hoist-jsx Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elem…

theorcdev/8bitcn-ui

38

18

rerender-memo Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations…

theorcdev/8bitcn-ui

37

19

js-hoist-regexp Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React compone…

theorcdev/8bitcn-ui

36

20

rendering-conditional-render Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, …

theorcdev/8bitcn-ui

36

21

js-tosorted-immutable Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or …

theorcdev/8bitcn-ui

35

22

rerender-functional-setstate Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating s…

theorcdev/8bitcn-ui

35

23

rerender-lazy-state Use lazy state initialization with useState function form. Apply when computing expensive initial values like buildin…

theorcdev/8bitcn-ui

34