@ikas/component-cli 0.85.0 → 0.87.0

package/dist/commands/create.js

@@ -61,7 +61,7 @@ async function createProject(projectName) {
             { template: "create/gitignore", dest: ".gitignore" },
             { template: "create/mcp.json", dest: ".mcp.json" },
             { template: "create/README.md", dest: "README.md", vars },
-            { template: "create/CLAUDE.md", dest: "CLAUDE.md" },
+            { template: "create/claude-md", dest: "CLAUDE.md" },
             { template: "create/cursorrules", dest: ".cursorrules" },
             { template: "create/src/global.css", dest: "src/global.css" },
             { template: "create/src/global-types.ts", dest: "src/global-types.ts" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/component-cli",
-  "version": "0.85.0",
+  "version": "0.87.0",
   "description": "CLI for developing ikas code components",
   "type": "module",
   "main": "./dist/index.js",

package/templates/create/{CLAUDE.md → claude-md}

@@ -96,7 +96,7 @@ src/
 - Custom enum types are exported from `src/global-types.ts` (auto-generated). Sub-components can import them: `import type { MyEnum } from "../../global-types";`
 - CSS: use `@import "../../sub-components/ProductCard/styles.css";` in parent styles.css
 - TSX: use `import ProductCard from "../../sub-components/ProductCard";`
-- Sub-components that read MobX stores need `observer()`, others don't
+- Sub-components should be wrapped with `observer()` from `@ikas/component-utils`
 - Sub-components can be shared across multiple parent sections
 
 ```tsx
@@ -121,7 +121,7 @@ export default MySection;
 ```
 
 ```tsx
-// Only use observer() on extracted SUB-COMPONENTS that independently read MobX stores:
+// Only use observer() on extracted SUB-COMPONENTS
 import { observer } from "@ikas/component-utils";
 
 const CartBadge = observer(function CartBadge() {
@@ -209,7 +209,7 @@ For button loading states, use two separate props:
 - `submitButtonText` (default: "Sign In")
 - `submittingButtonText` (default: "Signing in...")
 
-Group text props under a "Texts" propGroup when the component has 5+ props.
+Group text props under a "Texts" propGroup or another specific text group name.
 
 ## Sections vs Components
 
@@ -223,7 +223,7 @@ Group text props under a "Texts" propGroup when the component has 5+ props.
 
 ## Prop Groups
 
-Organize props into collapsible groups in the editor sidebar. Use prop groups when a component has 5+ props to improve UX.
+Organize props into collapsible groups in the editor sidebar. Use prop groups when a component has props that are related to each other.
 
 ### Config Format
 - Define groups in `propGroups` array on the component in `ikas.config.json`
@@ -240,13 +240,13 @@ Organize props into collapsible groups in the editor sidebar. Use prop groups wh
 - `config remove-prop-group --component "Name" --id content` — remove group (props become ungrouped)
 
 ### When to Use
-- 5+ props → group related props
+- props that are related to each other → group related props
 - Sections with content + style props → separate "Content" and "Appearance" groups
 - Complex sections → use nested groups (e.g., "Style" → "Colors", "Typography")
 
 ## Workflow Addition
 
-When building a section with 5+ props, organize into prop groups after defining props:
+When building a section with props that are related to each other, organize into prop groups after defining props:
 ```bash
 npx ikas-component config add-prop-group --component "Name" --id content --name "Content"
 npx ikas-component config update-prop --component "Name" --prop title --group content

package/templates/create/cursorrules

@@ -57,16 +57,15 @@ These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` auto
 - `src/components/` = registered in ikas.config.json. `src/sub-components/` = internal helpers (NOT in ikas.config.json)
 - Sub-components do NOT have `types.ts` — define `Props` inline in `index.tsx`
 - Custom enum types are exported from `src/global-types.ts` (auto-generated). Sub-components can import them: `import type { MyEnum } from "../../global-types";`
-- CSS: `@import "../../sub-components/ProductCard/styles.css";` in parent styles.css
 - TSX: `import ProductCard from "../../sub-components/ProductCard";`
-- Sub-components that read MobX stores need `observer()`, others don't
+- Sub-components should be wrapped with `observer()` from `@ikas/component-utils`
 - Sub-components can be shared across multiple parent sections
 - NEVER create flat .tsx files inside a component folder
 
 ## Key Patterns
 - Root components are automatically reactive (ikas runtime uses autorun). Do NOT use observer() on root exports.
   Pattern: `export function MySection({ title }: Props) { ... }` + `export default MySection;`
-  Only use observer() on extracted sub-components that independently read MobX stores.
+  Only use observer() on sub-components.
 - Null safety: storefront models can be null — always check before accessing
 - Mutations: addItemToCart() etc. mutate MobX observables in-place — no return capture needed
 - COMPONENT & COMPONENT_LIST props: slot-based child components rendered via `<IkasComponentRenderer>`
@@ -83,7 +82,7 @@ empty states, loading messages, form labels) MUST be TEXT props with defaultValu
 Wrong: `<h1>Sign In</h1>`
 Correct: `<h1>{title}</h1>` with `title` as TEXT prop (defaultValue: "Sign In")
 For button loading states, use two separate props (e.g., `submitButtonText` + `submittingButtonText`).
-Group text props under a "Texts" propGroup when the component has 5+ props.
+Group text props under a "Texts" propGroup or another specific text group name.
 
 ## Sections vs Components
 - Sections = page-level containers (Header, Hero, Product Grid, Footer)
@@ -95,7 +94,7 @@ Group text props under a "Texts" propGroup when the component has 5+ props.
   Defaults to "component". Use <div> root element. Props interface: Props.
 
 ## Prop Groups
-Organize 5+ props into collapsible groups in editor sidebar.
+Organize props that are related to each other into collapsible groups in editor sidebar.
 - Define groups in `propGroups` on component in ikas.config.json
 - Assign props via `groupId` on each prop
 - Nest 1 level deep with `children`