Auto Design Clawhub

Auto-select and apply design systems from awesome-design-md based on project type and task context

Security Scan

The skill's described purpose (selecting and applying design systems) is plausible, but there are several mismatches and autonomy concerns — notably always-on activation, undeclared environment overrides, an unexpected remote download origin, and an unnecessary declared dependency (node) given there is no code — so review before enabling.

Purpose & Capability

The skill's name and description match the instructions (detect project type, pick a brand, download DESIGN.md, and write a local DESIGN.md). However there are inconsistencies: the registry homepage is moyubox/auto-design while the runtime curl pulls from raw.githubusercontent.com/VoltAgent/awesome-design-md (different owner). The skill declares node and curl as required binaries but provides only instruction examples; node may be unnecessary for an instruction-only skill.

Instruction Scope

SKILL.md instructs the agent to scan project files (file paths, package.json, existing code), write files (.claude/... and Docs/Design), and to curl remote content. It also documents environment variables (AUTO_DESIGN_DEFAULT, AUTO_DESIGN_AUTO, AUTO_DESIGN_PREFERENCE) that are not declared in the registry metadata. Automatic activation triggers on broad keywords and file changes, which gives the skill broad discretion to read project files whenever active.

Install Mechanism

This is an instruction-only skill with no install spec or code files, so nothing will be written to disk by an installer step. That reduces installation risk. The single network action shown is curl against a GitHub raw URL — a common pattern for fetching content — but see note about unexpected repository owner.

Credentials

Registry metadata lists no required environment variables, but SKILL.md documents several optional env vars to override behavior. Those env vars are not declared in requires.env (mismatch). The skill reads project files (package.json, code, CLAUDE.md), which is appropriate for its purpose but can expose sensitive info if run automatically in repositories that include secrets.

Persistence & Privilege

always: true is set, meaning the skill is active for every agent run. Combined with the instruction scope (automatic file scanning and remote downloads), this increases the blast radius — the skill could read many project files and fetch remote resources continuously. There is no justification in SKILL.md for why it must be always active.

What to consider before installing

Before enabling this skill: 1) Verify the canonical source — confirm whether the project should fetch design files from moyubox/auto-design or VoltAgent/awesome-design-md; the mismatch could be benign or an error. 2) Ask the publisher why always: true is necessary; prefer manual or opt-in activation for repository scans. 3) Confirm whether node is actually required; if the skill only uses curl and file reads, node may be unnecessary. 4) Treat automatic file scanning as sensitive: do not enable in repositories containing secrets or private credentials, and consider running in a sandbox/test repo first. 5) If you approve, restrict the skill's scope (disable auto-selection, set AUTO_DESIGN_AUTO=false) and verify downloaded DESIGN.md files come from a trusted repo before applying changes. If the publisher cannot explain the repo mismatch and the always-on need, consider marking this skill untrusted.

Auto Design

Intelligent design system selector that automatically picks the best style from awesome-design-md for your project.

Philosophy

Stop asking "what design should I use?" — let the AI figure it out based on:

• Project type (tool, dashboard, marketing, docs)
• Target audience (developers, designers, consumers)
• Technology stack (Vue, React, vanilla)
• Task context (creating, optimizing, refactoring)

Trigger Conditions

This skill activates automatically when:

Explicit Requests

• "Create a new page/component"
• "Design a [something]"
• "Make it look like [brand]"
• "What style should I use?"

Implicit Context

• User creates Vue/React component files
• User mentions "design", "style", "UI", "UX"
• User requests optimization of existing UI
• Any task involving CSS/styling decisions

Keywords That Trigger

design, style, theme, UI, UX, layout, component
page, screen, interface, visual, look, appearance
optimize, improve, refactor, enhance, polish

Smart Selection Logic

Decision Matrix

Project Type Mapping:
  developer-tool:
    primary: vercel
    alternatives: [linear, cursor, raycast]
    reason: "Clean, professional, code-centric"
    
  ai-ml-product:
    primary: claude
    alternatives: [cohere, voltagent]
    reason: "Warm, human-centered, modern"
    
  documentation:
    primary: mintlify
    alternatives: [notion]
    reason: "Reading-optimized, clear hierarchy"
    
  marketing-site:
    primary: stripe
    alternatives: [apple, framer]
    reason: "Elegant gradients, premium feel"
    
  data-dashboard:
    primary: linear
    alternatives: [supabase, sentry]
    reason: "Data-dense, precise, dark-friendly"

Context Detection

The skill analyzes:

1. File paths: frontend/src/views/ → Vue project
2. Package.json: React? Vue? Dependencies?
3. CLAUDE.md: Project description and goals
4. User's words: "tool", "dashboard", "landing page"
5. Existing code: Current color schemes, component patterns

Usage Examples

Example 1: Tool Page

User: "Create a password generator"
AI: Detects "tool" → Selects Vercel
Result: Clean black/white UI with blue accents

Example 2: Documentation

User: "Build an API docs page"
AI: Detects "docs" → Selects Mintlify
Result: Green-accented, reading-optimized layout

Example 3: Override

User: "Make it like Linear"
AI: User specified → Uses Linear regardless
Result: Purple-accented, minimal data-dense UI

Execution Flow

Step 1: Analyze Context (Automatic)

context = {
  projectType: analyzeProject(),     // "toolbox", "saas", "docs"
  techStack: detectFramework(),      // "Vue 3", "React", "vanilla"
  userIntent: parseUserRequest(),    // "create", "optimize", "refactor"
  existingDesign: scanCurrentStyles() // Current colors, fonts
}

