← ClaudeAtlas

ink-playing-cardslisted

Use when building terminal card games with ink-playing-cards, working with card components, deck management, zone systems, event systems, effect systems, or any card game logic using Ink and React for CLI rendering.
gfargo/skills · ★ 2 · Web & Frontend · score 75
Install: claude install-skill gfargo/skills
# ink-playing-cards v1.0.0 React component library for terminal-based card games with Ink 6 (React 19 for CLIs). Provides UI components, hooks, contexts, and game systems. ```bash npm install ink-playing-cards # deps: ink ^6.0.0, react ^19.0.0 — requires Node >= 20 ``` ## Architecture All state flows through `DeckProvider` (React context + `useReducer`). Zones are immutable `TCard[]` arrays. The `useDeck` hook wraps dispatch. ```text DeckProvider ├── zones.deck: TCard[] ├── zones.hands: Record<string, TCard[]> ├── zones.discardPile: TCard[] ├── zones.playArea: TCard[] ├── zones.custom: Record<string, TCard[]> // arbitrary named zones (tableau, foundation, ...) ├── players: string[] ├── eventManager / effectManager └── dispatch(DeckAction) ``` Custom zones are addressed by name via `moveCard`/`setZone`/`clearZone`/`getZone` — useful for games (solitaire, etc.) that need more structure than deck/hand/discard/play. See `MOVE_CARD`/`SET_ZONE`/`CLEAR_ZONE` below. ## Quick Start ```tsx import React from 'react' import { render, Box, Text, useInput } from 'ink' import { DeckProvider, useDeck, useHand, CardStack } from 'ink-playing-cards' const Game = () => { const { deck, shuffle, draw } = useDeck() const { hand, playCard, discard } = useHand('player1') React.useEffect(() => { shuffle(); draw(5, 'player1') }, []) useInput((input) => { if (input === 'd') draw(1, 'player1') }) return ( <Box flexDirection="column"> <Text>Deck: {deck.length}</Text>