Heroes of Chess Components

Reusable React components, hooks, providers, assets, and design primitives for the Heroes of Chess app ecosystem.

AI Design Guide

The canonical reference for AI-assisted UI work now lives in:

• DESIGN.md
• Design AI/README.md

Use those files whenever you are:

• creating a new user-facing screen
• refactoring an off-brand area
• extending a flow and want it to stay visually native to HOC
• deciding whether to reuse an existing H component or build a new composite component

This guide is intentionally published with the package so other apps can consume it from node_modules/heroes-of-chess-components.

What the Package Contains

• Reusable HOC UI components
• Theme and provider infrastructure
• Hooks for common product behavior
• Shared assets and static datasets
• AI-facing design documentation for consistent UI generation

Install

npm install heroes-of-chess-components

Peer dependencies:

npm install react react-dom styled-components

Basic Usage

import { HProviders, HButton, HInput, HModal } from "heroes-of-chess-components";

function App() {
  return (
    <HProviders>
      <Example />
    </HProviders>
  );
}

function Example() {
  return (
    <>
      <HInput label="Name" />
      <HButton text="Continue" />
      <HModal showModal={false} title="Example" />
    </>
  );
}

Main Entrypoints

• Components: src/lib/HocComponents
• Providers: src/lib/providers
• Hooks: src/lib/hooks
• Assets: src/lib/assets
• Shared data: src/lib/data
• AI design guide: DESIGN.md and Design AI/

Recommended Workflow for New UI

1. Read DESIGN.md.
2. Read Design AI/COMPONENTS.md and Design AI/PATTERNS.md.
3. Reuse H components first.
4. Check the final result against Design AI/CHECKLIST.md.

Development

npm install
npm run dev

Useful scripts:

npm run build
npm run lint
npm run preview
npm run test:smoke

Publishing Notes

The package publishes:

• runtime build output from dist/
• this README
• the root DESIGN.md
• the full Design AI/ folder

That means downstream apps can keep the design guide close to the installed component library instead of relying on repo-local tribal knowledge.