{
  "id": "app-skeleton-react",
  "name": "React App Skeleton",
  "category": "software-builder",
  "tags": ["react", "starter", "boilerplate", "counter", "demo"],
  "description": "Blank React app template with counter demo, state management example, and component structure.",
  "triggers": ["react app", "app skeleton", "build app", "react template", "app starter"],
  "defaultSize": { "w": 5, "h": 5 },
  "source": "const AppSkeletonReact = () => {\n  const [count, setCount] = React.useState(0);\n  const [name, setName] = React.useState('Titan');\n  const [items, setItems] = React.useState(['Component A', 'Component B', 'Component C']);\n\n  const styles = {\n    container: {\n      fontFamily: 'system-ui, -apple-system, sans-serif',\n      padding: 24,\n      background: '#f8fafc',\n      minHeight: '100%',\n      color: '#1e293b'\n    },\n    header: {\n      fontSize: 22,\n      fontWeight: 700,\n      marginBottom: 16,\n      color: '#0f172a'\n    },\n    card: {\n      background: '#fff',\n      borderRadius: 12,\n      padding: 20,\n      marginBottom: 16,\n      boxShadow: '0 1px 3px rgba(0,0,0,0.08)',\n      border: '1px solid #e2e8f0'\n    },\n    cardTitle: {\n      fontSize: 14,\n      fontWeight: 600,\n      color: '#475569',\n      textTransform: 'uppercase',\n      letterSpacing: 0.5,\n      marginBottom: 12\n    },\n    counterRow: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 16,\n      marginTop: 8\n    },\n    countDisplay: {\n      fontSize: 32,\n      fontWeight: 700,\n      color: '#2563eb',\n      minWidth: 60,\n      textAlign: 'center'\n    },\n    btn: {\n      padding: '8px 16px',\n      borderRadius: 8,\n      border: 'none',\n      background: '#2563eb',\n      color: '#fff',\n      fontWeight: 600,\n      cursor: 'pointer',\n      fontSize: 14\n    },\n    btnSecondary: {\n      padding: '8px 16px',\n      borderRadius: 8,\n      border: '1px solid #cbd5e1',\n      background: '#fff',\n      color: '#475569',\n      fontWeight: 600,\n      cursor: 'pointer',\n      fontSize: 14\n    },\n    input: {\n      padding: '8px 12px',\n      borderRadius: 8,\n      border: '1px solid #cbd5e1',\n      fontSize: 14,\n      outline: 'none',\n      width: 200\n    },\n    list: {\n      listStyle: 'none',\n      padding: 0,\n      margin: '8px 0 0 0'\n    },\n    listItem: {\n      padding: '10px 12px',\n      background: '#f1f5f9',\n      borderRadius: 8,\n      marginBottom: 8,\n      fontSize: 14,\n      display: 'flex',\n      alignItems: 'center',\n      gap: 8\n    },\n    badge: {\n      background: '#dbeafe',\n      color: '#1d4ed8',\n      padding: '2px 8px',\n      borderRadius: 999,\n      fontSize: 11,\n      fontWeight: 600\n    },\n    tagline: {\n      fontSize: 13,\n      color: '#64748b',\n      marginTop: 4\n    }\n  };\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\u2699\uFE0F React App Skeleton</div>\n\n      <div style={styles.card}>\n        <div style={styles.cardTitle}>State Demo &mdash; Counter</div>\n        <div style={styles.tagline}>Demonstrates useState for reactive UI updates</div>\n        <div style={styles.counterRow}>\n          <button style={styles.btnSecondary} onClick={() => setCount(c => c - 1)}>-</button>\n          <div style={styles.countDisplay}>{count}</div>\n          <button style={styles.btn} onClick={() => setCount(c => c + 1)}>+</button>\n          <button style={styles.btnSecondary} onClick={() => setCount(0)}>Reset</button>\n        </div>\n      </div>\n\n      <div style={styles.card}>\n        <div style={styles.cardTitle}>Input Binding</div>\n        <div style={styles.tagline}>Two-way data binding with controlled input</div>\n        <input\n          style={styles.input}\n          value={name}\n          onChange={e => setName(e.target.value)}\n          placeholder=\"Enter project name\"\n        />\n        <div style={{ marginTop: 8, fontSize: 14, color: '#334155' }}>\n          Hello, <strong>{name}</strong>! This is a live-bound value.\n        </div>\n      </div>\n\n      <div style={styles.card}>\n        <div style={styles.cardTitle}>Component List</div>\n        <div style={styles.tagline}>Rendering arrays with .map() and keys</div>\n        <ul style={styles.list}>\n          {items.map((item, i) => (\n            <li key={i} style={styles.listItem}>\n              <span style={styles.badge}>{String(i + 1).padStart(2, '0')}</span>\n              {item}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\nrender(<AppSkeletonReact/>);",
  "placeholders": [{ "name": "REPLACE_WITH_PROJECT_NAME", "description": "Default project name shown in the input binding demo", "default": "Titan" }]
}