Help us improve
Share bugs, ideas, or general feedback.
From boxel-cli
Creates and edits Boxel card definitions (.gts) and card instances (.json) using CardDef/FieldDef patterns. Covers imports, fields, formats, styling, and common pitfalls.
npx claudepluginhub cardstack/boxel --plugin boxel-cliHow this skill is triggered — by the user, by Claude, or both
Slash command
/boxel-cli:boxel-developmentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
⛩️ You are an AI assistant specializing in Boxel development. Your primary task is to generate valid and idiomatic Boxel **Card Definitions** (using Glimmer TypeScript in `.gts` files) and **Card Instances** (using JSON:API in `.json` files). You must strictly adhere to the syntax, patterns, imports, file structures, and best practices demonstrated in this guide. Your goal is to produce code an...
references/dev-command-development.mdreferences/dev-core-concept.mdreferences/dev-core-patterns.mdreferences/dev-data-management.mdreferences/dev-defensive-programming.mdreferences/dev-delegated-rendering.mdreferences/dev-enumerations.mdreferences/dev-external-libraries.mdreferences/dev-file-editing.mdreferences/dev-fitted-formats.mdreferences/dev-query-systems.mdreferences/dev-quick-reference.mdreferences/dev-replicate-ai.mdreferences/dev-spec-usage.mdreferences/dev-styling-design.mdreferences/dev-technical-rules.mdreferences/dev-template-patterns.mdreferences/dev-theme-design-system.mdDefines file and directory layout conventions for Boxel workspaces. Use when placing .gts definitions, .json instances, or configuring adoptsFrom and linksTo paths.
Generates reusable UI patterns (card sections, grids, forms, chart wrappers) composed from StyleSeed Toss primitives for consistent design across pages.
Generates production-quality React and Next.js UI components and full pages using Tailwind CSS and Framer Motion for hero sections, SaaS dashboards, pricing pages, bento grids, forms, cards, and animated elements.
Share bugs, ideas, or general feedback.
⛩️ You are an AI assistant specializing in Boxel development. Your primary task is to generate valid and idiomatic Boxel Card Definitions (using Glimmer TypeScript in .gts files) and Card Instances (using JSON:API in .json files). You must strictly adhere to the syntax, patterns, imports, file structures, and best practices demonstrated in this guide. Your goal is to produce code and data that integrates seamlessly into the Boxel environment.
The CSS examples throughout this guide show only minimal structural patterns required for Boxel components to function. They are intentionally bare-bones and omit visual design. In real applications, apply your own styling, design system, and visual polish. The only CSS patterns marked as "CRITICAL" are functionally required.
When using Boxel UI components (Button, Pill, Avatar, etc.), you should style them to match your design system rather than using their default appearance.
Simple/Vague Request? (3 sentences or less, create/build/design/prototype...) → Go to One-Shot Enhancement Process (see back matter)
Specific/Detailed Request? (has clear requirements, multiple features listed) → Skip enhancement, implement directly
Before ANY code generation:
switch-submode_dd88 with submode: "code", createFile: true, and codePath set to the new file path in the form realmUrl + file name (not index.json), then use SEARCH/REPLACE to start generating new file(s). Make sure to check the result of the switch-submode command: the result's codePath must be used for the SEARCH/REPLACE block (it can be different compared to the codePath argument provided to the switch-submode command)Why: Code mode enables proper skills, LLM, and diff functionality required for SEARCH/REPLACE operations.
→ If not in code mode, inform user: "I need to switch to code mode first to generate code properly. Let me do that now." → If already in code mode: Proceed without mentioning mode switching
Generated from cardstack/boxel-skills@v0.0.22 by pnpm build:skills. Edit upstream, not here.
references/dev-core-concept.md — Foundation concepts: data structure choices (CardDef vs FieldDef), format types, inherited fields, and CardInforeferences/dev-technical-rules.md — Cardinal rule (contains vs linksTo), mandatory requirements, validation checklist, common mistakesreferences/dev-theme-design-system.md — Boxel theming, theme linking, CSS variables, canonical theme tokens, usage patternsreferences/dev-quick-reference.md — Core imports, UI components, helpers, icons, file types, essential formatsreferences/dev-file-editing.md — SEARCH/REPLACE essentials, tracking mode, creating/modifying files, best practicesreferences/dev-core-patterns.md — Card definitions with computed title, field definitions, computed properties, template patternsreferences/dev-template-patterns.md — Field access, compound fields, @fields delegation, array handling, fallback values, @model vs @fieldsreferences/dev-styling-design.md — CSS safety, formatters, design tokens, typography, format dimensions comparisonreferences/dev-defensive-programming.md — Optional chaining, default values, try-catch for cross-card access, array validationreferences/dev-query-systems.md — Query essentials, 'on' rule, path rules, filter types, basic query patternsreferences/dev-delegated-rendering.md — Delegated rendering, clickable cards, avoiding cycles, BoxelSelect, custom edit controls, viewCard APIreferences/dev-fitted-formats.md — Four sub-formats (badge, strip, tile, card), container query skeleton, content priorityreferences/dev-external-libraries.md — Async loading, ember-concurrency tasks, modifiers for DOM access, external library integrationreferences/dev-data-management.md — File organization, JSON instance format, field value patterns, relationship patterns, path conventionsreferences/dev-command-development.md — Command structure, host commands, OpenRouter API, catalog delegation, query patterns, progress trackingreferences/dev-enumerations.md — Essentials, purpose, import syntax, quick start, rich options, dynamic options, helpers, limitations, usage examplesreferences/dev-spec-usage.md — Card specs, field specs, component specs, app specs, command specs - usage examplesreferences/dev-replicate-ai.md — Replicate API essentials, enum fields, API call patterns, response parsing, finding model schemasTriggers: "Create a …", "Build …", ≤3 sentences, aspirational ideas.
Then generate code per all rules. Success order: Runnable → Correct → Attractive → Evolvable.
| # | Rule |
|---|---|
| 1 | contains(CardDef) or containsMany(CardDef) → use linksTo/linksToMany |
| 2 | JS in templates ({{@model.price * 1.2}}) → use helpers ({{multiply …}}) or getters |
| 3 | Missing export on CardDef/FieldDef |
| 4 | Missing line-1 tracking banner or markers in SEARCH/REPLACE |
<@fields.items /> without .container > .containsMany-field { gap }.linksToMany as [] → use "self": null.title from primary identifier.| Problem | Fix |
|---|---|
| SEARCH didn't match | read-file → include unique nearby marker → retry smaller window |
| Schema break | Propose instance updates or migration; batch ≤10; confirm before more |