@vojtaholik/create-static-kit 1.0.7 → 2.0.0

package/templates/default/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc

@@ -1,218 +0,0 @@
----
-description: Convert inline Tailwind CSS utility classes to BEM-compliant @apply directives in CSS files
-globs: ["**/*"]
-alwaysApply: true
----
-
-# Tailwind CSS v4 @apply Conversion Specialist
-
-You are a Tailwind CSS v4 expert focused on converting inline utility classes to `@apply` directives in CSS files.
-
-## Core Rules
-
-### Tailwind CSS v4 Context
-
-- Always use `@import "tailwindcss";` syntax (not the old v3 @tailwind directives)
-- Understand that v4 uses CSS-first configuration and native CSS features
-- Recognize that @apply works the same but the import syntax has changed
-
-### @apply Conversion Guidelines
-
-#### MANDATORY CONVERSION RULE
-
-**ALWAYS convert inline utility classes to @apply when asked.** No exceptions, no questions, no debate about whether it's "worth it". If the user asks for conversion, you fucking do it.
-
-#### BEM Naming Convention
-
-**ALWAYS use BEM (Block Element Modifier) methodology for class names:**
-
-- **Block**: `.card`, `.button`, `.navbar`
-- **Element**: `.card__title`, `.card__content`, `.button__icon`
-- **Modifier**: `.card--primary`, `.button--large`, `.navbar--mobile`
-
-#### BEM Examples
-
-```css
-/* Block */
-.card {
-  @apply bg-white rounded-lg shadow-md p-6;
-}
-
-/* Element */
-.card__header {
-  @apply border-b border-gray-200 pb-4 mb-4;
-}
-
-.card__title {
-  @apply text-xl font-semibold text-gray-900;
-}
-
-.card__content {
-  @apply text-gray-600 leading-relaxed;
-}
-
-/* Modifier */
-.card--primary {
-  @apply border-l-4 border-blue-500;
-}
-
-.card--error {
-  @apply border-l-4 border-red-500 bg-red-50;
-}
-```
-
-#### Conversion Rules
-
-- **User request = immediate conversion** (no questioning)
-- Convert ANY utility classes when user requests it
-- Create BEM-compliant class names that describe component structure
-- Group related properties logically in @apply statements
-- Preserve responsive/state variants when complex
-
-#### Conversion Process
-
-1. **Identify the component structure**: Determine Block, Elements, and Modifiers
-2. **Create BEM class names**: Use semantic names that describe purpose and hierarchy
-3. **Group logically**: Organize related properties together in @apply statements
-4. **Preserve responsive/state variants**: Keep complex variants inline if needed
-
-#### Best Practices
-
-```css
-/* ✅ Good: BEM naming with logical grouping */
-.card {
-  @apply bg-white rounded-lg shadow-md;
-  @apply p-6 border border-gray-200;
-}
-
-.card--primary {
-  @apply border-l-4 border-blue-500;
-}
-
-.button {
-  @apply text-white font-medium px-4 py-2 rounded-md;
-  @apply transition-colors duration-200;
-}
-
-.button--primary {
-  @apply bg-blue-500 hover:bg-blue-600;
-}
-
-.button__icon {
-  @apply mr-2 w-4 h-4;
-}
-
-/* ❌ Bad: Non-BEM naming */
-.blue-rounded {
-  @apply bg-blue-500 rounded-md;
-}
-
-/* ❌ Bad: Non-semantic naming */
-.margin-top {
-  @apply mt-4;
-}
-```
-
-#### Handling Complex Cases
-
-- **Responsive variants**: Keep complex responsive logic inline, abstract base styles
-- **State variants**: Group base styles in @apply, keep interactive states inline when complex
-- **Component variants**: Create separate classes for different component states
-
-#### File Organization
-
-- Place @apply styles in the same file as the `@import "tailwindcss";`
-- Group related component styles together
-- Use comments to organize sections
-- Follow this structure:
-
-```css
-@import "tailwindcss";
-
-/* Base component styles */
-.card {
-  /* ... */
-}
-.button {
-  /* ... */
-}
-
-/* Layout components */
-.container {
-  /* ... */
-}
-.grid-layout {
-  /* ... */
-}
-
-/* Utility combinations */
-.form-input {
-  /* ... */
-}
-.error-text {
-  /* ... */
-}
-```
-
-### Conversion Examples
-
-#### Before (inline classes):
-
-```html
-<div
-  class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow"
->
-  <h2 class="text-xl font-semibold text-gray-900 mb-4">Card Title</h2>
-  <p class="text-gray-600 leading-relaxed">Card content</p>
-</div>
-```
-
-#### After (with @apply and BEM):
-
-```css
-.card {
-  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
-  @apply hover:shadow-lg transition-shadow;
-}
-
-.card__title {
-  @apply text-xl font-semibold text-gray-900 mb-4;
-}
-
-.card__content {
-  @apply text-gray-600 leading-relaxed;
-}
-```
-
-```html
-<div class="card">
-  <h2 class="card__title">Card Title</h2>
-  <p class="card__content">Card content</p>
-</div>
-```
-
-### Action Instructions
-
-When converting (MANDATORY when asked):
-
-1. **Analyze the HTML/JSX** for component structure and hierarchy
-2. **Create BEM class names** following Block\_\_Element--Modifier pattern
-3. **Show the CSS @apply implementation** with proper BEM organization
-4. **Provide the updated HTML** with new BEM class names
-5. **Explain the BEM structure** and benefits of the conversion
-
-Always prioritize:
-
-- **BEM naming convention** (Block\_\_Element--Modifier)
-- **Mandatory conversion** when user requests it
-- **Component hierarchy** in naming structure
-- **Logical grouping** of related properties in @apply statements
-- **Semantic naming** that describes purpose and structure
-
-### TypeScript Integration
-
-When working with TypeScript projects, consider:
-
-- Type-safe class name patterns
-- Component prop interfaces for style variants
-- Utility types for consistent naming conventions

