feat(create): cleaner client template

[dor-chaouat]

Note

Description

This PR simplifies the backend-and-client template by removing the pre-built task management demo app and replacing it with a minimal "Hello World" starter. This provides a cleaner starting point for new projects without opinionated example code that users would need to remove anyway.

Related Issue

None

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactoring (no functional changes)
• Other (please describe):

Changes Made

• Removed task management demo app from App.jsx and replaced with minimal "Hello World" component
• Deleted shadcn/ui components: Button, Checkbox, Input, and Base44Logo
• Removed components.json shadcn configuration file
• Deleted Base44 entity and agent definitions for task management (task.jsonc, task_manager.jsonc)
• Removed lucide-react dependency from package.json
• Simplified index.css by removing shadcn/ui CSS variables (retained Tailwind base styles)
• Net result: -283 lines of code, providing a much cleaner starting template

Testing

• I have tested these changes locally
• I have added/updated tests as needed
• All tests pass (npm test)

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (if applicable)
• My changes generate no new warnings
• I have updated AGENTS.md if I made architectural changes

Additional Notes

This change improves the developer experience for the backend-and-client template by providing a clean slate. Users can now start with a simple "Hello World" app and add their own components and functionality without needing to delete example code first. The template still includes all necessary Base44 setup and Tailwind CSS configuration.

---

_{🤖 Generated by Claude | 2026-02-09 16:45 UTC}

[github-actions]

🚀 Package Preview Available!

---

Install this PR's preview build with npm:

npm i @base44-preview/cli@0.0.30-pr.181.ddbe8c1

Prefer not to change any import paths? Install using npm alias so your code still imports base44:

npm i "base44@npm:@base44-preview/cli@0.0.30-pr.181.ddbe8c1"

Or add it to your package.json dependencies:

{
  "dependencies": {
    "base44": "npm:@base44-preview/cli@0.0.30-pr.181.ddbe8c1"
  }
}

• 📦 Preview Package: @base44-preview/cli@0.0.30-pr.181.ddbe8c1
• 🔗 View this commit on GitHub

---

_{Preview published to npm registry — try new features instantly!}

[claude]

Code Review

Found 1 issue that needs attention:

CSS Variables Removed But Still Referenced

Location: templates/backend-and-client/src/index.css (lines 6-7, 10)

Issue: The PR removes all CSS custom property definitions from index.css (the :root block with --background, --foreground, --border, --radius, etc.) but leaves inconsistent references:

1. tailwind.config.js is unchanged and still maps Tailwind utilities to these undefined CSS variables:

   • background: 'hsl(var(--background))'
   • border: 'hsl(var(--border))'
   • borderRadius.lg: 'var(--radius)'
   • And many others

2. index.css still contains:

   • @apply border-border (line 6)
   • @apply bg-background text-foreground (line 10)

   These directives are resolved by Tailwind through the config to hsl(var(--border)), hsl(var(--background)), and hsl(var(--foreground)).

Impact: Since these CSS variables no longer exist, the expressions will evaluate to invalid values like hsl() with no arguments, causing broken colors and borders in the template.

Suggested fix:

Since the goal is to simplify to a minimal starter and shadcn UI components are removed, clean up both files:

1. Remove the @apply directives from index.css
2. Remove or simplify the extended theme in tailwind.config.js that references the deleted CSS variables

Alternatively, if you want to keep the theming system, restore the :root CSS variable definitions.

Reference: See tailwind.config.js lines 7-36 for the variable references.

[claude]

Code review

Issue: CSS variables removed but still referenced

Removing the :root CSS variable definitions in src/index.css causes broken styles because these variables are still referenced in two places:

1. tailwind.config.js (lines 6-36) still defines Tailwind colors using hsl(var(--background)), hsl(var(--foreground)), hsl(var(--border)), etc., and border radius using var(--radius). See:

   cli/templates/backend-and-client/tailwind.config.js

   Lines 5 to 37 in 7aa5a6d

   	extend: {
   	borderRadius: {
   	lg: 'var(--radius)',
   	md: 'calc(var(--radius) - 2px)',
   	sm: 'calc(var(--radius) - 4px)',
   	},
   	colors: {
   	background: 'hsl(var(--background))',
   	foreground: 'hsl(var(--foreground))',
   	primary: {
   	DEFAULT: 'hsl(var(--primary))',
   	foreground: 'hsl(var(--primary-foreground))',
   	},
   	secondary: {
   	DEFAULT: 'hsl(var(--secondary))',
   	foreground: 'hsl(var(--secondary-foreground))',
   	},
   	muted: {
   	DEFAULT: 'hsl(var(--muted))',
   	foreground: 'hsl(var(--muted-foreground))',
   	},
   	accent: {
   	DEFAULT: 'hsl(var(--accent))',
   	foreground: 'hsl(var(--accent-foreground))',
   	},
   	destructive: {
   	DEFAULT: 'hsl(var(--destructive))',
   	foreground: 'hsl(var(--destructive-foreground))',
   	},
   	border: 'hsl(var(--border))',
   	input: 'hsl(var(--input))',
   	ring: 'hsl(var(--ring))',
   	},

2. src/index.css still uses @apply border-border, @apply bg-background, and @apply text-foreground (lines 6 and 10). When Tailwind processes these directives at build time, it resolves them to hsl(var(--border)), hsl(var(--background)), and hsl(var(--foreground)) from the config.

At runtime, these produce invalid hsl() values since the CSS variables are undefined, resulting in broken border colors, backgrounds, and text colors.

Fix options:

• Option A: Remove the @apply directives from index.css and use standard color values
• Option B: Keep the :root CSS variable definitions
• Option C: Update tailwind.config.js to use direct color values instead of CSS variable references

---

Location: templates/backend-and-client/src/index.css lines 6 and 10
Reference:

cli/templates/backend-and-client/src/index.css

Lines 5 to 11 in 7aa5a6d

	@layer base {
	* {
	@apply border-border;
	}
	body {
	@apply bg-background text-foreground antialiased;