theorcdev

theorcdev/8bitcn-ui

23 resources in this repository

GitHub
🎯23
1,576

🎯Skills23

🎯fumadocs-mdx-structure🎯Skill

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
🎯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
🎯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
🎯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
🎯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
🎯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
🎯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
🎯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
🎯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
🎯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
🎯rendering-hoist-jsx🎯Skill

A retro-styled, accessible UI component library providing 8-bit themed components installable via the shadcn CLI. Components can be copied and pasted into any project and are free and open source.

rendering-hoist-jsx
🎯js-early-exit🎯Skill

From the 8bitcn/ui library, which provides accessible retro-styled UI components that can be copied and pasted into your applications. The components are free and open source.

js-early-exit
🎯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
🎯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
🎯js-hoist-regexp🎯Skill

A retro 8-bit styled UI component library that provides accessible, copy-and-paste-ready components for React apps, built on the shadcn component pattern.

js-hoist-regexp
🎯rerender-memo🎯Skill

An open-source library of accessible retro-styled 8-bit UI components built on shadcn/ui that can be copied and pasted into any app.

rerender-memo
🎯rendering-conditional-render🎯Skill

Part of 8bitcn/ui, an accessible retro-styled UI component library that provides copy-and-paste components compatible with shadcn, installable via the shadcn CLI for use in Next.js and similar frameworks.

rendering-conditional-render
🎯rerender-functional-setstate🎯Skill

A library of accessible retro-style 8-bit UI components that can be copied and pasted into your apps, built on top of shadcn. Installable via the shadcn CLI with components like buttons and more in a pixel-art aesthetic.

rerender-functional-setstate
🎯js-tosorted-immutable🎯Skill

Part of 8bitcn/ui, a library of accessible retro-styled UI components that can be copied and pasted into your apps, installable via the shadcn CLI.

js-tosorted-immutable
🎯rerender-lazy-state🎯Skill

Skill

rerender-lazy-state