theorcdev/8bitcn-ui

23 resources in this repository

🎯23Skills

1,576

🎯Skills23

Creates MDX documentation files with proper frontmatter, imports, and component integration for Fumadocs pages in the 8-bit CN UI component library

fumadocs-mdx-structure

🎯rendering-animate-svg🎯Skill

Skills for building 8-bit retro UI components with pixel art animations, providing guidance on hardware-accelerated SVG animation techniques for retro-styled interfaces.

rendering-animate-svg

🎯8-bit-pixel-art-patterns🎯Skill

Creates pixelated borders, shadows, and effects for authentic 8-bit retro UI components using absolute-positioned div patterns.

8-bit-pixel-art-patterns

🎯fumadocs-component-docs🎯Skill

Creates component documentation with installation guides, usage examples, and preview sections for 8-bit styled UI components.

fumadocs-component-docs

🎯fumadocs-registry-integration🎯Skill

Skills for building 8-bit retro UI components with pixel art animations, providing guidance on hardware-accelerated SVG animation techniques for retro-styled interfaces.

fumadocs-registry-integration

🎯retro-css-architecture🎯Skill

A retro CSS architecture skill from 8bitcn-ui for organizing 8-bit styled CSS with custom properties, pixel fonts, responsive pixel art, and dark mode support.

retro-css-architecture

🎯gaming-ui-state-management🎯Skill

Provides patterns for building RPG/retro game-like interfaces with state-driven visuals including health bars, XP bars, and mana bars using 8bitcn-ui components.

gaming-ui-state-management

🎯bundle-barrel-imports🎯Skill

Instructs developers to import directly from source files instead of barrel files when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.

bundle-barrel-imports

🎯animation-performance-retro🎯Skill

Optimizes 8-bit animations for smooth pixel art rendering, game UI effects, and retro-styled animations in the 8bitcn-ui component library.

animation-performance-retro

🎯8bit-docs-patterns🎯Skill

Generates retro-styled, gaming-themed documentation with 8-bit terminology, realistic game data examples, and pixel font styling for UI components.

8bit-docs-patterns

🎯registry-component-patterns🎯Skill

Guides registering components in registry.json for the shadcn/ui add command, specifically designed for adding new 8-bit styled components to the 8bitcn-ui component library.

registry-component-patterns

🎯shadcn-ui-conventions🎯Skill

A skill for UI component conventions in 8-bit retro-styled components, providing guidance for working with shadcn/ui components with a retro aesthetic.

shadcn-ui-conventions

🎯component-wrapper-architecture🎯Skill

A skill defining best practices for wrapping shadcn/ui components when creating 8-bit styled variants, maintaining compatibility while adding retro styling through a structured wrapper pattern.

component-wrapper-architecture

🎯bundle-dynamic-imports🎯Skill

A Claude Code skill that teaches using next/dynamic for lazy-loading heavy components like editors, charts, and rich text editors that are not needed on initial render, reducing main bundle size.

bundle-dynamic-imports

🎯rendering-hoist-jsx🎯Skill

Skill

rendering-hoist-jsx

🎯js-early-exit🎯Skill

Skill

js-early-exit

🎯js-hoist-regexp🎯Skill

Skill

js-hoist-regexp

🎯js-set-map-lookups🎯Skill

A JavaScript performance skill teaching the use of Set and Map for O(1) membership lookups instead of array.includes(), applicable when checking membership repeatedly against a collection.

js-set-map-lookups

🎯rerender-functional-setstate🎯Skill

Skill

rerender-functional-setstate

🎯rerender-memo🎯Skill

Skill

rerender-memo

🎯rendering-conditional-render🎯Skill

Skill

rendering-conditional-render

🎯js-tosorted-immutable🎯Skill

Skill

js-tosorted-immutable

🎯rerender-lazy-state🎯Skill

Skill

rerender-lazy-state

Back to Home