@devran-ai/kit 4.1.0

package/.agent/skills/testing-patterns/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: testing-patterns
+description: Testing strategies and patterns for quality assurance
+triggers: [context, test, tdd, jest, vitest]
+---
+
+# Testing Patterns Skill
+
+> **Purpose**: Apply professional testing strategies for quality assurance
+
+---
+
+## Overview
+
+This skill provides comprehensive testing patterns for unit, integration, and end-to-end testing.
+
+---
+
+## Testing Pyramid
+
+```
+        /\
+       /E2E\         ← Few, slow, expensive
+      /──────\
+     /Integra-\      ← Some, medium speed
+    / tion     \
+   /────────────\
+  /    Unit      \   ← Many, fast, cheap
+ /────────────────\
+```
+
+---
+
+## Unit Testing
+
+### AAA Pattern (Arrange-Act-Assert)
+
+```typescript
+describe("UserService", () => {
+  it("should create a user with valid data", async () => {
+    // Arrange
+    const userData = { email: "test@example.com", name: "Test" };
+    const mockRepository = {
+      create: jest.fn().mockResolvedValue({ id: "1", ...userData }),
+    };
+    const service = new UserService(mockRepository);
+
+    // Act
+    const result = await service.createUser(userData);
+
+    // Assert
+    expect(result.id).toBe("1");
+    expect(result.email).toBe("test@example.com");
+    expect(mockRepository.create).toHaveBeenCalledWith(userData);
+  });
+});
+```
+
+### Test Naming
+
+```typescript
+// Pattern: should_[expected]_when_[condition]
+it('should throw ValidationError when email is invalid', () => { ... });
+it('should return empty array when no users exist', () => { ... });
+it('should hash password when creating user', () => { ... });
+```
+
+---
+
+## Integration Testing
+
+```typescript
+describe("POST /api/users", () => {
+  beforeAll(async () => {
+    await setupTestDatabase();
+  });
+
+  afterAll(async () => {
+    await teardownTestDatabase();
+  });
+
+  it("should create user and return 201", async () => {
+    const response = await request(app)
+      .post("/api/users")
+      .send({ email: "test@example.com", password: "SecurePass123!" })
+      .expect(201);
+
+    expect(response.body.data.email).toBe("test@example.com");
+  });
+});
+```
+
+---
+
+## Mocking
+
+### Mock Functions
+
+```typescript
+const mockSendEmail = jest.fn().mockResolvedValue({ sent: true });
+```
+
+### Mock Modules
+
+```typescript
+jest.mock("./emailService", () => ({
+  sendEmail: jest.fn().mockResolvedValue({ sent: true }),
+}));
+```
+
+### Spy Functions
+
+```typescript
+const spy = jest.spyOn(userService, "validate");
+await userService.createUser(data);
+expect(spy).toHaveBeenCalled();
+```
+
+---
+
+## Coverage Targets
+
+| Metric     | Target |
+| :--------- | :----- |
+| Lines      | ≥80%   |
+| Branches   | ≥75%   |
+| Functions  | ≥80%   |
+| Statements | ≥80%   |
+
+---
+
+## Quick Reference
+
+| Pattern         | Usage                 |
+| :-------------- | :-------------------- |
+| AAA             | All unit tests        |
+| Given-When-Then | BDD style             |
+| Mocking         | Isolate dependencies  |
+| Fixtures        | Reusable test data    |
+| Factories       | Generate test objects |
+| Snapshot        | UI components         |

package/.agent/skills/typescript-expert/SKILL.md

