real-prototypes-skill 2.0.0

package/.claude/skills/real-prototypes-skill/scripts/verify-layout-analysis.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+
+# Verification script for layout analysis output
+# Checks that all expected files are present and valid
+
+set -e
+
+echo "🔍 Verifying Layout Analysis Output"
+echo "===================================="
+echo ""
+
+# Get the references directory (passed as argument or use default)
+REFERENCES_DIR="${1:-../../../references}"
+
+# Check if references directory exists
+if [ ! -d "$REFERENCES_DIR" ]; then
+    echo "❌ Error: References directory not found at $REFERENCES_DIR"
+    exit 1
+fi
+
+echo "✓ References directory exists: $REFERENCES_DIR"
+
+# Check for structure-manifest.json
+if [ ! -f "$REFERENCES_DIR/structure-manifest.json" ]; then
+    echo "❌ Error: structure-manifest.json not found"
+    echo "   Run: node analyze-layout.js"
+    exit 1
+fi
+
+echo "✓ structure-manifest.json exists"
+
+# Validate JSON structure (use absolute path)
+MANIFEST_PATH="$(cd "$REFERENCES_DIR" && pwd)/structure-manifest.json"
+if ! node -e "require('$MANIFEST_PATH')" 2>/dev/null; then
+    echo "❌ Error: structure-manifest.json is not valid JSON"
+    exit 1
+fi
+
+echo "✓ structure-manifest.json is valid JSON"
+
+# Check for component maps
+COMPONENT_MAPS=$(ls "$REFERENCES_DIR"/component-map-*.json 2>/dev/null | wc -l)
+if [ "$COMPONENT_MAPS" -eq 0 ]; then
+    echo "❌ Error: No component-map-*.json files found"
+    echo "   Run: node analyze-layout.js"
+    exit 1
+fi
+
+echo "✓ Found $COMPONENT_MAPS component map files"
+
+# Extract key metrics from structure-manifest.json
+echo ""
+echo "📊 Analysis Metrics:"
+echo "-------------------"
+
+PAGES_ANALYZED=$(node -e "console.log(require('$MANIFEST_PATH').pagesAnalyzed)")
+echo "Pages analyzed: $PAGES_ANALYZED"
+
+UI_LIBRARY=$(node -e "console.log(require('$MANIFEST_PATH').library)")
+echo "UI library: $UI_LIBRARY"
+
+LAYOUT_TYPE=$(node -e "console.log(require('$MANIFEST_PATH').layout.type)")
+echo "Layout type: $LAYOUT_TYPE"
+
+COMPONENT_TYPES=$(node -e "console.log(Object.keys(require('$MANIFEST_PATH').components).join(', '))")
+echo "Component types: $COMPONENT_TYPES"
+
+TOTAL_COMPONENTS=$(node -e "const m=require('$MANIFEST_PATH'); console.log(Object.values(m.components).reduce((sum,c)=>sum+c.totalCount,0))")
+echo "Total components: $TOTAL_COMPONENTS"
+
+echo ""
+echo "✅ All verification checks passed!"
+echo ""
+echo "💡 Next steps:"
+echo "   1. Review structure-manifest.json for layout patterns"
+echo "   2. Review component-map-*.json for page-specific details"
+echo "   3. Run: node test-analyze-layout.js $REFERENCES_DIR"

package/.claude/skills/real-prototypes-skill/templates/dashboard-widget.tsx.template

