Frontend Design

// Arquivo de exemplo: plugins/frontend-design/index.js
// Ajuste as funções e a assinatura conforme a API do carregador de plugins da sua aplicação.

module.exports = {
    name: 'frontend-design',
    version: '1.0.0',
    // Função de inicialização (opcional)
    init: async function (opts) {
      console.log('frontend-design plugin inicializado', opts || {});
      // inicialize dependências aqui, se necessário
    },
  
    // Função principal que o carregador pode chamar. Ajuste nome/assinatura conforme seu sistema.
    handle: async function (input) {
      console.log('frontend-design handle chamado com:', input);
      // Exemplo de resposta mínima
      return {
        ok: true,
        message: 'Plugin frontend-design funcionando (substitua pela lógica real)'
      };
    }
  };

{
  "name": "frontend-design",
  "version": "1.0.0",
  "description": "Generates distinctive frontend interfaces",
  "author": {
    "name": "1bertogit"
  },
  "keywords": ["skill", "frontend", "design"]
}

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-16T13:57:05.526Z",
    "slug": "1bertogit-frontend-design",
    "source_url": "https://github.com/1bertogit/modern-face-definitive/tree/main/.claude/skills/frontend-design",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "d39adf3a983de7dafc75991590d54f091755f7e4163d5a5ed085ecd719157184",
    "tree_hash": "0923ccb707a29ee2dd4cbe3e2cc7b0d57b2bd4685d81ad05e085b81f2cf783e5"
  },
  "skill": {
    "name": "frontend-design",
    "description": "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.",
    "summary": "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill wh...",
    "icon": "🎨",
    "version": "1.0.0",
    "author": "1bertogit",
    "license": "Complete terms in LICENSE.txt",
    "category": "design",
    "tags": [
      "frontend",
      "ui-design",
      "web-development",
      "react",
      "css"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "external_commands",
      "network",
      "filesystem"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "This is a prompt-based skill containing design guidelines and documentation. Static analysis flagged 66 findings, all of which are false positives from pattern matching in documentation text. The JavaScript plugin file contains only basic logging template code with no network, filesystem, or command execution capabilities. No actual security risks identified.",
    "risk_factor_evidence": [
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "README.md",
            "line_start": 16,
            "line_end": 20
          }
        ]
      },
      {
        "factor": "network",
        "evidence": [
          {
            "file": "README.md",
            "line_start": 26,
            "line_end": 26
          },
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "filesystem",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 5,
    "total_lines": 295,
    "audit_model": "claude",
    "audited_at": "2026-01-16T13:57:05.525Z"
  },
  "content": {
    "user_title": "Create distinctive frontend interfaces with bold design",
    "value_statement": "This skill helps you build production-grade web interfaces with memorable aesthetics. It guides creative choices for typography, color, motion, and layout to avoid generic AI-generated designs.",
    "seo_keywords": [
      "frontend design",
      "Claude Code frontend",
      "React components",
      "UI design",
      "CSS animations",
      "web interface creation",
      "Claude web development",
      "production-grade code",
      "distinctive design",
      "Codex frontend"
    ],
    "actual_capabilities": [
      "Creates production-ready HTML, CSS, and JavaScript code for web interfaces",
      "Implements React and Vue components with full functionality and animations",
      "Designs distinctive typography systems and color palettes",
      "Adds high-impact animations and micro-interactions using CSS or Motion library",
      "Builds responsive layouts with creative spatial composition and asymmetric designs",
      "Provides design thinking guidance for bold aesthetic directions"
    ],
    "limitations": [
      "Does not generate backend code, APIs, or database schemas",
      "Does not handle complex state management beyond component-level state",
      "Does not integrate with external services or authentication systems",
      "Focuses on frontend aesthetics and implementation only"
    ],
    "use_cases": [
      {
        "target_user": "Frontend Developers",
        "title": "Build production UI components quickly",
        "description": "Generate polished React or Vue components with distinctive aesthetics, animations, and full accessibility support"
      },
      {
        "target_user": "UX Designers",
        "title": "Prototype visual concepts rapidly",
        "description": "Create high-fidelity prototypes with bold design directions and interactive elements to test ideas"
      },
      {
        "target_user": "Full-stack Engineers",
        "title": "Create landing pages and interfaces",
        "description": "Build complete landing pages or application interfaces with responsive layouts from natural language descriptions"
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic component",
        "scenario": "Create a simple interactive element",
        "prompt": "Create a button component with hover animation, focus states, and ripple effect on click"
      },
      {
        "title": "Full page design",
        "scenario": "Design a complete landing page",
        "prompt": "Build a landing page for a sustainable coffee shop with warm earth tones, smooth scroll animations, and organic shapes"
      },
      {
        "title": "Interactive dashboard",
        "scenario": "Create a data visualization interface",
        "prompt": "Create a dark-mode analytics dashboard with animated charts, real-time data filters, hover tooltips, and staggered reveal animations"
      },
      {
        "title": "Complex application",
        "scenario": "Build a full web application interface",
        "prompt": "Build a music streaming player with album art carousel, playback controls, playlist management, drag-and-drop sorting, and synchronized animations matching audio playback"
      }
    ],
    "output_examples": [
      {
        "input": "Create a settings panel with dark mode toggle",
        "output": [
          "Complete React component with animated toggle switch",
          "Smooth theme transition using CSS custom properties",
          "Accessibility attributes for keyboard navigation and screen readers",
          "Settings persistence using local storage",
          "Responsive layout for mobile and desktop"
        ]
      },
      {
        "input": "Build a hero section for a tech startup landing page",
        "output": [
          "Bold typography with distinctive font pairing",
          "Animated gradient background with subtle motion",
          "Staggered text reveal on page load",
          "Call-to-action buttons with hover effects",
          "Responsive grid layout with creative asymmetry"
        ]
      },
      {
        "input": "Design a card component for a product gallery",
        "output": [
          "Card layout with image, title, description, and price",
          "Hover animation with shadow lift and scale effect",
          "Color-coded tags with custom styling",
          "Smooth transitions between states",
          "Grid system for responsive gallery layout"
        ]
      }
    ],
    "best_practices": [
      "Provide clear context about purpose, target audience, and technical constraints for better design decisions",
      "Specify the desired aesthetic direction such as minimalist, brutalist, retro, organic, or luxury",
      "Mention specific frameworks like React or Vue and any required libraries to get optimized code output"
    ],
    "anti_patterns": [
      "Asking for generic components without specifying design direction or brand personality",
      "Requesting overly complex designs with many animations without considering performance impact",
      "Skipping accessibility requirements for interactive elements like forms, buttons, and navigation"
    ],
    "faq": [
      {
        "question": "Which frameworks does this skill support?",
        "answer": "The skill generates code for HTML, CSS, JavaScript, React, Vue, and other frontend frameworks based on your requirements."
      },
      {
        "question": "Can it create complete web applications?",
        "answer": "It creates frontend interfaces with full functionality. Backend integration and state management require additional tools or manual implementation."
      },
      {
        "question": "Does it handle responsive design automatically?",
        "answer": "Yes, all generated components include responsive layouts that adapt to different screen sizes using modern CSS techniques."
      },
      {
        "question": "Is my code and project data kept secure?",
        "answer": "The skill runs locally within Claude Code and does not transmit code or project data to external servers."
      },
      {
        "question": "Why does my design look different each time?",
        "answer": "The skill intentionally varies aesthetic choices to create unique designs and avoid repetitive generic patterns."
      },
      {
        "question": "How is this different from standard code generation?",
        "answer": "This skill emphasizes distinctive aesthetics, bold creative choices, and production-ready quality over generic template-based output."
      }
    ]
  },
  "file_structure": [
    {
      "name": "index.js",
      "type": "file",
      "path": "index.js",
      "lines": 22
    },
    {
      "name": "plugin.json",
      "type": "file",
      "path": "plugin.json",
      "lines": 10
    },
    {
      "name": "README.md",
      "type": "file",
      "path": "README.md",
      "lines": 31
    },
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 42
    }
  ]
}