chore(release): v0.2.1 - redesigned docs and updated colors (#19)

* chore(release): bump version to v0.2.1

* docs: update documentation for v0.2.1 release

* refactor(config): update colors and disable framework/runtime detection by default

* assets: add promo image and GIF for v0.2.1

* ci(publish): add continue-on-error for GitHub Packages step

Author: ramonclaudio

.github/assets/claude-code-statusline-promo.gif

@@ -180,8 +180,10 @@ jobs:
           scope: '@rmncldyo'
 
       - name: Publish to GitHub Packages
+        continue-on-error: true
         run: |
-          # Package already has scoped name, publish directly
+          # GitHub Packages requires scoped package name (@org/name)
+          # Publishing unscoped package will fail but won't block the workflow
           npm publish --provenance --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/assets/claude-code-statusline-promo.jpg

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.1] - 2025-10-28
+
+### Changed
+
+- Redesigned README for clarity and brevity - removed redundancy and streamlined documentation
+- Updated color palette to muted, cohesive scheme (steel blue, slate gray, soft coral, muted amber)
+- Updated color descriptions and code examples throughout
+- Disabled framework and runtime detection by default in `statusline-config.cjs` for cleaner default output
+- Added image with GIF fallback using HTML `<picture>` element for better media handling
+- Refined DIM color for improved visual hierarchy
+
 ## [0.2.0] - 2025-10-28
 
 ### Added
@@ -40,5 +51,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Statusline scripts for project and Git status
 - TypeScript support with strict configuration
 
+[0.2.1]: https://github.com/RMNCLDYO/create-claude-statusline/releases/tag/v0.2.1
 [0.2.0]: https://github.com/RMNCLDYO/create-claude-statusline/releases/tag/v0.2.0
 [0.1.0]: https://github.com/RMNCLDYO/create-claude-statusline/releases/tag/v0.1.0

.github/workflows/publish.yml

@@ -2,10 +2,10 @@
 
 Beautiful, highly customizable status line for Claude Code with granular control over every element.
 