@@ -0,0 +1,91 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface DashboardWidgetProps {
+  title?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function DashboardWidget({
+  title = "{/* FEATURE_TITLE */}",
+  description,
+  actions,
+  children,
+  className = "",
+}: DashboardWidgetProps) {
+  return (
+    <Card
+      className={`bg-platform-background border-platform-secondary/20 shadow-sm hover:shadow-md transition-shadow ${className}`}
+      role="region"
+      aria-labelledby="widget-title"
+    >
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle
+              id="widget-title"
+              className="text-lg font-semibold text-platform-foreground"
+            >
+              {title}
+            </CardTitle>
+            {description && (
+              <CardDescription className="text-platform-foreground/60 mt-1">
+                {description}
+              </CardDescription>
+            )}
+          </div>
+          {actions && (
+            <div className="flex items-center gap-2" role="toolbar" aria-label="Widget actions">
+              {actions}
+            </div>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="text-platform-foreground">
+        {/* FEATURE_CONTENT */}
+        {children}
+      </CardContent>
+
+      {/* Optional footer for additional actions */}
+      {/*
+      <CardFooter className="pt-3 border-t border-platform-secondary/10">
+        <div className="flex items-center justify-end gap-2 w-full">
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-platform-secondary text-platform-foreground hover:bg-platform-secondary/10"
+          >
+            View Details
+          </Button>
+          <Button
+            size="sm"
+            className="bg-platform-primary text-white hover:bg-platform-primary/90"
+          >
+            Take Action
+          </Button>
+        </div>
+      </CardFooter>
+      */}
+    </Card>
+  );
+}
+
+// Example usage:
+// <DashboardWidget
+//   title="Sales Overview"
+//   description="Monthly sales performance"
+//   actions={
+//     <Button variant="ghost" size="sm">
+//       <RefreshIcon className="h-4 w-4" />
+//     </Button>
+//   }
+// >
+//   <div className="space-y-4">
+//     <p>Your content here</p>
+//   </div>
+// </DashboardWidget>

package/.claude/skills/real-prototypes-skill/templates/data-table.tsx.template

@@ -0,0 +1,193 @@
+import React, { useState, useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
+
+type SortDirection = "asc" | "desc" | null;
+
+interface Column<T> {
+  key: keyof T;
+  header: string;
+  sortable?: boolean;
+  render?: (value: T[keyof T], row: T) => React.ReactNode;
+  className?: string;
+}
+
+interface DataTableProps<T extends Record<string, unknown>> {
+  data: T[];
+  columns: Column<T>[];
+  caption?: string;
+  emptyMessage?: string;
+  onRowClick?: (row: T) => void;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, unknown>>({
+  data,
+  columns,
+  caption = "{/* FEATURE_TITLE */}",
+  emptyMessage = "No data available",
+  onRowClick,
+  className = "",
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = useState<keyof T | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = (key: keyof T) => {
+    if (sortKey === key) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortDirection(null);
+        setSortKey(null);
+      } else {
+        setSortDirection("asc");
+      }
+    } else {
+      setSortKey(key);
+      setSortDirection("asc");
+    }
+  };
+
+  const sortedData = useMemo(() => {
+    if (!sortKey || !sortDirection) return data;
+
+    return [...data].sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+
+      if (aVal === bVal) return 0;
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+
+      const comparison = aVal < bVal ? -1 : 1;
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }, [data, sortKey, sortDirection]);
+
+  const getSortIcon = (key: keyof T) => {
+    if (sortKey !== key) {
+      return <ChevronsUpDown className="ml-2 h-4 w-4 text-platform-foreground/40" />;
+    }
+    if (sortDirection === "asc") {
+      return <ChevronUp className="ml-2 h-4 w-4 text-platform-primary" />;
+    }
+    return <ChevronDown className="ml-2 h-4 w-4 text-platform-primary" />;
+  };
+
+  return (
+    <div className={`w-full overflow-auto rounded-lg border border-platform-secondary/20 ${className}`}>
+      <Table>
+        {caption && (
+          <caption className="sr-only">{caption}</caption>
+        )}
+        <TableHeader>
+          <TableRow className="bg-platform-secondary/5 hover:bg-platform-secondary/10">
+            {columns.map((column) => (
+              <TableHead
+                key={String(column.key)}
+                className={`text-platform-foreground font-semibold ${column.className || ""}`}
+              >
+                {column.sortable ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 px-2 -ml-2 hover:bg-platform-secondary/10 text-platform-foreground"
+                    onClick={() => handleSort(column.key)}
+                    aria-label={`Sort by ${column.header}`}
+                  >
+                    {column.header}
+                    {getSortIcon(column.key)}
+                  </Button>
+                ) : (
+                  column.header
+                )}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {/* FEATURE_CONTENT */}
+          {sortedData.length === 0 ? (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center text-platform-foreground/60"
+              >
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          ) : (
+            sortedData.map((row, index) => (
+              <TableRow
+                key={index}
+                className={`
+                  bg-platform-background
+                  hover:bg-platform-secondary/5
+                  transition-colors
+                  ${onRowClick ? "cursor-pointer" : ""}
+                `}
+                onClick={() => onRowClick?.(row)}
+                tabIndex={onRowClick ? 0 : undefined}
+                onKeyDown={(e) => {
+                  if (onRowClick && (e.key === "Enter" || e.key === " ")) {
+                    e.preventDefault();
+                    onRowClick(row);
+                  }
+                }}
+                role={onRowClick ? "button" : undefined}
+              >
+                {columns.map((column) => (
+                  <TableCell
+                    key={String(column.key)}
+                    className={`text-platform-foreground ${column.className || ""}`}
+                  >
+                    {column.render
+                      ? column.render(row[column.key], row)
+                      : String(row[column.key] ?? "")}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+// Example usage:
+// interface User {
+//   id: number;
+//   name: string;
+//   email: string;
+//   status: string;
+// }
+//
+// const columns: Column<User>[] = [
+//   { key: "name", header: "Name", sortable: true },
+//   { key: "email", header: "Email", sortable: true },
+//   {
+//     key: "status",
+//     header: "Status",
+//     render: (value) => (
+//       <Badge variant={value === "active" ? "default" : "secondary"}>
+//         {value}
+//       </Badge>
+//     ),
+//   },
+// ];
+//
+// <DataTable
+//   data={users}
+//   columns={columns}
+//   caption="User list"
+//   onRowClick={(user) => console.log(user)}
+// />

package/.claude/skills/real-prototypes-skill/templates/form-section.tsx.template

@@ -0,0 +1,250 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+interface FormData {
+  textField: string;
+  emailField: string;
+  selectField: string;
+  textareaField: string;
+  checkboxField: boolean;
+}
+
+interface FormSectionProps {
+  title?: string;
+  description?: string;
+  onSubmit?: (data: FormData) => void;
+  onCancel?: () => void;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function FormSection({
+  title = "{/* FEATURE_TITLE */}",
+  description,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  className = "",
+}: FormSectionProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: {
+      textField: "",
+      emailField: "",
+      selectField: "",
+      textareaField: "",
+      checkboxField: false,
+    },
+  });
+
+  const checkboxValue = watch("checkboxField");
+
+  const handleFormSubmit = (data: FormData) => {
+    onSubmit?.(data);
+  };
+
+  return (
+    <div className={`bg-platform-background p-6 rounded-lg border border-platform-secondary/20 ${className}`}>
+      {(title || description) && (
+        <div className="mb-6">
+          {title && (
+            <h2 className="text-xl font-semibold text-platform-foreground">
+              {title}
+            </h2>
+          )}
+          {description && (
+            <p className="mt-1 text-sm text-platform-foreground/60">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
+        {/* FEATURE_CONTENT */}
+
+        {/* Text Input */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="textField"
+            className="text-platform-foreground font-medium"
+          >
+            Text Field
+            <span className="text-red-500 ml-1" aria-hidden="true">*</span>
+          </Label>
+          <Input
+            id="textField"
+            type="text"
+            placeholder="Enter text..."
+            className="bg-platform-background border-platform-secondary/30 text-platform-foreground placeholder:text-platform-foreground/40 focus:border-platform-primary focus:ring-platform-primary"
+            aria-required="true"
+            aria-invalid={!!errors.textField}
+            aria-describedby={errors.textField ? "textField-error" : undefined}
+            {...register("textField", { required: "This field is required" })}
+          />
+          {errors.textField && (
+            <p id="textField-error" className="text-sm text-red-500" role="alert">
+              {errors.textField.message}
+            </p>
+          )}
+        </div>
+
+        {/* Email Input */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="emailField"
+            className="text-platform-foreground font-medium"
+          >
+            Email Field
+          </Label>
+          <Input
+            id="emailField"
+            type="email"
+            placeholder="email@example.com"
+            className="bg-platform-background border-platform-secondary/30 text-platform-foreground placeholder:text-platform-foreground/40 focus:border-platform-primary focus:ring-platform-primary"
+            aria-invalid={!!errors.emailField}
+            aria-describedby={errors.emailField ? "emailField-error" : undefined}
+            {...register("emailField", {
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: "Invalid email address",
+              },
+            })}
+          />
+          {errors.emailField && (
+            <p id="emailField-error" className="text-sm text-red-500" role="alert">
+              {errors.emailField.message}
+            </p>
+          )}
+        </div>
+
+        {/* Select Input */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="selectField"
+            className="text-platform-foreground font-medium"
+          >
+            Select Field
+          </Label>
+          <Select
+            onValueChange={(value) => setValue("selectField", value)}
+          >
+            <SelectTrigger
+              id="selectField"
+              className="bg-platform-background border-platform-secondary/30 text-platform-foreground focus:border-platform-primary focus:ring-platform-primary"
+              aria-label="Select an option"
+            >
+              <SelectValue placeholder="Select an option..." />
+            </SelectTrigger>
+            <SelectContent className="bg-platform-background border-platform-secondary/30">
+              <SelectItem
+                value="option1"
+                className="text-platform-foreground focus:bg-platform-secondary/10"
+              >
+                Option 1
+              </SelectItem>
+              <SelectItem
+                value="option2"
+                className="text-platform-foreground focus:bg-platform-secondary/10"
+              >
+                Option 2
+              </SelectItem>
+              <SelectItem
+                value="option3"
+                className="text-platform-foreground focus:bg-platform-secondary/10"
+              >
+                Option 3
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Textarea */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="textareaField"
+            className="text-platform-foreground font-medium"
+          >
+            Description
+          </Label>
+          <Textarea
+            id="textareaField"
+            placeholder="Enter a description..."
+            rows={4}
+            className="bg-platform-background border-platform-secondary/30 text-platform-foreground placeholder:text-platform-foreground/40 focus:border-platform-primary focus:ring-platform-primary resize-none"
+            {...register("textareaField")}
+          />
+        </div>
+
+        {/* Checkbox */}
+        <div className="flex items-start space-x-3">
+          <Checkbox
+            id="checkboxField"
+            checked={checkboxValue}
+            onCheckedChange={(checked) => setValue("checkboxField", !!checked)}
+            className="border-platform-secondary/50 data-[state=checked]:bg-platform-primary data-[state=checked]:border-platform-primary mt-0.5"
+          />
+          <div className="space-y-1">
+            <Label
+              htmlFor="checkboxField"
+              className="text-platform-foreground font-medium cursor-pointer"
+            >
+              I agree to the terms
+            </Label>
+            <p className="text-sm text-platform-foreground/60">
+              By checking this box, you agree to our Terms of Service and Privacy Policy.
+            </p>
+          </div>
+        </div>
+
+        {/* Form Actions */}
+        <div className="flex items-center justify-end gap-3 pt-4 border-t border-platform-secondary/10">
+          {onCancel && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={isLoading}
+              className="border-platform-secondary text-platform-foreground hover:bg-platform-secondary/10"
+            >
+              Cancel
+            </Button>
+          )}
+          <Button
+            type="submit"
+            disabled={isLoading}
+            className="bg-platform-primary text-white hover:bg-platform-primary/90 disabled:opacity-50"
+          >
+            {isLoading ? "Submitting..." : "Submit"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+// Example usage:
+// <FormSection
+//   title="Contact Information"
+//   description="Please fill out the form below"
+//   onSubmit={(data) => console.log(data)}
+//   onCancel={() => console.log("Cancelled")}
+//   isLoading={false}
+// />