mcpField
T
tinyship-brand

tinyship-brand

github.com/tinyshipcnDesign & UI573 installsUpdated 1w ago
Repository

About tinyship-brand

A TinyShip skill for customizing an application's name, logo, theme, and language settings. It explains configuration-file changes and the steps to verify the updated branding in the app.

Key features

  1. 01Application name customization
  2. 02Icon and full-logo setup
  3. 03Built-in color scheme selection
  4. 04Custom theme registration
  5. 05Default language configuration
  6. 06Branding verification steps

Use cases

  1. 01Rebranding a TinyShip project
  2. 02Applying a custom color theme
  3. 03Changing the app's default language

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tinyshipcn/tinyship-skills --skill tinyship-brand

After installing, type/tinyship-brandin Claude Code to confirm it loaded.

Details

From the project README

TinyShip Brand Customization

Guide for rebranding a TinyShip project with custom name, logo, theme, and language settings.

Step 1: App Name

Edit config.ts in the project root:

export const config = {
  app: {
    name: 'YourAppName',  // was 'TinyShip'

This name appears in page titles, the navbar, email templates, and throughout the UI.

Step 2: Logo

TinyShip supports two logo modes:

Mode A: Icon + Text (default)
  1. Prepare a square icon (recommended: 24x24px SVG, white fill for colored backgrounds)
  2. Place the file in the public/ folder of the active app (e.g., apps/next-app/public/logo.svg)
  3. Also place in apps/docs-app/public/ if the docs app exists
  4. Update config.ts:
logo: {
  iconUrl: '/my-logo.svg',
  fullLogoUrl: '',
  iconClassName: 'bg-blue-500 rounded-full p-1',
}
Mode B: Full Logo Image
  1. Prepare a wide logo image (recommended: 200x40px PNG/SVG)
  2. Place in the active app's public/ folder
  3. Update config.ts:
logo: {
  iconUrl: '/my-icon.svg',
  fullLogoUrl: '/my-full-logo.png',
  iconClassName: '',
}

Step 3: Color Theme

TinyShip includes 5 built-in color schemes:

SchemeStyle
defaultClassic gray with blue-purple gradient
claudeWarm orange tones
cosmic-nightDeep purple, cosmic
modern-minimalPurple-blue minimalist
ocean-breezeFresh teal-green

Update config.ts:

theme: {
  defaultTheme: 'light',           // 'light' or 'dark'
  defaultColorScheme: 'claude',    // pick from table above
  storageKey: 'yourapp-ui-theme'   // change to avoid conflicts
}
Custom Theme

For a fully custom color scheme:

  1. Visit tweakcn.com/editor/theme
  2. Design your theme visually
  3. Export the CSS
  4. Create a new file in libs/ui/styles/themes/ (e.g., my-theme.css)
  5. Add the exported CSS with a class selector (e.g., .theme-my-theme)
  6. Register the theme in the theme configuration

Read libs/ui/AGENTS.md for theme system details.

Step 4: Default Language

Update config.ts:

i18n: {
  defaultLocale: 'en',        // 'en' or 'zh-CN'
  locales: ['en', 'zh-CN'],
  cookieKey: 'NEXT_LOCALE',
  autoDetect: false            // set true to detect browser language
}

Step 5: Verify

  1. Start the dev server and check:
    • Navbar shows new name/logo
    • Theme colors are applied
    • Default language is correct
  2. Toggle dark mode to verify theme works in both modes
  3. Switch language to verify i18n still works

Reference Files in TinyShip Repo

  • config.ts — main configuration file to edit
  • docs/user-guide/basic-config.md — detailed branding documentation
  • libs/ui/styles/themes/ — theme CSS files
  • libs/ui/AGENTS.md — theme system architecture

Comments

Markdown supported