valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update README and GEMINI with favicon app and PWA info

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-26 18:39:15 +01:00
parent 283855d7a3
commit a3ef948600
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
GEMINI.md
View File

@@ -4,12 +4,15 @@ This file provides foundational context and instructions for Gemini CLI when wor
## 🚀 Project Overview ## 🚀 Project Overview
**Kit UI** is a high-performance, aesthetically pleasing toolkit built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**. It provides four core specialized applications: **Kit UI** is a high-performance, aesthetically pleasing toolkit built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**. It provides five core specialized applications:
1. **Color**: Advanced color theory, manipulation, and accessibility suite powered by `@valknarthing/pastel-wasm`. 1. **Color**: Advanced color theory, manipulation, and accessibility suite powered by `@valknarthing/pastel-wasm`.
2. **Units**: Smart unit converter supporting 187+ units across 23 categories, including a custom `tempo` measure. 2. **Units**: Smart unit converter supporting 187+ units across 23 categories, including a custom `tempo` measure.
3. **ASCII**: ASCII Art generator with 373 fonts and multi-format export. 3. **ASCII**: ASCII Art generator with 373 fonts and multi-format export.
4. **Media**: Browser-based file converter using **FFmpeg** and **ImageMagick** via WebAssembly (Zero server uploads). 4. **Media**: Browser-based file converter using **FFmpeg** and **ImageMagick** via WebAssembly.
5. **Favicon**: Asset generator for web icons, PWA manifests, and HTML snippet headers.
**PWA Capabilities**: The toolkit is a fully functional Progressive Web App with service worker integration for offline usage of WASM-based tools.
## 🛠️ Tech Stack & Architecture ## 🛠️ Tech Stack & Architecture
@@ -26,16 +29,18 @@ This file provides foundational context and instructions for Gemini CLI when wor
```bash ```bash
. .
├── app/ # Next.js App Router ├── app/ # Next.js App Router
│ ├── (app)/ # Core Tool Pages (color, units, ascii, media) │ ├── (app)/ # Core Tool Pages (color, units, ascii, media, favicon)
│ ├── manifest.ts # PWA manifest generation
│ └── globals.css # Tailwind 4 configuration & global styles │ └── globals.css # Tailwind 4 configuration & global styles
├── components/ # UI Components ├── components/ # UI Components
│ ├── [tool]/ # Tool-specific components (e.g., components/color/) │ ├── [tool]/ # Tool-specific components (e.g., components/color/, components/favicon/)
│ ├── layout/ # AppShell, Sidebar, Header │ ├── layout/ # AppShell, Sidebar, Header
│ └── ui/ # Base Atomic Components (shadcn) │ └── ui/ # Base Atomic Components (shadcn)
├── lib/ # Business Logic ├── lib/ # Business Logic
│ ├── [tool]/ # Tool-specific logic & WASM wrappers │ ├── [tool]/ # Tool-specific logic & WASM wrappers
│ └── utils/ # General utilities (cn, format, etc.) │ └── utils/ # General utilities (cn, format, etc.)
├── public/ # Static assets ├── public/ # Static assets
│ ├── sw.js # Service worker for PWA offline support
│ ├── wasm/ # WASM binaries (ffmpeg, imagemagick) │ ├── wasm/ # WASM binaries (ffmpeg, imagemagick)
│ └── fonts/ # ASCII fonts (.flf) │ └── fonts/ # ASCII fonts (.flf)
└── types/ # TypeScript definitions └── types/ # TypeScript definitions

17
README.md
View File

@@ -13,7 +13,7 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers
## 🚀 The Toolkit ## 🚀 The Toolkit
Kit UI is divided into four core specialized applications: Kit UI is divided into five core specialized applications:
### 🎨 [Color](./app/(app)/color) — Professional Color Toolkit ### 🎨 [Color](./app/(app)/color) — Professional Color Toolkit
A comprehensive suite for color theory, manipulation, and accessibility. A comprehensive suite for color theory, manipulation, and accessibility.
@@ -43,12 +43,20 @@ Privacy-first, local-only media conversion powered by WebAssembly.
- **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy. - **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy.
- **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets. - **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets.
### 🌐 [Favicon](./app/(app)/favicon) — Favicon & PWA Generator
Complete asset generation for modern web presence.
- **Complete Icon Set**: Generates standard favicons, Apple Touch icons, and Android Chrome icons.
- **PWA Manifest**: Automatically generates a standards-compliant `site.webmanifest`.
- **HTML Snippets**: Copy-paste ready `<head>` tags for easy integration.
- **Privacy-First**: Powered by ImageMagick WASM—no server-side processing.
--- ---
## ✨ Core Features ## ✨ Core Features
- 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions. - 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions.
- ⚡ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine. - ⚡ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine.
- 📱 **Full PWA Support**: Installable application with offline usage capabilities and service worker integration.
- ♿ **Accessibility First**: Integrated tools to ensure your designs meet global standards. - ♿ **Accessibility First**: Integrated tools to ensure your designs meet global standards.
- 📱 **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop. - 📱 **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop.
- 🛠️ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing. - 🛠️ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing.
@@ -73,19 +81,22 @@ Privacy-first, local-only media conversion powered by WebAssembly.
```bash ```bash
. .
├── app/ # Next.js App Router (Pages & Layouts) ├── app/ # Next.js App Router (Pages & Layouts)
│ ├── (app)/ # Core Tool Pages (Color, Units, ASCII, Media) │ ├── (app)/ # Core Tool Pages (Color, Units, ASCII, Media, Favicon)
│ ├── manifest.ts # PWA manifest generation
│ └── api/ # Backend API routes │ └── api/ # Backend API routes
├── components/ # Reusable UI & Logic Components ├── components/ # Reusable UI & Logic Components
│ ├── color/ # Color-specific components │ ├── color/ # Color-specific components
│ ├── units/ # Converter-specific components │ ├── units/ # Converter-specific components
│ ├── ascii/ # ASCII-specific components │ ├── ascii/ # ASCII-specific components
│ ├── media/ # Media conversion components │ ├── media/ # Media conversion components
│ ├── favicon/ # Favicon-specific components
│ └── ui/ # Base Atomic Components (Buttons, Cards, etc.) │ └── ui/ # Base Atomic Components (Buttons, Cards, etc.)
├── lib/ # Business Logic & Utilities ├── lib/ # Business Logic & Utilities
│ ├── color/ # WASM wrappers & Color logic │ ├── color/ # WASM wrappers & Color logic
│ ├── units/ # Conversion algorithms │ ├── units/ # Conversion algorithms
│ ├── ascii/ # Font loading & ASCII generation │ ├── ascii/ # Font loading & ASCII generation
│ └── media/ # FFmpeg & ImageMagick WASM orchestration │ ├── media/ # FFmpeg & ImageMagick WASM orchestration
│ └── favicon/ # Favicon generation logic
├── public/ # Static assets & ASCII fonts ├── public/ # Static assets & ASCII fonts
├── Dockerfile # Multi-stage Docker build ├── Dockerfile # Multi-stage Docker build
└── nginx.conf # Production Nginx configuration └── nginx.conf # Production Nginx configuration