create-modern-react 2.1.2 → 2.3.1

package/templates/base/.claude/skills/ui-ux-pro-max/scripts/search.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
+
+Domains: style, prompt, color, chart, landing, product, ux, typography
+Stacks: html-tailwind, react, nextjs
+
+Persistence (Master + Overrides pattern):
+  --persist    Save design system to design-system/MASTER.md
+  --page       Also create a page-specific override file in design-system/pages/
+"""
+
+import argparse
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
+from design_system import generate_design_system, persist_design_system
+
+
+def format_output(result):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append(f"## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append(f"## UI Pro Max Search Results")
+        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if len(value_str) > 300:
+                value_str = value_str[:300] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
+    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        result = generate_design_system(
+            args.query, 
+            args.project_name, 
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir
+        )
+        print(result)
+        
+        # Print persistence confirmation
+        if args.persist:
+            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
+            print("\n" + "=" * 60)
+            print(f"✅ Design system persisted to design-system/{project_slug}/")
+            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            if args.page:
+                page_filename = args.page.lower().replace(' ', '-')
+                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+            print("")
+            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+            print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))

package/templates/base/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/templates/base/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/base/src/screens/home/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Moon, Sun, Github, Zap } from 'lucide-react';
+import { Moon, Sun, Github, Zap, Bot, ExternalLink } from 'lucide-react';
 import { Button, Card, CardContent, CardHeader, CardTitle } from '~/components/ui';
 import { useTheme } from '~/providers';
 
@@ -16,10 +16,21 @@ export default function Home() {
       <div className="w-full max-w-2xl space-y-8">
         {/* Header */}
         <div className="text-center">
-          <div className="mb-4 flex justify-center">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="w-40" />
             <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
               <Zap className="h-8 w-8" />
             </div>
+            <Button variant="outline" asChild>
+              <a
+                href="https://github.com/abhay-rana/create-modern-react"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Github className="mr-2 h-4 w-4" />
+                View CLI on GitHub
+              </a>
+            </Button>
           </div>
           <h1 className="text-4xl font-bold tracking-tight">
             create-modern-react
@@ -27,6 +38,11 @@ export default function Home() {
           <p className="mt-2 text-muted-foreground">
             Production-ready React + TypeScript + Tailwind in seconds
           </p>
+          <div className="mt-4">
+            <code className="rounded-md bg-muted px-3 py-1.5 font-mono text-sm">
+              npx create-modern-react my-app
+            </code>
+          </div>
         </div>
 
         {/* Counter Card */}
@@ -94,18 +110,42 @@ export default function Home() {
           />
         </div>
 
-        {/* Footer */}
-        <div className="flex justify-center">
-          <Button variant="outline" asChild>
-            <a
-              href="https://github.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Github className="mr-2 h-4 w-4" />
-              View on GitHub
-            </a>
-          </Button>
+        {/* AI Skills Highlight */}
+        <div className="rounded-lg border bg-gradient-to-r from-primary/5 to-primary/10 p-4">
+          <div className="flex items-start gap-3">
+            <Bot className="h-5 w-5 text-primary mt-0.5" />
+            <div>
+              <h3 className="font-semibold">Claude Code AI Skills</h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                8 pre-configured skills for React best practices, UI/UX design, browser testing, and spec refinement
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Projects Showcase */}
+        <div className="space-y-4">
+          <h2 className="text-center text-2xl font-bold">
+            Production Projects created using this boilerplate
+          </h2>
+          <div className="grid gap-6 sm:grid-cols-2">
+            <ProjectCard
+              category="AI/Career"
+              title="ResumeFreePro"
+              description="AI-Powered Resume Builder"
+              designStyle="Modern + Glassmorphism"
+              url="https://resumefreepro.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="/screenshots/resumefreepro.png"
+            />
+            <ProjectCard
+              category="E-Pharmacy"
+              title="HealthMug"
+              description="Online Pharmacy Platform"
+              designStyle="Clean + Professional"
+              url="https://healthmug.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="/screenshots/healthmug.png"
+            />
+          </div>
         </div>
 
         <p className="text-center text-xs text-muted-foreground">
@@ -130,3 +170,62 @@ function FeatureCard({
     </div>
   );
 }
+
+function ProjectCard({
+  category,
+  title,
+  description,
+  designStyle,
+  url,
+  previewUrl,
+}: {
+  category: string;
+  title: string;
+  description: string;
+  designStyle: string;
+  url: string;
+  previewUrl: string;
+}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block"
+    >
+      <Card className="overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg">
+        {/* Preview Area */}
+        <div className="relative h-48 overflow-hidden bg-muted">
+          <img
+            src={previewUrl}
+            alt={`${title} preview`}
+            className="h-full w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+          />
+          {/* Overlay on hover */}
+          <div className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <div className="text-center text-white">
+              <ExternalLink className="mx-auto h-8 w-8" />
+              <p className="mt-2 text-sm font-medium">View Demo</p>
+            </div>
+          </div>
+        </div>
+
+        <CardContent className="space-y-3 p-4">
+          {/* Category Badge */}
+          <span className="inline-block rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+            {category}
+          </span>
+
+          {/* Title & Description */}
+          <div>
+            <h3 className="font-bold">{title}</h3>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+
+          {/* Design Style */}
+          <p className="text-xs text-muted-foreground">{designStyle}</p>
+        </CardContent>
+      </Card>
+    </a>
+  );
+}

package/templates/optional/forms/index.ts

@@ -0,0 +1,2 @@
+export { useZodForm, getFieldError } from './use-zod-form';
+export type { UseZodFormProps, UseZodFormReturn, FormFieldProps } from './types';

package/templates/optional/forms/types.ts

@@ -0,0 +1,39 @@
+import {
+  type UseFormReturn,
+  type FieldValues,
+  type UseFormProps,
+} from 'react-hook-form';
+import { type ZodType } from 'zod';
+
+export interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+export type UseZodFormReturn<T extends FieldValues> = UseFormReturn<T>;
+
+/**
+ * Common form field props for building reusable form components
+ *
+ * @example
+ * interface TextFieldProps extends FormFieldProps {
+ *   type?: 'text' | 'email' | 'password';
+ * }
+ *
+ * function TextField({ label, error, required, ...props }: TextFieldProps) {
+ *   return (
+ *     <div>
+ *       {label && <label>{label}{required && '*'}</label>}
+ *       <input {...props} />
+ *       {error && <span className="text-red-500">{error}</span>}
+ *     </div>
+ *   );
+ * }
+ */
+export interface FormFieldProps {
+  label?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}

package/templates/optional/forms/use-zod-form.ts

@@ -0,0 +1,59 @@
+import {
+  useForm,
+  type UseFormProps,
+  type FieldValues,
+  type Path,
+  type FieldErrors,
+} from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { type ZodType } from 'zod';
+
+interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+/**
+ * Custom hook that wraps React Hook Form with Zod validation
+ *
+ * @example
+ * const schema = z.object({
+ *   email: z.string().email(),
+ *   password: z.string().min(8),
+ * });
+ *
+ * const form = useZodForm({ schema });
+ *
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
+ *   <input {...form.register('email')} />
+ *   {form.formState.errors.email && <span>{form.formState.errors.email.message}</span>}
+ * </form>
+ */
+export function useZodForm<T extends FieldValues>({
+  schema,
+  mode = 'onBlur',
+  ...formProps
+}: UseZodFormProps<T>) {
+  return useForm<T>({
+    resolver: zodResolver(schema),
+    mode,
+    ...formProps,
+  });
+}
+
+/**
+ * Helper to get error message for a field
+ *
+ * @example
+ * const error = getFieldError(form.formState.errors, 'email');
+ * if (error) {
+ *   console.log(error); // "Invalid email address"
+ * }
+ */
+export function getFieldError<T extends FieldValues>(
+  errors: FieldErrors<T>,
+  name: Path<T>
+): string | undefined {
+  const error = errors[name];
+  return error?.message as string | undefined;
+}