package/templates/default/.cursor/rules/project-overview.mdc

@@ -1,30 +0,0 @@
----
-description: Static Kit project overview and general guidelines
-globs: ["**/*"]
-alwaysApply: true
----
-
-# Static Kit Framework
-
-Static site framework with TypeScript, SCSS, and HTML imports. Integrated with Figma MCP for design-to-dev workflow.
-
-## Core Principles
-
-- Use `@components/` prefix for imports, not relative paths
-- Follow lowercase kebab-case naming for files
-- Keep modules isolated and modular
-- Maintain clean separation between pages, components, and styles
-
-## Git Conventions
-
-### Commit Message Conventions
-
-- `feat: new component/page`
-- `style: scss changes`
-- `fix: bugfix`
-- `design-sync: figma-linked update`
-
-### Ignored Files
-
-- `dist/` - Build output
-- `static-kit.local.json` - Local configuration overrides

package/templates/default/.cursor/rules/public-assets.mdc

@@ -1,22 +0,0 @@
----
-description: Public assets organization and handling
-globs: ["public/**/*"]
-alwaysApply: false
----
-
-# Public Assets
-
-Static assets copied directly to dist/ with no processing. Organize into logical folders.
-
-## Organization
-
-- `public/images/` - Image assets
-- `public/fonts/` - Font files
-- `public/` - Other static assets
-
-## Guidelines
-
-- Assets are copied as-is to dist/
-- No build-time processing
-- Organize into meaningful subdirectories
-- Reference in development as `/<filename>` (no 'public' prefix needed)

package/templates/default/.cursor/rules/scss-styles.mdc

@@ -1,22 +0,0 @@
----
-description: SCSS styling conventions and import structure
-globs: ["src/styles/**/*.scss"]
-alwaysApply: false
----
-
-# SCSS Styles
-
-SCSS entrypoint is `src/styles/main.scss`. Component styles should be imported into main.scss.
-
-## Import Structure
-
-```scss
-@import "./components/button.scss";
-```
-
-## Guidelines
-
-- Main entrypoint: `src/styles/main.scss`
-- Import component styles into main.scss
-- Follow modular SCSS architecture
-- Keep component styles organized and focused

package/templates/default/.cursor/rules/svg-icons.mdc

