fraim-framework 2.0.42 → 2.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fraim-framework",
3
- "version": "2.0.42",
3
+ "version": "2.0.44",
4
4
  "description": "FRAIM v2: Framework for Rigor-based AI Management - Transform from solo developer to AI manager orchestrating production-ready code with enterprise-grade discipline",
5
5
  "main": "index.js",
6
6
  "bin": {
@@ -0,0 +1,547 @@
1
+ #!/usr/bin/env node
2
+
3
+ /**
4
+ * Website Structure Creator
5
+ *
6
+ * This script creates the basic file structure for a modern website project
7
+ * following the FRAIM website creation workflow.
8
+ */
9
+
10
+ const fs = require('fs');
11
+ const path = require('path');
12
+
13
+ function createWebsiteStructure(projectName, outputDir = '.') {
14
+ const websiteDir = path.join(outputDir, projectName);
15
+
16
+ // Create main directory
17
+ if (!fs.existsSync(websiteDir)) {
18
+ fs.mkdirSync(websiteDir, { recursive: true });
19
+ }
20
+
21
+ // Create subdirectories
22
+ const dirs = [
23
+ 'assets',
24
+ 'assets/images',
25
+ 'assets/icons',
26
+ 'css',
27
+ 'js',
28
+ 'docs'
29
+ ];
30
+
31
+ dirs.forEach(dir => {
32
+ const dirPath = path.join(websiteDir, dir);
33
+ if (!fs.existsSync(dirPath)) {
34
+ fs.mkdirSync(dirPath, { recursive: true });
35
+ }
36
+ });
37
+
38
+ // Create basic HTML structure
39
+ const indexHtml = `<!DOCTYPE html>
40
+ <html lang="en">
41
+ <head>
42
+ <meta charset="UTF-8">
43
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
44
+ <title>${projectName} - Modern Web Experience</title>
45
+ <meta name="description" content="Modern, responsive website for ${projectName}">
46
+ <link rel="stylesheet" href="css/styles.css">
47
+ </head>
48
+ <body>
49
+ <!-- Navigation -->
50
+ <nav class="nav">
51
+ <div class="nav-container">
52
+ <div class="nav-logo">
53
+ <span class="logo-text">${projectName}</span>
54
+ </div>
55
+ <div class="nav-links">
56
+ <a href="#features">Features</a>
57
+ <a href="#about">About</a>
58
+ <a href="#contact">Contact</a>
59
+ <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
60
+ <span class="theme-icon">🌙</span>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="hero">
68
+ <div class="hero-container">
69
+ <h1 class="hero-title">
70
+ Welcome to <span class="gradient-text">${projectName}</span>
71
+ </h1>
72
+ <p class="hero-subtitle">
73
+ Your modern web experience starts here. Built with performance, accessibility, and user experience in mind.
74
+ </p>
75
+ <div class="hero-cta">
76
+ <a href="#get-started" class="btn-primary">Get Started</a>
77
+ <a href="#learn-more" class="btn-secondary">Learn More</a>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Features Section -->
83
+ <section id="features" class="features">
84
+ <div class="container">
85
+ <h2 class="section-title">Key Features</h2>
86
+ <div class="features-grid">
87
+ <div class="feature-card">
88
+ <div class="feature-icon">⚡</div>
89
+ <h3>Fast Performance</h3>
90
+ <p>Optimized for speed and efficiency</p>
91
+ </div>
92
+ <div class="feature-card">
93
+ <div class="feature-icon">📱</div>
94
+ <h3>Mobile Responsive</h3>
95
+ <p>Perfect experience on all devices</p>
96
+ </div>
97
+ <div class="feature-card">
98
+ <div class="feature-icon">🎨</div>
99
+ <h3>Modern Design</h3>
100
+ <p>Beautiful, contemporary interface</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <script src="js/script.js"></script>
107
+ </body>
108
+ </html>`;
109
+
110
+ // Create basic CSS with CSS variables for theming
111
+ const stylesCSS = `/* CSS Variables for theming */
112
+ :root {
113
+ --bg-primary: #ffffff;
114
+ --bg-secondary: #f8fafc;
115
+ --text-primary: #1a1a1a;
116
+ --text-secondary: #666666;
117
+ --accent-color: #6366f1;
118
+ --border-color: #e5e5e5;
119
+ }
120
+
121
+ [data-theme="dark"] {
122
+ --bg-primary: #0f172a;
123
+ --bg-secondary: #1e293b;
124
+ --text-primary: #f8fafc;
125
+ --text-secondary: #cbd5e1;
126
+ --border-color: #334155;
127
+ }
128
+
129
+ /* Reset and base styles */
130
+ * {
131
+ margin: 0;
132
+ padding: 0;
133
+ box-sizing: border-box;
134
+ }
135
+
136
+ body {
137
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
138
+ line-height: 1.6;
139
+ color: var(--text-primary);
140
+ background: var(--bg-primary);
141
+ transition: background-color 0.3s ease, color 0.3s ease;
142
+ }
143
+
144
+ .container {
145
+ max-width: 1200px;
146
+ margin: 0 auto;
147
+ padding: 0 24px;
148
+ }
149
+
150
+ /* Navigation */
151
+ .nav {
152
+ position: fixed;
153
+ top: 0;
154
+ width: 100%;
155
+ background: rgba(255, 255, 255, 0.95);
156
+ backdrop-filter: blur(10px);
157
+ border-bottom: 1px solid var(--border-color);
158
+ z-index: 1000;
159
+ }
160
+
161
+ .nav-container {
162
+ max-width: 1200px;
163
+ margin: 0 auto;
164
+ padding: 0 24px;
165
+ display: flex;
166
+ justify-content: space-between;
167
+ align-items: center;
168
+ height: 64px;
169
+ }
170
+
171
+ .nav-links {
172
+ display: flex;
173
+ align-items: center;
174
+ gap: 32px;
175
+ }
176
+
177
+ .nav-links a {
178
+ text-decoration: none;
179
+ color: var(--text-secondary);
180
+ font-weight: 500;
181
+ transition: color 0.2s;
182
+ }
183
+
184
+ .nav-links a:hover {
185
+ color: var(--text-primary);
186
+ }
187
+
188
+ .theme-toggle {
189
+ background: none;
190
+ border: 2px solid var(--border-color);
191
+ border-radius: 8px;
192
+ padding: 8px 12px;
193
+ cursor: pointer;
194
+ transition: all 0.2s ease;
195
+ }
196
+
197
+ .theme-toggle:hover {
198
+ border-color: var(--accent-color);
199
+ }
200
+
201
+ /* Hero Section */
202
+ .hero {
203
+ padding: 120px 0 80px;
204
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
205
+ text-align: center;
206
+ }
207
+
208
+ .hero-title {
209
+ font-size: 56px;
210
+ font-weight: 700;
211
+ margin-bottom: 24px;
212
+ }
213
+
214
+ .gradient-text {
215
+ background: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%);
216
+ -webkit-background-clip: text;
217
+ -webkit-text-fill-color: transparent;
218
+ background-clip: text;
219
+ }
220
+
221
+ .hero-subtitle {
222
+ font-size: 20px;
223
+ color: var(--text-secondary);
224
+ margin-bottom: 32px;
225
+ max-width: 600px;
226
+ margin-left: auto;
227
+ margin-right: auto;
228
+ }
229
+
230
+ .hero-cta {
231
+ display: flex;
232
+ gap: 16px;
233
+ justify-content: center;
234
+ flex-wrap: wrap;
235
+ }
236
+
237
+ .btn-primary, .btn-secondary {
238
+ padding: 12px 24px;
239
+ border-radius: 8px;
240
+ text-decoration: none;
241
+ font-weight: 600;
242
+ transition: all 0.2s;
243
+ display: inline-block;
244
+ }
245
+
246
+ .btn-primary {
247
+ background: var(--accent-color);
248
+ color: white;
249
+ }
250
+
251
+ .btn-primary:hover {
252
+ transform: translateY(-1px);
253
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
254
+ }
255
+
256
+ .btn-secondary {
257
+ background: transparent;
258
+ color: var(--accent-color);
259
+ border: 2px solid var(--accent-color);
260
+ }
261
+
262
+ .btn-secondary:hover {
263
+ background: var(--accent-color);
264
+ color: white;
265
+ }
266
+
267
+ /* Features Section */
268
+ .features {
269
+ padding: 80px 0;
270
+ }
271
+
272
+ .section-title {
273
+ font-size: 40px;
274
+ font-weight: 700;
275
+ text-align: center;
276
+ margin-bottom: 64px;
277
+ }
278
+
279
+ .features-grid {
280
+ display: grid;
281
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
282
+ gap: 32px;
283
+ }
284
+
285
+ .feature-card {
286
+ background: var(--bg-secondary);
287
+ padding: 32px;
288
+ border-radius: 16px;
289
+ text-align: center;
290
+ transition: transform 0.2s;
291
+ }
292
+
293
+ .feature-card:hover {
294
+ transform: translateY(-4px);
295
+ }
296
+
297
+ .feature-icon {
298
+ font-size: 48px;
299
+ margin-bottom: 16px;
300
+ }
301
+
302
+ .feature-card h3 {
303
+ font-size: 24px;
304
+ margin-bottom: 12px;
305
+ }
306
+
307
+ .feature-card p {
308
+ color: var(--text-secondary);
309
+ }
310
+
311
+ /* Responsive Design */
312
+ @media (max-width: 768px) {
313
+ .hero-title {
314
+ font-size: 40px;
315
+ }
316
+
317
+ .nav-links {
318
+ gap: 16px;
319
+ }
320
+
321
+ .hero-cta {
322
+ flex-direction: column;
323
+ align-items: center;
324
+ }
325
+
326
+ .features-grid {
327
+ grid-template-columns: 1fr;
328
+ }
329
+ }`;
330
+
331
+ // Create basic JavaScript for theme toggle
332
+ const scriptJS = `// Theme toggle functionality
333
+ document.addEventListener('DOMContentLoaded', function() {
334
+ const themeToggle = document.getElementById('theme-toggle');
335
+ const themeIcon = themeToggle.querySelector('.theme-icon');
336
+
337
+ // Check for saved theme preference or default to system preference
338
+ const savedTheme = localStorage.getItem('theme');
339
+ const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
340
+ const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
341
+
342
+ // Apply initial theme
343
+ document.documentElement.setAttribute('data-theme', initialTheme);
344
+ updateThemeIcon(initialTheme);
345
+
346
+ // Theme toggle event listener
347
+ themeToggle.addEventListener('click', () => {
348
+ const currentTheme = document.documentElement.getAttribute('data-theme');
349
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
350
+
351
+ document.documentElement.setAttribute('data-theme', newTheme);
352
+ localStorage.setItem('theme', newTheme);
353
+ updateThemeIcon(newTheme);
354
+ });
355
+
356
+ function updateThemeIcon(theme) {
357
+ themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
358
+ }
359
+
360
+ // Listen for system theme changes
361
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
362
+ if (!localStorage.getItem('theme')) {
363
+ const newTheme = e.matches ? 'dark' : 'light';
364
+ document.documentElement.setAttribute('data-theme', newTheme);
365
+ updateThemeIcon(newTheme);
366
+ }
367
+ });
368
+
369
+ // Smooth scrolling for navigation links
370
+ const navLinks = document.querySelectorAll('a[href^="#"]');
371
+ navLinks.forEach(link => {
372
+ link.addEventListener('click', function(e) {
373
+ e.preventDefault();
374
+ const targetId = this.getAttribute('href');
375
+ const targetSection = document.querySelector(targetId);
376
+
377
+ if (targetSection) {
378
+ const offsetTop = targetSection.offsetTop - 80; // Account for fixed nav
379
+ window.scrollTo({
380
+ top: offsetTop,
381
+ behavior: 'smooth'
382
+ });
383
+ }
384
+ });
385
+ });
386
+ });`;
387
+
388
+ // Create README
389
+ const readmeMD = `# ${projectName} Website
390
+
391
+ Modern, responsive website built following FRAIM website creation workflow.
392
+
393
+ ## Features
394
+
395
+ - 🌓 Dark/Light mode toggle with system preference detection
396
+ - 📱 Fully responsive design
397
+ - ⚡ Performance optimized
398
+ - ♿ Accessibility focused
399
+ - 🎨 Modern design with CSS variables
400
+ - 🚀 Ready for deployment
401
+
402
+ ## Development
403
+
404
+ ### Local Development
405
+ 1. Open \`index.html\` in your browser
406
+ 2. Or use a local server:
407
+ \`\`\`bash
408
+ # Python
409
+ python -m http.server 8000
410
+
411
+ # Node.js
412
+ npx serve .
413
+
414
+ # VS Code Live Server extension
415
+ \`\`\`
416
+
417
+ ### File Structure
418
+ \`\`\`
419
+ ${projectName}/
420
+ ├── index.html # Main page
421
+ ├── css/
422
+ │ └── styles.css # Main stylesheet
423
+ ├── js/
424
+ │ └── script.js # JavaScript functionality
425
+ ├── assets/
426
+ │ ├── images/ # Image assets
427
+ │ └── icons/ # Icon assets
428
+ └── docs/
429
+ └── README.md # This file
430
+ \`\`\`
431
+
432
+ ## Customization
433
+
434
+ ### Colors
435
+ Edit CSS variables in \`css/styles.css\`:
436
+ \`\`\`css
437
+ :root {
438
+ --bg-primary: #ffffff;
439
+ --bg-secondary: #f8fafc;
440
+ --text-primary: #1a1a1a;
441
+ --text-secondary: #666666;
442
+ --accent-color: #6366f1;
443
+ --border-color: #e5e5e5;
444
+ }
445
+ \`\`\`
446
+
447
+ ### Content
448
+ - Update text content in \`index.html\`
449
+ - Add images to \`assets/images/\`
450
+ - Modify styles in \`css/styles.css\`
451
+ - Add functionality in \`js/script.js\`
452
+
453
+ ## Deployment
454
+
455
+ ### GitHub Pages
456
+ 1. Push to GitHub repository
457
+ 2. Enable GitHub Pages in repository settings
458
+ 3. Select "GitHub Actions" as source
459
+
460
+ ### Netlify
461
+ 1. Connect GitHub repository
462
+ 2. Set build command: (none for static site)
463
+ 3. Set publish directory: \`.\`
464
+
465
+ ### Vercel
466
+ 1. Import GitHub repository
467
+ 2. Deploy with default settings
468
+
469
+ ## Performance
470
+
471
+ - Optimized CSS with minimal dependencies
472
+ - Vanilla JavaScript (no heavy frameworks)
473
+ - Responsive images
474
+ - Efficient animations
475
+
476
+ ## Browser Support
477
+
478
+ - Chrome (latest 2 versions)
479
+ - Firefox (latest 2 versions)
480
+ - Safari (latest 2 versions)
481
+ - Edge (latest 2 versions)
482
+ - Mobile browsers
483
+
484
+ ## License
485
+
486
+ [Add your license here]
487
+ `;
488
+
489
+ // Write files
490
+ fs.writeFileSync(path.join(websiteDir, 'index.html'), indexHtml);
491
+ fs.writeFileSync(path.join(websiteDir, 'css', 'styles.css'), stylesCSS);
492
+ fs.writeFileSync(path.join(websiteDir, 'js', 'script.js'), scriptJS);
493
+ fs.writeFileSync(path.join(websiteDir, 'README.md'), readmeMD);
494
+
495
+ // Create .gitignore
496
+ const gitignore = `# Dependencies
497
+ node_modules/
498
+ npm-debug.log*
499
+
500
+ # Build outputs
501
+ dist/
502
+ build/
503
+
504
+ # Environment variables
505
+ .env
506
+ .env.local
507
+
508
+ # IDE files
509
+ .vscode/
510
+ .idea/
511
+ *.swp
512
+ *.swo
513
+
514
+ # OS files
515
+ .DS_Store
516
+ Thumbs.db
517
+
518
+ # Logs
519
+ *.log
520
+ `;
521
+ fs.writeFileSync(path.join(websiteDir, '.gitignore'), gitignore);
522
+
523
+ console.log(`✅ Website structure created successfully!`);
524
+ console.log(`📁 Project directory: ${websiteDir}`);
525
+ console.log(`🚀 Next steps:`);
526
+ console.log(` 1. cd ${projectName}`);
527
+ console.log(` 2. Open index.html in your browser`);
528
+ console.log(` 3. Start customizing your website!`);
529
+ console.log(` 4. Follow the FRAIM website creation workflow for best practices`);
530
+ }
531
+
532
+ // CLI usage
533
+ if (require.main === module) {
534
+ const args = process.argv.slice(2);
535
+ const projectName = args[0];
536
+ const outputDir = args[1] || '.';
537
+
538
+ if (!projectName) {
539
+ console.log('Usage: node create-website-structure.js <project-name> [output-directory]');
540
+ console.log('Example: node create-website-structure.js my-awesome-website');
541
+ process.exit(1);
542
+ }
543
+
544
+ createWebsiteStructure(projectName, outputDir);
545
+ }
546
+
547
+ module.exports = { createWebsiteStructure };
@@ -0,0 +1,11 @@
1
+ # FRAIM Workflow: create-modern-website
2
+
3
+ > [!IMPORTANT]
4
+ > This is a **FRAIM-managed workflow stub**.
5
+ > To load the full context (rules, templates, and execution steps), ask your AI agent to:
6
+ > `@fraim get_fraim_workflow("create-modern-website")`
7
+ >
8
+ > DO NOT EXECUTE.
9
+
10
+ ## Intent
11
+ To create modern, appealing, and valuable websites that showcase key value propositions and use cases for any product, leveraging competitive analysis and user preferences to deliver professional, conversion-focused web experiences.
@@ -0,0 +1,11 @@
1
+ # FRAIM Workflow: domain-registration
2
+
3
+ > [!IMPORTANT]
4
+ > This is a **FRAIM-managed workflow stub**.
5
+ > To load the full context (rules, templates, and execution steps), ask your AI agent to:
6
+ > `@fraim get_fraim_workflow("domain-registration")`
7
+ >
8
+ > DO NOT EXECUTE.
9
+
10
+ ## Intent
11
+ To systematically research, evaluate, and recommend domain names for the product, including competitive pricing analysis across major registrars and structured decision-making templates.