-[![version](https://img.shields.io/npm/v/create-claude-statusline.svg?label=version&color=brightgreen)](https://www.npmjs.com/package/create-claude-statusline)
-[![downloads](https://img.shields.io/npm/dm/create-claude-statusline.svg?label=downloads&color=blue)](https://www.npmjs.com/package/create-claude-statusline)
-[![package size](https://img.shields.io/npm/unpacked-size/create-claude-statusline?label=package%20size&color=yellow)](https://www.npmjs.com/package/create-claude-statusline)
-[![license](https://img.shields.io/badge/license-MIT-red.svg)](https://opensource.org/licenses/MIT)
+<picture>
+  <source srcset=".github/assets/claude-code-statusline-promo.gif" type="image/gif">
+  <img src=".github/assets/claude-code-statusline-promo.jpg" alt="Claude Code Statusline Promo">
+</picture>
 
 ## Quick Start
 
@@ -15,81 +15,35 @@ npm create claude-statusline
 
 *Adds a beautiful status line to your Claude Code. ZERO dependencies in your project.*
 
-### ✨ What's New
-
-- **Granular Control**: Toggle every element individually - project, branch, framework, runtime, each git status type, and model
-- **Centralized Config**: New `statusline-config.cjs` file for easy customization
-- **Intuitive Colors**: Color-coded git status (green → orange → yellow → red) for instant visual feedback
-- **Performance**: Only runs git operations when needed based on your config
-
 ## What You Get
 
 ```
 [ ◈ my-project on ⎇ main via ◉ React (node) | ↑ 2 / + 1 / ~ 3 / ? 2 | ⌘ Sonnet 4.5 ]
 ```
 
-**What each element shows:**
-- `◈ my-project` - Project name (light blue)
-- `⎇ main` - Git branch (light green)
-- `◉ React (node)` - Framework and runtime (pink/tan)
-- `↑ 2` - Commits ahead (green)
-- `+ 1` - Staged files (orange)
-- `~ 3` - Modified files (yellow)
-- `? 2` - Untracked files (red)
-- `⌘ Sonnet 4.5` - Claude model (purple)
-
-**Color coding:** Green (good) → Orange (ready) → Yellow (pending) → Red (needs attention)
+- Project name, git branch, framework, and runtime
+- Commit status (ahead/behind)
+- Git status indicators (staged, modified, untracked)
+- Current Claude model
+- Fully customizable: toggle any element, change colors, swap icons
 
 ## Installation
 
 ```bash
-npm create claude-statusline     # npm
-npx create-claude-statusline     # npx
-pnpm dlx create-claude-statusline # pnpm  
-bunx create-claude-statusline    # bun
+npm create claude-statusline
 ```
 
-### Options
-
+Or with other package managers:
 ```bash
-npm create claude-statusline --dry-run  # Preview what will be installed
-npm create claude-statusline --help     # Show all options
+npx create-claude-statusline           # npx
+pnpm dlx create-claude-statusline      # pnpm
+bunx create-claude-statusline          # bun
 ```
 
-### Global Install
-
+Global install:
 ```bash
 npm install -g create-claude-statusline
-create-claude-statusline  # Run from anywhere
-ccs                       # Short alias
-```
-
-## Features
-
-🎯 **Granular Control** - Toggle every element individually (project name, branch, framework, runtime, each git status type, model)
-
-📊 **Clear Git Status** - Separate indicators for ahead/behind, staged, modified, and untracked with intuitive color coding (green → orange → yellow → red)
-
-✨ **Smart Detection** - Automatically detects your framework (React, Vue, Next.js, etc.) and runtime (Node, Bun, Python, Rust, Go, etc.)
-
-🎨 **Fully Customizable** - Centralized config file for all features, colors, and icons
-
-⚡ **Fast & Efficient** - Intelligent caching with rate limiting for sub-100ms updates
-
-🔒 **Safe & Secure** - Command allowlisting, path validation, and automatic backups
-
-📦 **Zero Dependencies** - No runtime dependencies in your project
-
-## What Gets Installed
-
-```
-.claude/
-├── settings.local.json          # Status line configuration
-└── scripts/
-    ├── statusline.cjs           # Main status line logic
-    ├── statusline-config.cjs    # Configuration options
-    ├── statusline-git.cjs       # Git integration
-    └── statusline-detect.cjs    # Framework detection
+create-claude-statusline  # or use alias: ccs
 ```
 
 ## Customization
@@ -118,16 +72,16 @@ Color scheme follows an intuitive severity gradient:
 
 ```javascript
 COLORS: {
-  PROJECT: '\x1b[38;5;117m',       // Light blue
-  BRANCH: '\x1b[38;5;156m',        // Light green
-  FRAMEWORK: '\x1b[38;5;219m',     // Pink
-  RUNTIME: '\x1b[38;5;180m',       // Tan
-  GIT_AHEAD: '\x1b[38;5;46m',      // Green - you're ahead!
-  GIT_BEHIND: '\x1b[38;5;196m',    // Red - action needed
-  GIT_STAGED: '\x1b[38;5;214m',    // Orange - ready to commit
-  GIT_MODIFIED: '\x1b[38;5;226m',  // Yellow - needs staging
-  GIT_UNTRACKED: '\x1b[38;5;196m', // Red - needs attention
-  MODEL: '\x1b[38;5;93m',          // Purple
+  PROJECT: '\x1b[38;5;110m',       // Muted steel blue
+  BRANCH: '\x1b[38;5;109m',        // Slate gray-blue
+  FRAMEWORK: '\x1b[38;5;145m',     // Cool gray
+  RUNTIME: '\x1b[38;5;180m',       // Muted beige
+  GIT_AHEAD: '\x1b[38;5;109m',     // Slate blue
+  GIT_BEHIND: '\x1b[38;5;167m',    // Soft coral
+  GIT_STAGED: '\x1b[38;5;108m',    // Muted teal-green
+  GIT_MODIFIED: '\x1b[38;5;180m',  // Muted amber
+  GIT_UNTRACKED: '\x1b[38;5;167m', // Soft coral
+  MODEL: '\x1b[38;5;146m',         // Soft gray-green
 }
 ```
 
@@ -147,102 +101,24 @@ ICONS: {
 
 ### Supported Frameworks & Runtimes
 
-**Frameworks:** Next.js, Nuxt.js, NestJS, React, Vue, Angular, Svelte, Express, Fastify
+**Frameworks:** `Next.js`, `Nuxt.js`, `NestJS`, `React`, `Vue`, `Angular`, `Svelte`, `Express`, `Fastify`
 
-**Runtimes:** Node.js, Bun, TypeScript, Python, Rust, Go, Java, C/C++
+**Runtimes:** `Node.js`, `Bun`, `TypeScript`, `Python`, `Rust`, `Go`, `Java`, `C/C++`
 
 All configuration is centralized in `.claude/scripts/statusline-config.cjs` - one file to control everything!
 
 ## Safety
 
-If you already have a `.claude` directory, it will be backed up to `.create-claude-statusline-backup-[timestamp]` before installation.
-
-### Restore from Backup
-```bash
-# List backups
-ls -la .create-claude-statusline-backup-*
-
-# Restore
-rm -rf .claude
-mv .create-claude-statusline-backup-[timestamp] .claude
-```
+Your existing `.claude` directory is automatically backed up to `.create-claude-statusline-backup-[timestamp]` before installation.
 
 ## Uninstall
 
 ```bash
-# Remove status line configuration
 rm -rf .claude/scripts/statusline*.cjs
-
-# Edit .claude/settings.local.json and remove the "statusLine" section
-```
-
-## Programmatic Usage
-
-```javascript
-import { init } from 'create-claude-statusline';
-
-await init('/path/to/project', {
-  dryRun: false  // Set to true for preview
-});
-```
-
-## Requirements
-
-- Node.js 18+
-- [Claude Code](https://claude.ai/code)
-- Git (optional, for git status features)
-
-## Example: Minimal Configuration
-
-Want just git branch and status? Edit `.claude/scripts/statusline-config.cjs`:
-
-```javascript
-FEATURES: {
-  SHOW_PROJECT: false,       // Hide project name
-  SHOW_GIT_BRANCH: true,     // Show branch
-  SHOW_FRAMEWORK: false,     // Hide framework
-  SHOW_RUNTIME: false,       // Hide runtime
-  SHOW_GIT_AHEAD: true,      // Show ahead
-  SHOW_GIT_BEHIND: true,     // Show behind
-  SHOW_GIT_STAGED: true,     // Show staged
-  SHOW_GIT_MODIFIED: true,   // Show modified
-  SHOW_GIT_UNTRACKED: true,  // Show untracked
-  SHOW_MODEL: false,         // Hide model
-}
-```
-
-Result: `[ ⎇ main | ↑ 1 / + 2 / ~ 3 / ? 1 ]`
-
-## Troubleshooting
-
-**Status line not showing?**
-```bash
-# Check installation
-ls -la .claude/scripts/statusline.cjs
-
-# Test manually
-echo '{"model":{"display_name":"Test"},"workspace":{"current_dir":"'"$(pwd)"'"}}' | node .claude/scripts/statusline.cjs
 ```
 
-**Git info missing?**
-- Ensure you're in a git repository (`git status` should work)
-- Check that git features are enabled in `statusline-config.cjs`
-
-**Want different colors?**
-- Edit COLORS in `.claude/scripts/statusline-config.cjs`
-- Use 256-color codes: `\x1b[38;5;NUMBERm` (see [256-color chart](https://upload.wikimedia.org/wikipedia/commons/1/15/Xterm_256color_chart.svg))
-
-## Links
-
-[**Issues**](https://github.com/RMNCLDYO/create-claude-statusline/issues) • 
-[**Discussions**](https://github.com/RMNCLDYO/create-claude-statusline/discussions) • 
-[**Changelog**](CHANGELOG.md) • 
-[**Security**](SECURITY.md)
+Then remove the `"statusLine"` section from `.claude/settings.local.json`.
 
 ## License
 
 MIT © [RMNCLDYO](https://github.com/RMNCLDYO)
-
----
-
-Originally extracted from [create-claude](https://github.com/RMNCLDYO/create-claude) due to popular demand for the standalone status line feature.

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-statusline",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Beautiful, highly customizable status line for Claude Code with granular control over every element. Shows project info, git status, framework, and model.",
   "type": "module",
   "sideEffects": false,
@@ -96,7 +96,7 @@
   "preferGlobal": false,
   "stability": "stable",
   "devDependencies": {
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.9.2",
     "typescript": "^5.9.3"
   }
 }

README.md

@@ -4,8 +4,8 @@ module.exports = {
   FEATURES: {
     SHOW_PROJECT: true,
     SHOW_GIT_BRANCH: true,
-    SHOW_FRAMEWORK: true,
-    SHOW_RUNTIME: true,
+    SHOW_FRAMEWORK: false,
+    SHOW_RUNTIME: false,
     SHOW_GIT_AHEAD: true,
     SHOW_GIT_BEHIND: true,
     SHOW_GIT_STAGED: true,
@@ -15,17 +15,17 @@ module.exports = {
   },
 
   COLORS: {
-    PROJECT: '\x1b[38;5;117m',
-    BRANCH: '\x1b[38;5;156m',
-    FRAMEWORK: '\x1b[38;5;219m',
-    RUNTIME: '\x1b[38;5;180m',
-    GIT_AHEAD: '\x1b[38;5;46m',
-    GIT_BEHIND: '\x1b[38;5;196m',
-    GIT_STAGED: '\x1b[38;5;214m',
-    GIT_MODIFIED: '\x1b[38;5;226m',
-    GIT_UNTRACKED: '\x1b[38;5;196m',
-    MODEL: '\x1b[38;5;93m',
-    DIM: '\x1b[38;5;244m',
+    PROJECT: '\x1b[38;5;110m',      // Muted steel blue
+    BRANCH: '\x1b[38;5;109m',       // Slate gray-blue
+    FRAMEWORK: '\x1b[38;5;145m',    // Cool gray
+    RUNTIME: '\x1b[38;5;180m',      // Muted beige
+    GIT_AHEAD: '\x1b[38;5;109m',    // Slate blue
+    GIT_BEHIND: '\x1b[38;5;167m',   // Soft coral
+    GIT_STAGED: '\x1b[38;5;108m',   // Muted teal-green
+    GIT_MODIFIED: '\x1b[38;5;180m', // Muted amber
+    GIT_UNTRACKED: '\x1b[38;5;167m', // Soft coral
+    MODEL: '\x1b[38;5;146m',        // Soft gray-green
+    DIM: '\x1b[38;5;243m',          // Subtle gray
     RESET: '\x1b[0m'
   },