@@ -0,0 +1,160 @@
+---
+name: typescript-expert
+description: Advanced TypeScript patterns and best practices
+triggers: [context, typescript, types, generics]
+---
+
+# TypeScript Expert Skill
+
+> **Purpose**: Apply advanced TypeScript patterns for type-safe code
+
+---
+
+## Overview
+
+This skill provides advanced TypeScript techniques for building robust, type-safe applications.
+
+---
+
+## Utility Types
+
+### Built-in Utilities
+
+```typescript
+// Partial - all properties optional
+type UpdateUser = Partial<User>;
+
+// Required - all properties required
+type CompleteUser = Required<User>;
+
+// Pick - select specific properties
+type UserCredentials = Pick<User, "email" | "password">;
+
+// Omit - exclude specific properties
+type PublicUser = Omit<User, "password" | "hashedToken">;
+
+// Record - key-value mapping
+type UserRoles = Record<string, Role>;
+```
+
+---
+
+## Generics
+
+### Basic Generic
+
+```typescript
+function identity<T>(value: T): T {
+  return value;
+}
+```
+
+### Constrained Generic
+
+```typescript
+function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
+  return obj[key];
+}
+```
+
+### Generic Class
+
+```typescript
+class Repository<T extends { id: string }> {
+  async findById(id: string): Promise<T | null> { ... }
+  async save(entity: T): Promise<T> { ... }
+}
+```
+
+---
+
+## Type Guards
+
+### typeof Guard
+
+```typescript
+function process(value: string | number) {
+  if (typeof value === "string") {
+    return value.toUpperCase();
+  }
+  return value * 2;
+}
+```
+
+### instanceof Guard
+
+```typescript
+function handleError(error: Error | string) {
+  if (error instanceof ValidationError) {
+    return { code: "VALIDATION", message: error.message };
+  }
+  return { code: "UNKNOWN", message: String(error) };
+}
+```
+
+### Custom Guard
+
+```typescript
+interface User {
+  type: "user";
+  name: string;
+}
+interface Admin {
+  type: "admin";
+  name: string;
+  permissions: string[];
+}
+
+function isAdmin(person: User | Admin): person is Admin {
+  return person.type === "admin";
+}
+```
+
+---
+
+## Discriminated Unions
+
+```typescript
+type Result<T> = { success: true; data: T } | { success: false; error: string };
+
+function handleResult<T>(result: Result<T>) {
+  if (result.success) {
+    console.log(result.data); // TypeScript knows data exists
+  } else {
+    console.error(result.error); // TypeScript knows error exists
+  }
+}
+```
+
+---
+
+## Mapped Types
+
+```typescript
+type Readonly<T> = {
+  readonly [P in keyof T]: T[P];
+};
+
+type Optional<T> = {
+  [P in keyof T]?: T[P];
+};
+
+type Nullable<T> = {
+  [P in keyof T]: T[P] | null;
+};
+```
+
+---
+
+## Quick Reference
+
+| Pattern          | Usage                 |
+| :--------------- | :-------------------- |
+| `Partial<T>`     | Optional updates      |
+| `Required<T>`    | Strict validation     |
+| `Pick<T, K>`     | Select properties     |
+| `Omit<T, K>`     | Exclude properties    |
+| `Record<K, V>`   | Key-value maps        |
+| `Extract<T, U>`  | Filter union types    |
+| `Exclude<T, U>`  | Exclude union types   |
+| `NonNullable<T>` | Remove null/undefined |

