Welcome Screen Implementation

Welcome Screen Implementation

Overview

The Skene Skills Directory now features a beautiful, branded welcome screen using Charm-inspired libraries for professional terminal UI rendering.

Features

1. Branded Logo Display

• ASCII art "S" logo recreated from the Skene brand PDF
• Dot-matrix style for visual appeal
• Responsive: Shows minimal [S] Skene logo on narrow terminals (< 60 columns)
• Automatically centered based on terminal width

2. Professional Styling with Boxen

• Uses boxen for professional border drawing
• Rounded corners for modern appearance
• Proper padding and margins
• Width-aware: Never exceeds terminal width

3. Color Highlighting with Chalk

• chalk for ANSI color support
• High contrast white/bright text on dark terminals
• Dimmed secondary text for visual hierarchy
• Color-coded success messages (green), info (cyan), and help text (dim)

4. First-Time Installation Detection

• Automatically detects first installation
• Shows welcome screen only on initial install
• Checks for existence of manifest files in ~/.claude/skills/ and ~/.cursor/skills/

5. Enhanced Post-Install Hook

• Styled boxen message after npm install
• Clear next steps for users
• Professional appearance

Technical Stack

Dependencies

{
  "chalk": "^5.3.0", // Terminal string styling
  "boxen": "^7.1.1", // Create boxes in terminal
  "terminal-size": "^4.0.0" // Detect terminal dimensions
}

File Structure

scripts/
├── skill-converter/
│   ├── logo.ts          # ASCII art logo and responsive logic
│   ├── welcome.ts       # Welcome screen rendering with boxen
│   └── cli.ts           # CLI integration
└── postinstall.js       # NPM post-install hook

Usage Examples

Help Command

npx skills-directory help

Shows the logo, welcome message, and styled help text.

First-Time Installation

npx skills-directory install --target all

On first installation, displays:

1. Full ASCII logo (if terminal is wide enough)
2. "Welcome to Skene Skills Directory" box
3. Tagline
4. "Installing for the first time..." message
5. Installation progress
6. Success message with green border

Post-Install Hook

After npm install @skene/skills-directory:

╭─────────────────────────────────────────────────╮
│                                                 │
│             Skene Skills Directory              │
│                                                 │
│      800+ AI Skills for Claude and Cursor       │
│                                                 │
│                   Next step:                    │
│   $ npx skills-directory install --target all   │
│                                                 │
╰─────────────────────────────────────────────────╯

API

logo.ts

export function getLogo(terminalWidth: number = 80): string;

Returns ASCII logo or minimal logo based on terminal width.

welcome.ts

export function renderWelcomeScreen(config?: WelcomeScreenConfig): string;
export function renderSuccessMessage(installedCount: number, targets: string[]): string;
export function isFirstInstall(): boolean;

• renderWelcomeScreen() - Renders the welcome screen with logo
• renderSuccessMessage() - Renders styled success message after installation
• isFirstInstall() - Checks if this is the first installation

Cross-Platform Compatibility

The implementation uses:

• ANSI color codes (via chalk) - Works on all modern terminals
• Box-drawing characters (via boxen) - Unicode support for borders
• Terminal size detection - Adapts to any terminal width
• Node.js built-ins - No platform-specific dependencies

Tested on:

• ✅ macOS (Terminal.app, iTerm2)
• ✅ Linux (various terminals)
• ✅ Windows (WSL, PowerShell with UTF-8 support)

Future Enhancements

Potential improvements:

1. Image-to-ASCII conversion - Use actual PDF logo image with image-to-ascii package
2. Color themes - Support light/dark terminal detection
3. Animation - Animated logo reveal using cli-spinners
4. Interactive mode - Use inquirer for interactive setup
5. Update notifications - Check for new skills/updates

References

• Charm.sh - Inspiration for terminal UI design
• chalk - Terminal string styling
• boxen - Create boxes in terminal
• terminal-size - Get terminal size