@@ -1,22 +0,0 @@
----
-description: SVG icon naming and sprite conventions
-globs: ["src/icons/**/*.svg"]
-alwaysApply: false
----
-
-# SVG Icons
-
-SVG icons should use lowercase-kebab-case naming. Folder structure defines sprite ID namespace.
-
-## Naming Convention
-
-```
-src/icons/ui/arrow.svg → <use href="/sprite.svg#ui-arrow"></use>
-```
-
-## Guidelines
-
-- Use lowercase kebab-case for icon names
-- Folder structure creates namespace (ui/, social/, etc.)
-- Icons are compiled into sprite.svg
-- Reference using sprite ID format: `namespace-iconname`

package/templates/default/.cursor/rules/typescript-js.mdc

@@ -1,23 +0,0 @@
----
-description: TypeScript and JavaScript module conventions
-globs: ["src/js/**/*.ts", "src/js/**/*.js"]
-alwaysApply: false
----
-
-# TypeScript/JavaScript Modules
-
-Component-specific scripts go in `src/js/components/`. Keep modules isolated with no bundler-only imports.
-
-## File Organization
-
-```
-src/js/components/modal.ts
-```
-
-## Guidelines
-
-- Place component scripts in `src/js/components/`
-- Keep modules isolated and modular
-- Avoid bundler-only patterns
-- Use effective TypeScript for library-style code
-- Maintain clean module boundaries

package/templates/default/public/favicon.ico

@@ -1 +0,0 @@
-# Empty favicon placeholder

package/templates/default/src/components/button.html

@@ -1 +0,0 @@
-<a href="/about" class="button button--primary">Get Started</a>

package/templates/default/src/components/feature-card.html

@@ -1,8 +0,0 @@
-<div class="feature-card">
-  <div class="feature-card__icon">
-    <!-- SVG icon would go here -->
-    <div class="feature-placeholder">🚀</div>
-  </div>
-  <h3>Fast & Modern</h3>
-  <p>Built with Vite for lightning-fast development and optimized production builds.</p>
-</div>

package/templates/default/src/components/footer.html

@@ -1,5 +0,0 @@
-<footer class="footer">
-  <div class="container">
-    <p>&copy; 2024 Your Site. Built with Static Kit.</p>
-  </div>
-</footer>

package/templates/default/src/components/navigation.html

@@ -1,11 +0,0 @@
-<header class="header">
-  <nav class="nav">
-    <div class="nav-brand">
-      <a href="/">Static Kit</a>
-    </div>
-    <div class="nav-links">
-      <a href="/">Home</a>
-      <a href="/about">About</a>
-    </div>
-  </nav>
-</header>

package/templates/default/src/icons/ui/star.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/templates/default/src/js/index.ts

@@ -1,28 +0,0 @@
-// Main JavaScript entry point
-console.log("Static Kit is ready! 🚀");
-
-// Example: Add smooth scrolling for anchor links
-document.addEventListener("DOMContentLoaded", () => {
-  // Add click handlers for navigation links
-  const navLinks = document.querySelectorAll('.nav-links a');
-  
-  navLinks.forEach(link => {
-    link.addEventListener('click', () => {
-      console.log(`Navigating to: ${link.getAttribute('href')}`);
-    });
-  });
-  
-  // Example: Add some interactivity to feature cards
-  const featureCards = document.querySelectorAll('.feature-card');
-  
-  featureCards.forEach(card => {
-    const htmlCard = card as HTMLElement;
-    htmlCard.addEventListener('mouseenter', () => {
-      htmlCard.style.transform = 'translateY(-4px)';
-    });
-    
-    htmlCard.addEventListener('mouseleave', () => {
-      htmlCard.style.transform = 'translateY(0)';
-    });
-  });
-});

package/templates/default/src/pages/about.html

@@ -1,24 +0,0 @@
-<!-- @import: @components/navigation.html -->
-
-<main class="container">
-  <h1>About Static Kit</h1>
-  
-  <section>
-    <p>Static Kit is a modern static site generator that combines the simplicity of HTML with the power of modern build tools.</p>
-    
-    <h2>Why Static Kit?</h2>
-    <ul>
-      <li>Zero configuration - just start building</li>
-      <li>Component-driven development</li>
-      <li>Modern developer experience</li>
-      <li>Deployable anywhere</li>
-    </ul>
-  </section>
-  
-  <section>
-    <h2>Built With</h2>
-    <p>Static Kit uses Vite, TypeScript, and SCSS under the hood to provide a fast and modern development experience.</p>
-  </section>
-</main>
-
-<!-- @import: @components/footer.html -->

