task-master-neo-sdlc/mcp-server/src/tools/css-agent-tools.js

Enhanced task management system with Neo SDLC agents and MCP tools for comprehensive, AI-driven software development lifecycle management.

import { z } from "zod";
import { createContentResponse, createErrorResponse } from "./utils.js";

// Placeholder for potential future direct function calls
async function callDirectFunctionPlaceholder(toolName, args, log, context) {
  log.info(`Executing placeholder for ${toolName} with args:`, args);
  // In a real implementation, this would call the corresponding Direct function
  // const result = await someDirectFunction(args, log, context);
  // return handleApiResult(result, log);
  return createContentResponse({ message: `${toolName} executed successfully (placeholder)` }, log);
}

export function registerCssAgentTools(server) {
  const log = server.log || console; // Basic fallback for logging during registration
  const tools = [
    {
      name: "tailwind_generate",
      description: "Generates CSS output for provided Tailwind classes",
      parameters: z.object({
        classes: z.array(z.string()).describe("List of Tailwind CSS class names")
      }),
    },
    {
      name: "css_lint",
      description: "Lints CSS code and returns issues",
      parameters: z.object({
        code: z.string().describe("CSS code string to lint")
      }),
    },
    {
      name: "pattern_suggest",
      description: "Suggests HTML/CSS patterns for different layouts",
      parameters: z.object({
        layout: z.string().describe("Desired layout pattern description"),
        responsive: z.boolean().optional().default(true).describe("Include responsive variants?")
      }),
    },
    {
      name: "analyze_css",
      description: "Analyzes existing CSS code to identify issues, redundancies, and optimization opportunities",
      parameters: z.object({
        code: z.string().describe("CSS code string to analyze"),
        framework: z.string().optional().default('tailwind').describe("CSS framework context (e.g., tailwind, bootstrap)")
      }),
    },
    {
      name: "optimize_tailwind",
      description: "Optimizes Tailwind CSS classes, removing redundancies and suggesting more efficient alternatives",
      parameters: z.object({
        classes: z.string().describe("String of Tailwind classes to optimize")
      }),
    },
    {
      name: "analyze_responsive",
      description: "Analyzes HTML/CSS for responsive design issues and suggests improvements",
      parameters: z.object({
        code: z.string().describe("HTML/CSS code string to analyze"),
        breakpoints: z.array(z.string()).optional().default(['sm', 'md', 'lg', 'xl']).describe("Breakpoints to consider")
      }),
    },
    {
      name: "css_to_tailwind",
      description: "Converts traditional CSS to equivalent Tailwind CSS classes",
      parameters: z.object({
        css: z.string().describe("Traditional CSS code string to convert")
      }),
    },
    {
      name: "check_accessibility",
      description: "Evaluates CSS and HTML for accessibility issues and provides WCAG-compliant recommendations",
      parameters: z.object({
        code: z.string().describe("HTML/CSS code string to evaluate")
      }),
    },
    {
      name: "generate_theme",
      description: "Generates a Tailwind theme configuration based on design requirements",
      parameters: z.object({
        // Using passthrough() to allow flexible parameters for theme generation
        parameters: z.object({}).passthrough().describe("Object containing theme parameters (e.g., colors, fonts)")
      }),
    },
    {
      name: "get_component_pattern",
      description: "Provides reusable component patterns optimized for Tailwind CSS",
      parameters: z.object({
        component_type: z.string().describe("Type of component pattern needed (e.g., 'button', 'card')"),
        style: z.string().optional().default('modern').describe("Desired style (e.g., 'modern', 'minimal')"),
        responsive: z.boolean().optional().default(true).describe("Include responsive variants?")
      }),
    },
    {
      name: "generate_animation",
      description: "Generates CSS/Tailwind animations for various UI interactions",
      parameters: z.object({
        animation_type: z.string().describe("Type of animation needed (e.g., 'fade-in', 'slide-up')"),
        duration: z.string().optional().default('normal').describe("Animation duration (e.g., 'fast', 'normal', 'slow')"),
        complexity: z.string().optional().default('simple').describe("Animation complexity")
      }),
    },
    {
      name: "css_knowledge_base",
      description: "Provides access to CSS and Tailwind CSS documentation, examples, and best practices",
      parameters: z.object({
        query: z.string().describe("Search query for the knowledge base"),
        context: z.string().optional().default('auto').describe("Context filter (e.g., 'tailwind', 'css', 'auto')")
      }),
    },
    {
      name: "validate_css",
      description: "Validates CSS code against W3C standards and best practices",
      parameters: z.object({
        code: z.string().describe("CSS code string to validate"),
        standard: z.string().optional().default('css3').describe("CSS standard level (e.g., 'css3')"),
        check_accessibility: z.boolean().optional().default(true).describe("Include accessibility checks?")
      }),
    },
    {
      name: "css_research",
      description: "Researches latest CSS developments and validates project dependencies",
      parameters: z.object({
        query: z.string().optional().describe("Specific research query"),
        dependencies: z.object({}).passthrough().optional().describe("Project dependencies (e.g., { 'tailwindcss': '3.4.1' })"),
        check_updates: z.boolean().optional().default(true).describe("Check for dependency updates?")
      }),
    },
    // NEW: Design Token Tools
    {
      name: "design_token_generator",
      description: "Generates design tokens from design specifications or existing CSS.",
      parameters: z.object({
        input: z.object({
          colors: z.record(z.string()).optional().describe("Record of color names to hex/rgb values"),
          typography: z.record(z.any()).optional().describe("Record defining typography scales, families, etc."),
          spacing: z.record(z.string()).optional().describe("Record of spacing names to values (e.g., rem, px)"),
          shadows: z.record(z.string()).optional().describe("Record of shadow names to CSS shadow strings"),
          breakpoints: z.record(z.string()).optional().describe("Record of breakpoint names to values"),
          format: z.enum(["json", "css", "tailwind", "style-dictionary"]).describe("Desired output format for the tokens")
        }).describe("Input containing design specifications and desired format")
      }),
    },
    {
      name: "figma_token_sync",
      description: "Syncs with Figma projects to extract or update design tokens.",
      parameters: z.object({
        input: z.object({
          figmaFileId: z.string().describe("ID of the Figma file to sync with"),
          nodeIds: z.array(z.string()).optional().describe("Specific Figma node IDs to target (optional)"),
          tokenTypes: z.array(z.enum(["colors", "typography", "spacing", "effects", "all"])).describe("Types of tokens to extract/update"),
          actionType: z.enum(["extract", "update"]).describe("Whether to extract tokens from Figma or update Figma based on tokens"),
          outputFormat: z.enum(["json", "css", "tailwind", "style-dictionary"]).describe("Desired output format for extracted tokens")
        }).describe("Input containing Figma file details and sync parameters")
      }),
    },
    {
      name: "token_transformer",
      description: "Transforms design tokens between different formats and platforms.",
      parameters: z.object({
        input: z.object({
          tokens: z.object({}).passthrough().describe("The design token object to transform"),
          sourceFormat: z.enum(["figma", "json", "css", "tailwind", "style-dictionary"]).describe("Format of the input tokens"),
          targetFormat: z.enum(["json", "css", "scss", "less", "tailwind", "style-dictionary", "android", "ios", "web"]).describe("Desired output format/platform")
        }).describe("Input containing tokens and transformation details")
      }),
    },
  ];

  tools.forEach(tool => {
    server.addTool({
      name: tool.name,
      description: tool.description,
      parameters: tool.parameters,
      execute: async (args, { log, session }) => {
        try {
          // Placeholder execution logic
          // In a real scenario, you might have direct functions for each tool
          // For now, just log and return success
          return await callDirectFunctionPlaceholder(tool.name, args, log, { session });
        } catch (error) {
          log.error(`Error executing tool ${tool.name}: ${error.message}`);
          return createErrorResponse(`Failed to execute ${tool.name}: ${error.message}`);
        }
      }
    });
  });

  log.info(`Registered ${tools.length} CSS Agent tools.`);
}