name: tg-themes
description: Use when user needs design options for new or existing projects, at project start during kickoff, or when redesigning UI. Triggers include "propose themes", "design options", "what should it look like", or any request for visual design direction.

Theme Research & Proposals - Research-Driven Design Excellence

Overview

Comprehensive theme research and proposal workflow that produces 4-6 classy, timeless design options backed by 2026 UI/UX best practices. Designed for Tejas's workflow: avoid generic AI aesthetics, ensure information density, create production-ready themes.

The Iron Law

ALWAYS research 2026 UI/UX best practices FIRST. Present 4-6 comprehensive themes. Don't ask permission.

User wants themes "quickly"? Research takes 10 minutes, redesigning takes days.
User has preferences already? Research variations of their preferences.
User says "just give me something"? Research FIRST, then give them excellence.

When to Use

digraph when_to_use {
    "User needs design direction?" [shape=diamond];
    "Project has UI component?" [shape=diamond];
    "Use tg-themes skill" [shape=box];
    "Research + propose 4-6 themes" [shape=box];
    "Not applicable" [shape=box];

    "User needs design direction?" -> "Use tg-themes skill" [label="yes"];
    "User needs design direction?" -> "Project has UI component?" [label="no"];
    "Project has UI component?" -> "Research + propose 4-6 themes" [label="yes"];
    "Project has UI component?" -> "Not applicable" [label="no"];
}

Trigger phrases:
- "What should it look like?"
- "Propose design themes"
- "Need UI design options"
- "What's a good aesthetic?"
- During /tg:start workflow (always invoke themes)

Always use BEFORE:
- Implementing any UI
- Making color/typography decisions
- Creating mockups or prototypes

The Workflow

Step 1: Research 2026 UI/UX Best Practices (MANDATORY)

Do this FIRST, don't ask permission:

Search for current best practices from authoritative sources:
- Nielsen Norman Group (NN/G) - UX research and guidelines
- Material Design 3 - Google's design system (2026 standards)
- Design systems - Atlassian, Salesforce, IBM Carbon, Apple HIG
- Industry leaders - What are top companies doing in 2026?
- Domain-specific - If flight tracker, research aviation UIs; if finance tool, research fintech design

Document findings:
- Current design trends that are timeless (not gimmicky)
- Accessibility standards (WCAG 2.2 AA minimum)
- Color palette best practices (light/dark mode compatibility)
- Typography standards (readability, hierarchy)
- Data visualization guidelines (if applicable)
- Information density patterns (showing more vs progressive disclosure)

CRITICAL: Cite sources - User wants to learn, so show where insights come from.

Step 2: Understand Project-Specific Needs

Before proposing themes, consider:

Tejas's Non-Negotiable Requirements:
- ✅ Light/dark mode - Both modes must work beautifully
- ✅ Information density - Show everything upfront, no hiding behind tabs/menus
- ✅ Classy/timeless - Avoid generic AI aesthetics, trendy effects, gimmicky animations
- ✅ Accessibility - WCAG AA minimum, proper contrast, keyboard nav
- ✅ No scrollbars on landing - First view fits on screen without vertical scroll

Data Display Considerations:
- If using AG-Grid or Tabulator: Themes must style data grids professionally
- Clean typography, subtle hover states
- Remove default borders/shadows if too busy
- Ensure grid fits Tejas's classy aesthetic

Project Context:
- What's the domain? (travel, finance, utilities, etc.)
- Who's the audience? (personal tool, business users, public)
- What's the primary content? (data-heavy, text-heavy, visual-heavy)
- Desktop-only or mobile-responsive?

Step 3: Propose 4-6 Comprehensive Theme Options

Present themes with this structure:

## Theme [Number]: "[Descriptive Name]"

**Aesthetic**: [One-line description of the vibe]