Step 2: Select Design System

selection = {
  brand: selectBrand(context),       // "vercel", "linear", etc.
  confidence: calculateConfidence(), // 0.0 - 1.0
  reason: generateReason(),          // Why this choice
  alternatives: getAlternatives()    // Backup options
}

Step 3: Download & Apply

# Auto-download from awesome-design-md
curl https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/{brand}/DESIGN.md

# Save to project
mkdir -p Docs/Design
cp downloaded.md Docs/Design/{brand}-DESIGN.md

Step 4: Generate Local Reference

creates DESIGN.md with:

• Selected brand info
• Core design tokens (colors, fonts, spacing)
• Usage instructions
• Generated timestamp

Step 5: Apply to Implementation

When creating UI:

• Uses selected brand's color palette
• Follows typography hierarchy
• Applies spacing system
• Uses component patterns

Brand Library

Available Brands (58 total)

Developer Tools:

• Vercel (default) - Black/white, Geist font, precise
• Linear - Purple, minimal, data-dense
• Cursor - Dark IDE, gradient accents
• Raycast - Dark chrome, vibrant colors
• Supabase - Emerald, code-first

AI/ML:

• Claude - Warm terracotta, editorial
• Cohere - Vibrant gradients, dashboard
• Mistral - Purple, French minimalism

Documentation:

• Mintlify - Green, reading-optimized
• Notion - Warm, serif headings

Marketing:

• Stripe - Purple gradients, weight-300
• Apple - Premium whitespace, SF Pro
• Framer - Bold black/blue, motion

Configuration

Environment Variables

# Override default brand
AUTO_DESIGN_DEFAULT=linear

# Disable auto-selection
AUTO_DESIGN_AUTO=false

# Specify user preference
AUTO_DESIGN_PREFERENCE=claude

Per-Project Config

Add to CLAUDE.md or .clauderc:

design:
  default: vercel
  allowed: [vercel, linear, mintlify]
  disabled: [stripe]  # Exclude if not relevant

Cross-Platform Conversion

For Claude Code Users

If you have this ClawHub skill and need to use it with Claude Code:

Option 1: Automatic Conversion (Recommended)

# Run this command in the skill directory
mkdir -p .claude/skills/auto-design && \
echo "# Auto Design\n\n## Name\nauto-design\n\n## Description\nAuto-select and apply design systems from awesome-design-md" \
  > .claude/skills/auto-design/skill.md && \
tail -n +35 SKILL.md >> .claude/skills/auto-design/skill.md

Option 2: AI-Assisted Conversion Tell Claude:

"Convert this ClawHub skill to Claude Code format. 
 The file is at .claude/skills/auto-design-clawhub/SKILL.md"

Option 3: Manual Steps

1. Copy SKILL.md content (skip YAML frontmatter)
2. Create .claude/skills/auto-design/skill.md
3. Add:

   ## Name
   auto-design
   
   ## Description
   [from metadata]
   

4. Keep all trigger conditions and execution steps

Conversion Checklist for AI Agents

• Extract metadata.description as "## Description"
• Extract name as "## Name"
• Preserve all markdown content after frontmatter
• Ensure trigger conditions are clear
• Maintain execution steps order
• Test conversion output works in Claude Code

Technical Implementation

Auto-Selection Algorithm

function selectBrand(context) {
  // User override takes priority
  if (context.userPreference) {
    return brands[context.userPreference];
  }
  
  // Match by keywords in request
  for (const [keyword, brand] of keywordMappings) {
    if (context.request.includes(keyword)) {
      return brand;
    }
  }
  
  // Match by project type
  const typeMap = {
    'tool': 'vercel',
    'dashboard': 'linear',
    'docs': 'mintlify',
    'landing': 'stripe'
  };
  
  return typeMap[context.projectType] || 'vercel';
}

Confidence Scoring

confidence = {
  keywordMatch: 0.9,      // User said "like Linear"
  projectTypeMatch: 0.8,  // Tool project → Vercel
  default: 0.7            // Fallback
}

Integration with Design Extractor

These two skills work together:

Design Extractor (analyze existing)
    ↓
Extracts current design tokens
    ↓
Auto Design (suggests improvements)
    ↓
Recommends closest awesome-design-md match
    ↓
Applies selected design system

Output Files

File	Purpose
DESIGN.md	Quick reference for current project
Docs/Design/{brand}-DESIGN.md	Full design system spec
Docs/DevLog/YYYY-MM-DD_design.md	Decision log

AI Compatibility Notes

For AI agents reading this file:

This skill is designed to be auto-convertible between platforms:

1. ClawHub (native): Uses YAML frontmatter
2. Claude Code: Uses markdown headers
3. Future platforms: Parse this file's structure

Key sections to extract:

• metadata.description → Always use as description
• ## Trigger Conditions → Activation rules
• ## Execution Steps → Implementation guide
• Brand mappings → Core logic

Never remove the aiCompatibility section when porting.

License

MIT-0 (Public Domain)

See Also

• awesome-design-md - Design system collection
• Design Extractor - Complementary skill
• ClawHub - Skill registry
• Claude Code - AI coding assistant

---

AI Conversion Note: This SKILL.md is self-documenting for cross-platform use. To convert to Claude Code, an AI should:

1. Parse YAML frontmatter for metadata
2. Create new file with "## Name" and "## Description" headers
3. Copy all content after frontmatter
4. Save to .claude/skills/auto-design/skill.md