ワンクリックでManusで任意のスキルを実行

theme-factory

スター5

フォーク1

更新日2026年2月16日 08:02

Generate structured JSON theme configurations for UI components, presentations, or documents. Supports color palettes, typography, and spacing.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

vietanhdev

vietanhdev/anycowork

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Theme Factory Skill

This skill generates structured theme configurations in JSON format, suitable for modern UI frameworks (Tailwind, Material UI, Shadcn) or custom styling systems.

Core Capabilities

Generate Themes: Create comprehensive theme objects with colors, fonts, and spacing.
Color Palettes: Generate accessible color schemes (primary, secondary, accent, neutral).
Typography Scales: Define font families, sizes, and line heights.
Format Adaptation: Output for Tailwind (tailwind.config.js), CSS variables (:root), or generic JSON.

Workflow Examples

1. Generate JSON Theme

Prompt: "Create a dark mode theme for a developer dashboard."

Output:

{
  "name": "dark-dev-dashboard",
  "colors": {
    "background": "#0f172a",
    "foreground": "#f8fafc",
    "primary": {
      "DEFAULT": "#3b82f6",
      "hover": "#2563eb",
      "active": "#1d4ed8"
    },
    "secondary": "#64748b",
    "accent": "#10b981",
    "error": "#ef4444",
    "warning": "#f59e0b",
    "success": "#22c55e"
  },
  "fonts": {
    "heading": "Inter, system-ui, sans-serif",
    "body": "Roboto Mono, monospace"
  },
  "spacing": {
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem",
    "xl": "2rem"
  },
  "borderRadius": {
    "default": "0.375rem",
    "card": "0.5rem"
  }
}

2. Generate Tailwind Config Fragment

Prompt: "Give me a tailwind color config for a 'sunset' theme."

Output:

module.exports = {
  theme: {
    extend: {
      colors: {
        sunset: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
        },
      }
    }
  }
}

Best Practices

Accessibility: Ensure contrast ratios meet WCAG AA standards.
Consistency: Use standard naming conventions (primary, secondary, success, error).
Scalability: Include shades (50-900) for versatile usage.

このリポジトリの他の Skills

同じリポジトリ

git-ops

vietanhdev/anycowork

Manage Git repositories within the workspace. Check status, commit changes, view diffs, and create branches.

2026-02-165

pptx

vietanhdev/anycowork

Create, modify, and analyze PowerPoint presentations (.pptx) using standard Python libraries.

2026-02-165

slack-gif-creator

vietanhdev/anycowork

Create animated GIFs optimized for Slack (small file size, loop, transparency) using Python libraries like imageio and Pillow.

2026-02-165

skill-creator

vietanhdev/anycowork

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends AI capabilities with specialized knowledge, workflows, or tool integrations.

2026-02-105

web-artifacts-builder

vietanhdev/anycowork

Suite of tools for creating elaborate, multi-component AnyCowork HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

2026-02-105

algorithmic-art

vietanhdev/anycowork

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

2026-01-315

Theme Factory Skill

This skill generates structured theme configurations in JSON format, suitable for modern UI frameworks (Tailwind, Material UI, Shadcn) or custom styling systems.

Core Capabilities

Generate Themes: Create comprehensive theme objects with colors, fonts, and spacing.

Color Palettes: Generate accessible color schemes (primary, secondary, accent, neutral).

Typography Scales: Define font families, sizes, and line heights.

Format Adaptation: Output for Tailwind (tailwind.config.js), CSS variables (:root), or generic JSON.

Workflow Examples

1. Generate JSON Theme

Prompt: "Create a dark mode theme for a developer dashboard."

Output:

{ "name": "dark-dev-dashboard", "colors": { "background": "#0f172a", "foreground": "#f8fafc", "primary": { "DEFAULT": "#3b82f6", "hover": "#2563eb", "active": "#1d4ed8" }, "secondary": "#64748b", "accent": "#10b981", "error": "#ef4444", "warning": "#f59e0b", "success": "#22c55e" }, "fonts": { "heading": "Inter, system-ui, sans-serif", "body": "Roboto Mono, monospace" }, "spacing": { "sm": "0.5rem", "md": "1rem", "lg": "1.5rem", "xl": "2rem" }, "borderRadius": { "default": "0.375rem", "card": "0.5rem" } }

2. Generate Tailwind Config Fragment

Prompt: "Give me a tailwind color config for a 'sunset' theme."

Output:

module.exports = { theme: { extend: { colors: { sunset: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', }, } } } }

Best Practices

Accessibility: Ensure contrast ratios meet WCAG AA standards.

Consistency: Use standard naming conventions (primary, secondary, success, error).

Scalability: Include shades (50-900) for versatile usage.

name	theme-factory
description	Generate structured JSON theme configurations for UI components, presentations, or documents. Supports color palettes, typography, and spacing.
license	Apache-2.0