package/.agent/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: ui-ux-pro-max
+description: UI/UX design intelligence with anti-AI-slop philosophy. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks.
+---
+
+# ui-ux-pro-max
+
+Design guide for web and mobile applications with searchable database of styles, palettes, fonts, UX rules, and chart types.
+
+> **Design Philosophy**: Every interface must have a **bold, intentional aesthetic direction** — never generic, never default. Production-grade code with extraordinary creative vision.
+
+## Prerequisites
+
+Check/install Python 3 (`python3 --version`). Install via `brew install python3` (macOS), `apt install python3` (Ubuntu), or `winget install Python.Python.3.12` (Windows).
+
+---
+
+## When to Apply
+
+Reference when designing UI components, choosing palettes/typography, reviewing UX, building landing pages/dashboards, or implementing accessibility.
+
+## UX Rule Categories by Priority
+
+1. **Accessibility (CRITICAL)**: color-contrast 4.5:1, visible focus rings, alt-text, aria-labels, keyboard-nav, form labels
+2. **Touch & Interaction (CRITICAL)**: 44x44px touch targets, click/tap primary, disable buttons during async, clear error messages, cursor-pointer
+3. **Performance (HIGH)**: WebP + srcset + lazy loading, prefers-reduced-motion, reserve space for async content
+4. **Layout & Responsive (HIGH)**: viewport meta, min 16px body on mobile, no horizontal scroll, z-index scale (10/20/30/50)
+5. **Typography (MEDIUM)**: line-height 1.5-1.75, line-length 65-75 chars, match heading/body font personalities
+6. **Animation (MEDIUM)**: 150-300ms micro-interactions, transform/opacity only, skeleton screens
+7. **Style (MEDIUM)**: match style to product, consistent across pages, SVG icons not emojis
+8. **Charts (LOW)**: match chart to data type, accessible palettes, table alternative
+
+---
+
+## Workflow
+
+### Step 0: Design Thinking (REQUIRED)
+
+Before ANY code, commit to a clear creative direction:
+
+1. **Purpose**: What problem? Who uses it?
+2. **Aesthetic Tone**: Pick a BOLD direction — brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, neo-gothic, or invent your own
+3. **The Memorable Thing**: ONE element someone will remember
+4. **Constraints**: Technical requirements
+
+> **CRITICAL**: Bold maximalism and refined minimalism both work. The safe middle — generic, forgettable — NEVER works.
+
+### Step 1: Analyze Requirements
+
+Extract: product type, style keywords, industry, stack (default: `html-tailwind`)
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+Searches 5 domains in parallel, applies reasoning rules, returns complete design system with anti-patterns.
+
+**Persist** with `--persist` flag → creates `design-system/MASTER.md` + page overrides in `design-system/pages/`. Page files override Master.
+
+### Step 3: Supplement with Detailed Searches
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+Domains: `product`, `style`, `typography`, `color`, `landing`, `chart`, `ux`, `react`, `web`, `prompt`
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Stacks: `html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
+
+---
+
+## Landing Page Strategy
+
+### Above-the-Fold (5-second value communication)
+
+Hero layout: Logo + Nav + CTA | Headline (6-12 words) | Subheadline (15-25 words) | Hero image showing OUTCOME | Social proof
+
+**Headlines**: Say what it DOES, not what it IS. Specific outcomes > buzzwords.
+**Hero Images**: Show the OUTCOME, not the product. Transformation > screenshots.
+**CTA Buttons**: `Action verb + value/outcome + risk reducer` ("Start Free Trial" not "Submit")
+
+### Section Order
+
+Hero → Social Proof → Problem → Solution → Features/Benefits (3-5) → Testimonials → Pricing → FAQ (3-5 objections) → Final CTA → Footer
+
+### Social Proof Types
+
+Logo bar (B2B), Stats (scale), Testimonials (emotion), Case studies (complex products), Star ratings (consumer), Media mentions (awareness)
+
+### OG Image
+
+1200x630px with product name + tagline + brand colors. Readable at thumbnail size.
+
+---
+
+## Anti-AI-Slop Rules (MANDATORY BANS)
+
+| Banned | Do Instead |
+|--------|-----------|
+| Inter/Roboto/Arial as primary | Distinctive display + body pairing |
+| Purple gradients on white | Curated context-specific palette |
+| Predictable card grids + rounded corners | Asymmetry, overlap, diagonal flow |
+| Generic centered h1 + subtext + CTA hero | Offset, layered, editorial layout |
+| Same fonts/colors across projects | Unique aesthetic per project |
+| Solid white/dark backgrounds | Gradient meshes, noise, grain, textures |
+
+## Professional UI Rules
+
+- **Typography**: Distinctive display fonts, sharp hierarchy contrast, CSS @font-face/Google Fonts
+- **Color**: Dominant + accent > evenly distributed; CSS custom properties; one bold choice > five safe
+- **Motion**: One orchestrated page load with staggered delays > scattered micro-interactions; CSS-first, Motion library for React; match complexity to vision
+- **Backgrounds**: Create atmosphere with gradient meshes, noise/grain, geometric patterns, layered transparency, dramatic shadows, decorative borders
+- **Spatial Composition**: Asymmetry, overlap, diagonal flow; generous negative space OR controlled density — not the middle
+- **Icons**: SVG only (Heroicons/Lucide/Simple Icons), consistent sizing (24x24 viewBox, w-6 h-6), no emoji icons
+- **Interactions**: cursor-pointer on all clickable, visual hover feedback, smooth transitions (150-300ms)
+- **Light/Dark**: Light text #0F172A (slate-900), muted #475569 (slate-600+), glass bg-white/80+, visible borders
+
+---
+
+## Pre-Delivery Checklist
+
+- [ ] Bold aesthetic direction chosen and documented; "memorable thing" identifiable
+- [ ] No anti-AI-slop patterns; distinctive fonts; background has depth; layout has spatial interest
+- [ ] Consistent icon set (SVG), correct brand logos, no layout-shift hovers
+- [ ] cursor-pointer on clickables, smooth transitions, visible focus states, high-impact animation moment
+- [ ] Light/dark contrast verified (4.5:1), glass elements visible, borders visible both modes
+- [ ] Floating elements spaced from edges, no content behind fixed navbars
+- [ ] Responsive at 375/768/1024/1440px, no horizontal scroll on mobile
+- [ ] Alt text, form labels, color not sole indicator, prefers-reduced-motion respected

package/.agent/skills/ui-ux-pro-max/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS
+24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click

package/.agent/skills/ui-ux-pro-max/data/colors.csv

@@ -0,0 +1,97 @@
+No,Product Type,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
+1,SaaS (General),#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + orange CTA contrast
+2,Micro SaaS,#6366F1,#818CF8,#10B981,#F5F3FF,#1E1B4B,#E0E7FF,Indigo primary + emerald CTA
+3,E-commerce,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Success green + urgency orange
+4,E-commerce Luxury,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium dark + gold accent
+5,Service Landing Page,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue trust + warm CTA
+6,B2B Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional navy + blue CTA
+7,Financial Dashboard,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Dark bg + green positive indicators
+8,Analytics Dashboard,#1E40AF,#3B82F6,#F59E0B,#F8FAFC,#1E3A8A,#DBEAFE,Blue data + amber highlights
+9,Healthcare App,#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm cyan + health green
+10,Educational App,#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful indigo + energetic orange
+11,Creative Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + cyan accent
+12,Portfolio/Personal,#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Monochrome + blue accent
+13,Gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Neon purple + rose action
+14,Government/Public Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,High contrast navy + blue
+15,Fintech/Crypto,#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Gold trust + purple tech
+16,Social Media App,#E11D48,#FB7185,#2563EB,#FFF1F2,#881337,#FECDD3,Vibrant rose + engagement blue
+17,Productivity Tool,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Teal focus + action orange
+18,Design System/Component Library,#4F46E5,#6366F1,#F97316,#EEF2FF,#312E81,#C7D2FE,Indigo brand + doc hierarchy
+19,AI/Chatbot Platform,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,AI purple + cyan interactions
+20,NFT/Web3 Platform,#8B5CF6,#A78BFA,#FBBF24,#0F0F23,#F8FAFC,#4C1D95,Purple tech + gold value
+21,Creator Economy Platform,#EC4899,#F472B6,#F97316,#FDF2F8,#831843,#FBCFE8,Creator pink + engagement orange
+22,Sustainability/ESG Platform,#059669,#10B981,#0891B2,#ECFDF5,#064E3B,#A7F3D0,Nature green + ocean blue
+23,Remote Work/Collaboration Tool,#6366F1,#818CF8,#10B981,#F5F3FF,#312E81,#E0E7FF,Calm indigo + success green
+24,Mental Health App,#8B5CF6,#C4B5FD,#10B981,#FAF5FF,#4C1D95,#EDE9FE,Calming lavender + wellness green
+25,Pet Tech App,#F97316,#FB923C,#2563EB,#FFF7ED,#9A3412,#FED7AA,Playful orange + trust blue
+26,Smart Home/IoT Dashboard,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Dark tech + status green
+27,EV/Charging Ecosystem,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Electric cyan + eco green
+28,Subscription Box Service,#D946EF,#E879F9,#F97316,#FDF4FF,#86198F,#F5D0FE,Excitement purple + urgency orange
+29,Podcast Platform,#1E1B4B,#312E81,#F97316,#0F0F23,#F8FAFC,#4338CA,Dark audio + warm accent
+30,Dating App,#E11D48,#FB7185,#F97316,#FFF1F2,#881337,#FECDD3,Romantic rose + warm orange
+31,Micro-Credentials/Badges Platform,#0369A1,#0EA5E9,#CA8A04,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + achievement gold
+32,Knowledge Base/Documentation,#475569,#64748B,#2563EB,#F8FAFC,#1E293B,#E2E8F0,Neutral grey + link blue
+33,Hyperlocal Services,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Location green + action orange
+34,Beauty/Spa/Wellness Service,#EC4899,#F9A8D4,#8B5CF6,#FDF2F8,#831843,#FBCFE8,Soft pink + lavender luxury
+35,Luxury/Premium Brand,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium black + gold accent
+36,Restaurant/Food Service,#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Appetizing red + warm gold
+37,Fitness/Gym App,#F97316,#FB923C,#22C55E,#1F2937,#F8FAFC,#374151,Energy orange + success green
+38,Real Estate/Property,#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust teal + professional blue
+39,Travel/Tourism Agency,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue + adventure orange
+40,Hotel/Hospitality,#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Luxury navy + gold service
+41,Wedding/Event Planning,#DB2777,#F472B6,#CA8A04,#FDF2F8,#831843,#FBCFE8,Romantic pink + elegant gold
+42,Legal Services,#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Authority navy + trust gold
+43,Insurance Platform,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Security blue + protected green
+44,Banking/Traditional Finance,#0F172A,#1E3A8A,#CA8A04,#F8FAFC,#020617,#E2E8F0,Trust navy + premium gold
+45,Online Course/E-learning,#0D9488,#2DD4BF,#F97316,#F0FDFA,#134E4A,#5EEAD4,Progress teal + achievement orange
+46,Non-profit/Charity,#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Compassion blue + action orange
+47,Music Streaming,#1E1B4B,#4338CA,#22C55E,#0F0F23,#F8FAFC,#312E81,Dark audio + play green
+48,Video Streaming/OTT,#0F0F23,#1E1B4B,#E11D48,#000000,#F8FAFC,#312E81,Cinema dark + play red
+49,Job Board/Recruitment,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Professional blue + success green
+50,Marketplace (P2P),#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Trust purple + transaction green
+51,Logistics/Delivery,#2563EB,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Tracking blue + delivery orange
+52,Agriculture/Farm Tech,#15803D,#22C55E,#CA8A04,#F0FDF4,#14532D,#BBF7D0,Earth green + harvest gold
+53,Construction/Architecture,#64748B,#94A3B8,#F97316,#F8FAFC,#334155,#E2E8F0,Industrial grey + safety orange
+54,Automotive/Car Dealership,#1E293B,#334155,#DC2626,#F8FAFC,#0F172A,#E2E8F0,Premium dark + action red
+55,Photography Studio,#18181B,#27272A,#F8FAFC,#000000,#FAFAFA,#3F3F46,Pure black + white contrast
+56,Coworking Space,#F59E0B,#FBBF24,#2563EB,#FFFBEB,#78350F,#FDE68A,Energetic amber + booking blue
+57,Cleaning Service,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Fresh cyan + clean green
+58,Home Services (Plumber/Electrician),#1E40AF,#3B82F6,#F97316,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + urgent orange
+59,Childcare/Daycare,#F472B6,#FBCFE8,#22C55E,#FDF2F8,#9D174D,#FCE7F3,Soft pink + safe green
+60,Senior Care/Elderly,#0369A1,#38BDF8,#22C55E,#F0F9FF,#0C4A6E,#E0F2FE,Calm blue + reassuring green
+61,Medical Clinic,#0891B2,#22D3EE,#22C55E,#F0FDFA,#134E4A,#CCFBF1,Medical teal + health green
+62,Pharmacy/Drug Store,#15803D,#22C55E,#0369A1,#F0FDF4,#14532D,#BBF7D0,Pharmacy green + trust blue
+63,Dental Practice,#0EA5E9,#38BDF8,#FBBF24,#F0F9FF,#0C4A6E,#BAE6FD,Fresh blue + smile yellow
+64,Veterinary Clinic,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Caring teal + warm orange
+65,Florist/Plant Shop,#15803D,#22C55E,#EC4899,#F0FDF4,#14532D,#BBF7D0,Natural green + floral pink
+66,Bakery/Cafe,#92400E,#B45309,#F8FAFC,#FEF3C7,#78350F,#FDE68A,Warm brown + cream white
+67,Coffee Shop,#78350F,#92400E,#FBBF24,#FEF3C7,#451A03,#FDE68A,Coffee brown + warm gold
+68,Brewery/Winery,#7C2D12,#B91C1C,#CA8A04,#FEF2F2,#450A0A,#FECACA,Deep burgundy + craft gold
+69,Airline,#1E3A8A,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Sky blue + booking orange
+70,News/Media Platform,#DC2626,#EF4444,#1E40AF,#FEF2F2,#450A0A,#FECACA,Breaking red + link blue
+71,Magazine/Blog,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Editorial black + accent pink
+72,Freelancer Platform,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Creative indigo + hire green
+73,Consulting Firm,#0F172A,#334155,#CA8A04,#F8FAFC,#020617,#E2E8F0,Authority navy + premium gold
+74,Marketing Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + creative cyan
+75,Event Management,#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Excitement purple + action orange
+76,Conference/Webinar Platform,#1E40AF,#3B82F6,#22C55E,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + join green
+77,Membership/Community,#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Community purple + join green
+78,Newsletter Platform,#0369A1,#0EA5E9,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + subscribe orange
+79,Digital Products/Downloads,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Digital indigo + buy green
+80,Church/Religious Organization,#7C3AED,#A78BFA,#CA8A04,#FAF5FF,#4C1D95,#DDD6FE,Spiritual purple + warm gold
+81,Sports Team/Club,#DC2626,#EF4444,#FBBF24,#FEF2F2,#7F1D1D,#FECACA,Team red + championship gold
+82,Museum/Gallery,#18181B,#27272A,#F8FAFC,#FAFAFA,#09090B,#E4E4E7,Gallery black + white space
+83,Theater/Cinema,#1E1B4B,#312E81,#CA8A04,#0F0F23,#F8FAFC,#4338CA,Dramatic dark + spotlight gold
+84,Language Learning App,#4F46E5,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Learning indigo + progress green
+85,Coding Bootcamp,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Terminal dark + success green
+86,Cybersecurity Platform,#00FF41,#0D0D0D,#FF3333,#000000,#E0E0E0,#1F1F1F,Matrix green + alert red
+87,Developer Tool / IDE,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Code dark + run green
+88,Biotech / Life Sciences,#0EA5E9,#0284C7,#10B981,#F0F9FF,#0C4A6E,#BAE6FD,DNA blue + life green
+89,Space Tech / Aerospace,#F8FAFC,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Star white + launch blue
+90,Architecture / Interior,#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Minimal black + accent gold
+91,Quantum Computing,#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Quantum cyan + interference purple
+92,Biohacking / Longevity,#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Bio red/blue + vitality green
+93,Autonomous Systems,#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal green + alert red
+94,Generative AI Art,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Canvas neutral + creative pink
+95,Spatial / Vision OS,#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#CCCCCC,Glass white + system blue
+96,Climate Tech,#059669,#10B981,#FBBF24,#ECFDF5,#064E3B,#A7F3D0,Nature green + solar gold