BeClaude

creative-tools

New
18Community RegistryGeneralby Mahid Alhan

Creative output skills for diagrams, UI design, generative art, and visual explanations. Produces publication-quality Mermaid diagrams, distinctive frontends, and ASCII visualizations.

View Source

Summary

This skill enhances Claude Code with creative output capabilities for generating publication-quality Mermaid diagrams, distinctive frontend UI designs, generative art, and ASCII visualizations.

  • It helps developers produce visually compelling explanations, diagrams, and interfaces directly from code or natural language descriptions.

Overview

Intelligent development tools for evidence-based software engineering.

![License: MIT](https://opensource.org/licenses/MIT)

Available Plugins

PluginDescriptionSkills
[spec-workflow](plugins/spec-workflow/README.md)Spec-driven development with proposal creation, TDD, and archiving4 skills
[code-intelligence](plugins/code-intelligence/README.md)Code search and architecture analysis via Exa API2 skills
[skill-tools](plugins/skill-tools/README.md)Tools for creating custom Claude skills1 skill

Quick Install

bash
# Add marketplace
/plugin marketplace add mahidalhan/skilled-intelligence-marketplace

# Install plugins
/plugin install spec-workflow@skilled-intelligence
/plugin install code-intelligence@skilled-intelligence
/plugin install skill-tools@skilled-intelligence

Or use /plugin and select "Browse Plugins" for interactive installation.

Project-Level Installation (Recommended)

Install plugins to your project's `.claude/` directory instead of user-level ~/.claude/ for team consistency.

Create .claude/settings.json in your project root:

json
{
  "extraKnownMarketplaces": {
    "skilled-intelligence": {
      "source": {
        "source": "github",
        "repo": "mahidalhan/skilled-intelligence-marketplace"
      }
    }
  },
  "enabledPlugins": {
    "spec-workflow@skilled-intelligence": true,
    "code-intelligence@skilled-intelligence": true,
    "skill-tools@skilled-intelligence": true
  }
}

Start Claude Code and trust the folder — plugins install automatically.

Benefits: Team consistency, project isolation, version-controlled config, easy onboarding.

Quick Start

spec-workflow

code
Create a proposal for adding user authentication

Generates proposal.md, tasks.md, and spec-delta.md with EARS requirements.

code
Implement the add-user-auth proposal

code-intelligence

code
How do I use React hooks for state management?

Searches billions of GitHub repos for real, working examples.

Setup required: Add EXA_API_KEY=your-key to .env (Get key)

skill-tools

code
Create a skill for processing CSV files

Guides you through skill design and generates the complete structure.

Plugin Management

bash
# List
/plugin list
/plugin marketplace list

# Update
/plugin update spec-workflow@skilled-intelligence

# Enable/Disable
/plugin enable plugin-name@skilled-intelligence
/plugin disable plugin-name@skilled-intelligence

# Uninstall
/plugin uninstall plugin-name@skilled-intelligence
/plugin marketplace remove skilled-intelligence

Alternative Installation Methods

bash
# Git URL
/plugin marketplace add https://github.com/mahidalhan/skilled-intelligence-marketplace.git

# Local development
/plugin marketplace add /path/to/skilled-intelligence-marketplace

Troubleshooting

Plugins not loading?

  1. Restart Claude Code after installation
  2. Check status: /plugin
  3. Verify marketplace: /plugin marketplace list

API key errors (code-intelligence)?

  • •Verify EXA_API_KEY in .env
  • •Install deps: pip install requests python-dotenv

Plugin-specific issues? See individual plugin READMEs.

spec-workflow vs OpenSpec

FeatureOpenSpecspec-workflow
Installationnpm install -g/plugin install
Activation/openspec:proposalNatural language
PlatformStandalone CLIClaude Code
DependenciesNode.jsNone

Methodology by OpenSpec, adapted for Claude Plugins.

Contributing

  1. Fork the repo
  2. Create feature branch
  3. Test with real projects
  4. Submit PR

Links

License

MIT License - See LICENSE

Acknowledgments

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/creative-tools.md https://raw.githubusercontent.com/mahidalhan/skilled-intelligence-marketplace/main/SKILL.md
3
Invoke in Claude Code
/creative-tools

Use Cases

Generate a Mermaid sequence diagram from a textual description of an API workflow.
Create a distinctive frontend UI component with custom styling for a web app prototype.
Produce an ASCII art visualization of a data structure or algorithm for documentation.
Design a generative art piece based on mathematical parameters or code logic.
Build a visual explanation of a complex system architecture using diagrams and annotations.
Convert a markdown specification into a polished Mermaid flowchart for a presentation.

Usage Examples

1

/creative-tools Generate a Mermaid sequence diagram for a user login flow with OAuth2.

2

Create a responsive card component with a gradient background and shadow using HTML/CSS.

3

Draw an ASCII tree diagram showing the directory structure of a React project.

View source on GitHub
frontenddesignmermaiddiagramsasciiartvisualization

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is creative-tools?

This skill enhances Claude Code with creative output capabilities for generating publication-quality Mermaid diagrams, distinctive frontend UI designs, generative art, and ASCII visualizations. It helps developers produce visually compelling explanations, diagrams, and interfaces directly from code or natural language descriptions.

How to install creative-tools?

To install creative-tools: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/creative-tools.md https://raw.githubusercontent.com/mahidalhan/skilled-intelligence-marketplace/main/SKILL.md. Finally, /creative-tools in Claude Code.

What is creative-tools best for?

creative-tools is a skill categorized under General. It is designed for: frontend, design, mermaid, diagrams, ascii, art, visualization. Created by Mahid Alhan.

What can I use creative-tools for?

creative-tools is useful for: Generate a Mermaid sequence diagram from a textual description of an API workflow.; Create a distinctive frontend UI component with custom styling for a web app prototype.; Produce an ASCII art visualization of a data structure or algorithm for documentation.; Design a generative art piece based on mathematical parameters or code logic.; Build a visual explanation of a complex system architecture using diagrams and annotations.; Convert a markdown specification into a polished Mermaid flowchart for a presentation..