docs: update README with all 7 tools and current project structure
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
63
README.md
63
README.md
@@ -5,7 +5,7 @@
|
||||
[](https://react.dev)
|
||||
[](https://tailwindcss.com)
|
||||
|
||||
**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative tools—from advanced color manipulation to ASCII art generation—into a single, unified workspace.
|
||||
**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative tools—from color manipulation and CSS animation editing to ASCII art generation—into a single, unified workspace.
|
||||
|
||||
Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility.
|
||||
|
||||
@@ -13,42 +13,51 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers
|
||||
|
||||
## 🚀 The Toolkit
|
||||
|
||||
Kit UI is divided into five core specialized applications:
|
||||
Kit UI currently ships **7 tools**:
|
||||
|
||||
### 🎨 [Color](./app/(app)/color) — Professional Color Toolkit
|
||||
A comprehensive suite for color theory, manipulation, and accessibility.
|
||||
### 🎨 [Color](./app/(app)/color) — Color Manipulation
|
||||
Modern color manipulation toolkit with palette generation and format conversion.
|
||||
- **Color Playground**: Interactive HSL/RGB/HEX manipulation with real-time analysis.
|
||||
- **Accessibility Suite**: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator.
|
||||
- **Generative Tools**: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect.
|
||||
- **Batch Processing**: Perform mass color operations and exports.
|
||||
- **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations.
|
||||
|
||||
### 📐 [Units](./app/(app)/units) — Smart Unit Converter
|
||||
A powerful, intuitive converter that understands the way you work.
|
||||
- **187+ Units**: Supporting 23 categories including Length, Mass, Temperature, Force, and more.
|
||||
- **Smart Search**: Quickly find units via a fuzzy-search command palette.
|
||||
- **Visual Comparison**: Dynamic chart views for comparing scale across different units.
|
||||
### 📐 [Units](./app/(app)/units) — Units Converter
|
||||
Smart unit converter with 187 units across 23 categories.
|
||||
- **187+ Units**: Length, Mass, Temperature, Force, Digital Storage, and more.
|
||||
- **Real-time Bidirectional Conversion**: Instant results as you type with fuzzy search.
|
||||
- **Favorites & History**: Save your most-used conversions for instant access.
|
||||
|
||||
### ✍️ [ASCII](./app/(app)/ascii) — ASCII Art Generator
|
||||
Retro-inspired text banners for terminals and documentation.
|
||||
Create stunning text banners, terminal art, and retro designs.
|
||||
- **373 Fonts**: From classic `Standard` to complex 3D and cursive styles.
|
||||
- **Real-time Preview**: See your ASCII art transform as you type.
|
||||
- **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images.
|
||||
|
||||
### 🎬 [Media](./app/(app)/media) — Browser-Based File Converter
|
||||
### 🎬 [Media](./app/(app)/media) — Media Converter
|
||||
Privacy-first, local-only media conversion powered by WebAssembly.
|
||||
- **Video & Audio**: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg.
|
||||
- **Image Processing**: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick.
|
||||
- **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy.
|
||||
- **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets.
|
||||
- **Zero Server Uploads**: All processing happens locally in your browser.
|
||||
|
||||
### 🌐 [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.
|
||||
### 🌐 [Favicon](./app/(app)/favicon) — Favicon Generator
|
||||
Complete favicon and PWA asset generation for modern web presence.
|
||||
- **Complete Icon Set**: 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.
|
||||
|
||||
### 🔲 [QR Code](./app/(app)/qrcode) — QR Code Generator
|
||||
Generate QR codes with live preview and full customization.
|
||||
- **Custom Colors**: Foreground, background, and logo overlay support.
|
||||
- **Error Correction**: Configurable L / M / Q / H error correction levels.
|
||||
- **Export**: Download as PNG or SVG directly from the browser.
|
||||
|
||||
### 🎞️ [Animate](./app/(app)/animate) — CSS Animation Editor
|
||||
Visual editor for CSS `@keyframe` animations with live preview and export.
|
||||
- **Visual Keyframe Timeline**: Drag keyframes, set per-frame transforms and visual properties.
|
||||
- **20+ Built-in Presets**: Entrance, exit, attention seekers, and special effects.
|
||||
- **Live Preview**: Real-time preview with speed control and element selector.
|
||||
- **Export**: Plain CSS or Tailwind v4 `@utility` format.
|
||||
|
||||
---
|
||||
|
||||
@@ -81,22 +90,26 @@ Complete asset generation for modern web presence.
|
||||
```bash
|
||||
.
|
||||
├── app/ # Next.js App Router (Pages & Layouts)
|
||||
│ ├── (app)/ # Core Tool Pages (Color, Units, ASCII, Media, Favicon)
|
||||
│ ├── (app)/ # Tool pages (color, units, ascii, media, favicon, qrcode, animate)
|
||||
│ ├── manifest.ts # PWA manifest generation
|
||||
│ └── api/ # Backend API routes
|
||||
├── components/ # Reusable UI & Logic Components
|
||||
│ ├── color/ # Color-specific components
|
||||
│ ├── color/ # Color-specific components
|
||||
│ ├── units/ # Converter-specific components
|
||||
│ ├── ascii/ # ASCII-specific components
|
||||
│ ├── ascii/ # ASCII-specific components
|
||||
│ ├── media/ # Media conversion components
|
||||
│ ├── favicon/ # Favicon-specific components
|
||||
│ ├── favicon/ # Favicon-specific components
|
||||
│ ├── qrcode/ # QR code components
|
||||
│ ├── animate/ # CSS animation editor components
|
||||
│ └── ui/ # Base Atomic Components (Buttons, Cards, etc.)
|
||||
├── lib/ # Business Logic & Utilities
|
||||
│ ├── color/ # WASM wrappers & Color logic
|
||||
│ ├── color/ # WASM wrappers & Color logic
|
||||
│ ├── units/ # Conversion algorithms
|
||||
│ ├── ascii/ # Font loading & ASCII generation
|
||||
│ ├── ascii/ # Font loading & ASCII generation
|
||||
│ ├── media/ # FFmpeg & ImageMagick WASM orchestration
|
||||
│ └── favicon/ # Favicon generation logic
|
||||
│ ├── favicon/ # Favicon generation logic
|
||||
│ ├── qrcode/ # QR code generation logic
|
||||
│ └── animate/ # CSS builder, presets, and defaults
|
||||
├── public/ # Static assets & ASCII fonts
|
||||
├── Dockerfile # Multi-stage Docker build
|
||||
└── nginx.conf # Production Nginx configuration
|
||||
|
||||
Reference in New Issue
Block a user