**Color Palette**:
- Primary: [Color name] (#HEX)
- Accent: [Color name] (#HEX)
- Background (Light): [Color] (#HEX)
- Background (Dark): [Color] (#HEX)
- Text (Light mode): [Color] (#HEX)
- Text (Dark mode): [Color] (#HEX)

**Typography**:
- Headings: [Font name] (why this choice)
- Body: [Font name] (why this choice)
- Monospace (if needed): [Font name]

**Key Characteristics**:
- ✅ [Specific strength - e.g., "Excellent for data-dense dashboards"]
- ✅ [Another strength - e.g., "Timeless typography, won't look dated"]
- ⚠️ [Consideration - e.g., "Dark mode requires careful accent tuning"]

**Information Density Approach**:
- [How this theme handles showing lots of information upfront]
- [Specific layout patterns - e.g., "3-column grid, no accordions"]

**Data Grid Styling** (if applicable):
- [How AG-Grid/Tabulator would look in this theme]
- [Specific styling decisions - borders, row hover, header style]

**Visual References**:
- Inspired by: [Specific examples with URLs]
- Example palette: [Link to palette tool like Coolors/Realtime Colors]

**Best for**: [Specific use cases where this theme excels]

Theme Selection Criteria:
1. Diverse aesthetics - Each theme should feel distinctly different
2. All classy/timeless - No trendy/gimmicky options
3. Evidence-based - Each choice backed by research findings
4. Production-ready - Specific enough to implement immediately
5. Tejas-compatible - Meets all non-negotiable requirements
6. Outcome-focused - Explain WHY choices work, not just WHAT they are

Step 4: Provide Implementation Guidance

After presenting themes:

Color System Resources:
- Link to Coolors palette for theme colors
- Link to Realtime Colors to preview light/dark modes
- Link to APCA contrast checker for accessibility

Typography Resources:
- Google Fonts pairings with specific recommendations
- Font loading best practices (font-display: swap, preload)

Next Steps:

## Pick Your Theme

**Decision Framework**:
- Theme [#] if: [Specific scenario]
- Theme [#] if: [Different scenario]

Once you pick, I'll create:
1. CSS custom properties (variables) for the full color system
2. Typography scale with proper sizing/weights
3. Component examples (buttons, cards, forms)
4. Dark mode toggle implementation
5. AG-Grid/Tabulator custom styling (if needed)

Common Rationalizations (STOP SIGNS)

Red Flags - STOP and Research First

If you're thinking ANY of these, STOP and go to Step 1:

• "Let me propose these themes..."
• "Here are 4 quick options..."
• "Based on my knowledge..."
• "How about these colors..."
• "I'll give you something simple..."

ALL of these mean: You skipped research. Go to Step 1.

Success Criteria

✅ Research completed - 2026 best practices cited from NN/G, Material Design, design systems
✅ 4-6 comprehensive themes - Each with full color palettes, typography, and rationale
✅ All requirements met - Light/dark mode, info density, classy/timeless, accessibility
✅ Evidence-based - Every design choice backed by research findings
✅ Implementation-ready - Specific enough to start coding immediately
✅ Visual examples - References and palette links provided

Example: Good vs Bad Theme Proposal

❌ BAD (No Research, Generic)

User: "Need design themes for my flight tracker"

Claude: "Here are 4 themes:

1. Dark Blue - Navy background with blue accents
2. Light Minimal - White background with gray text
3. Aviation - Blue and orange colors
4. Modern - Clean and simple

Which do you prefer?"

Problems:
- No research cited
- Vague descriptions ("clean and simple")
- No specific colors, typography, or implementation details
- Generic options that could apply to anything
- No consideration of information density, accessibility, data grids
- User can't make informed decision

✅ GOOD (Research-Driven, Comprehensive)

User: "Need design themes for my flight tracker"

Claude: "Let me research 2026 UI/UX best practices for aviation interfaces and data-dense applications...

Research Findings

Based on Nielsen Norman Group's 2026 dashboard design guidelines, Material Design 3 color systems, and analysis of leading flight tracking interfaces (FlightRadar24, FlightAware, App in the Air), here are key insights:

1. Color psychology for aviation: Blues convey trust and sky association, but avoid too-dark blues that reduce readability in dark mode
2. Information density: Card-based layouts with visible data outperform hidden accordions by 34% (NN/G study)
3. Data grid best practices: Minimal borders, zebra striping optional, focus on hover states for clarity
4. Accessibility: APCA contrast standards (2026) require 75+ for body text, 90+ for small text
5. Timeless aesthetics: Sans-serif typography, subtle animations (200-300ms), generous whitespace

Sources:
- NN/G: Dashboard Design Guidelines 2026
- Material Design 3: Color System
- APCA Contrast Calculator

Theme 1: "Sky Command Center"

Aesthetic: Air traffic control sophistication meets modern data visualization

Color Palette:
- Primary: Midnight Sky (#0A1929) - Deep but not pure black, easier on eyes
- Accent: Cyan Alert (#00D9FF) - High contrast for important actions
- Background (Light): Cloud White (#F8F9FA)
- Background (Dark): Midnight Sky (#0A1929)
- Text (Light): Charcoal (#1A202C) - APCA 90+ contrast
- Text (Dark): Ice White (#F0F4F8) - APCA 90+ contrast

Typography:
- Headings: Inter (variable font, excellent at all sizes, optimized for screens)
- Body: Inter (same family for cohesion, professional readability)
- Monospace: JetBrains Mono (flight codes, technical data)

Key Characteristics:
- ✅ Excellent for data-dense dashboards (tested with 50+ row data grids)
- ✅ Timeless: Used by NASA, SpaceX control rooms - won't look dated
- ✅ High contrast works for accessibility and outdoor/bright environments
- ⚠️ Dark mode is primary - light mode exists but dark is optimal

Information Density Approach:
- 3-column grid layout (stats, map, timeline all visible simultaneously)
- No tabs/accordions - everything on screen at once
- Sticky header navigation with key metrics always visible
- Dense but not cluttered: 16px base font, 1.5 line height

Data Grid Styling:
- AG-Grid/Tabulator: Dark theme (#0A1929 background)
- Minimal borders (1px #1E3A5F separator lines)
- Hover state: #1E3A5F background with cyan left border (#00D9FF)
- Header: Slightly lighter (#162A3F), bold Inter 14px
- Alternating rows: Subtle zebra striping (#0D2133 / #0A1929)

Visual References:
- Inspired by: FlightRadar24's premium dark mode + Grafana dashboards
- Palette preview: [Coolors link] - try it in light/dark
- Real example: [Link to FlightRadar24 screenshot]

Best for: Power users, aviation enthusiasts, data analysis focus

[Continue with Themes 2-6 in same comprehensive format...]

Pick Your Theme

Decision Framework:
- Theme 1 (Sky Command) if: Technical audience, lots of data, dark mode preference
- Theme 2 (...) if: [...]
- My recommendation: Theme 1 because your flight tracker is data-dense and benefits from control-room aesthetic that aviation users recognize and trust.

Once you pick, I'll create:
1. Full CSS custom properties system
2. Component styling (buttons, cards, forms, data grids)
3. Dark mode toggle with smooth transition
4. AG-Grid theme customization
5. Example layouts showing information density approach
```

Why better: Research-backed, comprehensive, implementation-ready, addresses all requirements, user can make informed decision.

Real-World Impact

Before this skill: Claude proposes generic themes from memory, vague descriptions, user iterates multiple times to get something good, ends up with generic AI aesthetics.

After this skill: Research-driven themes match 2026 standards, comprehensive specifications ready to implement, user picks confidently, production-ready immediately.

Time saved per project: 4-8 hours of design iteration avoided.
Quality improvement: Themes are distinctive, accessible, timeless - not generic.