{
  "markdown": "# @cronocode/react-box — Claude Code Plugin\n\nAI skill for the [@cronocode/react-box](https://github.com/cronocodesolutions/react-box) runtime CSS-in-JS library. Helps AI assistants correctly use Box props, component shortcuts, numeric formatters, themes, Dropdown, Select, DataGrid, and the full extension system.\n\n## Install\n\n### Via Claude Code plugin system\n\n```bash\n/plugin marketplace add cronocodesolutions/react-box-skill\n```\n\nThen install:\n\n```bash\n/plugin install cronocode-react-box@cronocodesolutions-react-box-skill\n```\n\n### Manual install (global — works across all projects)\n\n```bash\ngit clone https://github.com/cronocodesolutions/react-box-skill.git\ncp -r react-box-skill/skills/cronocode-react-box ~/.claude/skills/\n```\n\n### Manual install (project-level)\n\n```bash\nmkdir -p .claude/skills\ncp -r node_modules/@cronocode/react-box/.claude/skills/react-box .claude/skills/\n```\n\n## What it does\n\nWhen active, the AI assistant will:\n\n- **Never use inline `style={{ }}`** — always use Box props\n- **Never use `<Box tag=\"...\">`** — use semantic component shortcuts (`<Button>`, `<Flex>`, `<H1>`, etc.)\n- **Apply correct numeric formatters** — fontSize divider 16, spacing divider 4, border direct px\n- **Use Dropdown** correctly with compound pattern, sub-components, variants, `itemsProps`/`iconProps`\n- **Use Select** correctly with data + def pattern for data-driven dropdowns\n- **Use DataGrid** correctly with columns, filters, sorting, pagination, style customization\n- **Configure themes** with `Box.Theme`, `storageKey`, `setTheme(null)` reset\n- **Extend Box** with `Box.extend()` and `Box.components()` for custom props and component styles\n- **Detect package manager** (npm/yarn/pnpm/bun) and suggest correct install/update commands\n\n## Compatibility\n\nWorks with Claude Code. The skill follows the Agent Skills open standard and may also work with other AI coding assistants that support SKILL.md format (Cursor, Windsurf, Codex).\n\n## License\n\nMIT\n",
  "bytes": 1967,
  "sha": "25473c1ad1ba88d3157c1a84f97c9c649aa2bb9085adbdaf8b9e3adab3879ffa",
  "repo_slug": "cronocodesolutions/react-box-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_cronocodesolutions_react_box_skill_crono_1e1b5dc1/readme"
}