package/templates/default/src/pages/index.html

@@ -1,23 +0,0 @@
-<!-- @import: @components/navigation.html -->
-
-<section class="hero">
-  <div class="hero-content">
-    <h1>Welcome to Static Kit</h1>
-    <p>A simple, no-bullshit static site framework with TypeScript, SCSS, and HTML imports.</p>
-    
-    <!-- @import: @components/button.html -->
-  </div>
-</section>
-
-<section class="features">
-  <div class="container">
-    <h2>Features</h2>
-    <div class="feature-grid">
-      <!-- @import: @components/feature-card.html -->
-      <!-- @import: @components/feature-card.html -->
-      <!-- @import: @components/feature-card.html -->
-    </div>
-  </div>
-</section>
-
-<!-- @import: @components/footer.html -->

package/templates/default/src/styles/main.scss

@@ -1,210 +0,0 @@
-// Modern CSS Reset
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-}
-
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  font-family: system-ui, sans-serif;
-  color: #1f2937;
-}
-
-img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-}
-
-// Utilities
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-// Header & Navigation
-.header {
-  background: #ffffff;
-  border-bottom: 1px solid #e5e7eb;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.nav-brand a {
-  font-weight: 700;
-  font-size: 1.25rem;
-  text-decoration: none;
-  color: #0066cc;
-}
-
-.nav-links {
-  display: flex;
-  gap: 2rem;
-  
-  a {
-    text-decoration: none;
-    color: #6b7280;
-    font-weight: 500;
-    transition: color 0.2s;
-    
-    &:hover {
-      color: #0066cc;
-    }
-  }
-}
-
-// Hero Section
-.hero {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 4rem 1rem;
-  text-align: center;
-}
-
-.hero-content {
-  max-width: 600px;
-  margin: 0 auto;
-  
-  h1 {
-    font-size: 3rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    line-height: 1.2;
-  }
-  
-  p {
-    font-size: 1.25rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-  }
-}
-
-// Button Component
-.button {
-  display: inline-block;
-  padding: 0.75rem 2rem;
-  font-weight: 600;
-  text-decoration: none;
-  border-radius: 0.5rem;
-  transition: all 0.2s;
-  cursor: pointer;
-  border: none;
-  
-  &--primary {
-    background: #ffffff;
-    color: #0066cc;
-    
-    &:hover {
-      background: #f8f9fa;
-      transform: translateY(-1px);
-    }
-  }
-}
-
-// Features Section
-.features {
-  padding: 4rem 1rem;
-  background: #f9fafb;
-  
-  h2 {
-    text-align: center;
-    font-size: 2.5rem;
-    margin-bottom: 3rem;
-    color: #1f2937;
-  }
-}
-
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.feature-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  text-align: center;
-  
-  &__icon {
-    margin-bottom: 1rem;
-  }
-  
-  .feature-placeholder {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-  }
-  
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: #1f2937;
-  }
-  
-  p {
-    color: #6b7280;
-    line-height: 1.6;
-  }
-}
-
-// Main Content
-main {
-  padding: 3rem 1rem;
-  
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-    color: #1f2937;
-  }
-  
-  h2 {
-    font-size: 1.875rem;
-    margin: 2rem 0 1rem;
-    color: #374151;
-  }
-  
-  section {
-    margin-bottom: 2rem;
-  }
-  
-  ul {
-    padding-left: 1.5rem;
-    
-    li {
-      margin-bottom: 0.5rem;
-      color: #4b5563;
-    }
-  }
-  
-  p {
-    margin-bottom: 1rem;
-    color: #4b5563;
-    line-height: 1.7;
-  }
-}
-
-// Footer
-.footer {
-  background: #1f2937;
-  color: #9ca3af;
-  padding: 2rem 1rem;
-  text-align: center;
-}

package/templates/default/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}