Ui Ux Polish

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-17T03:15:40.264Z",
    "slug": "dicklesworthstone-ui-ux-polish",
    "source_url": "https://github.com/Dicklesworthstone/agent_flywheel_clawdbot_skills_and_integrations/tree/main/skills/ui-ux-polish",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "4340ec23c453cd2411ae515c24714f6d4642edfbe18a63274b6596325846a475",
    "tree_hash": "cfd3ae2db168b1c7b1291d48ff2151fef9814a30c58755c0b16c3c8f01fc6259"
  },
  "skill": {
    "name": "ui-ux-polish",
    "description": "Iterative UI/UX polishing workflow for web applications. The exact prompt and methodology for achieving Stripe-level visual polish through multiple passes.",
    "summary": "Iterative UI/UX polishing workflow for web applications. The exact prompt and methodology for achiev...",
    "icon": "🎨",
    "version": "1.0.0",
    "author": "Dicklesworthstone",
    "license": "MIT",
    "category": "design",
    "tags": [
      "ui-ux",
      "design",
      "web-apps",
      "frontend",
      "visual-polish"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "Pure documentation skill containing only text prompts and methodology. No executable code, file access, network calls, or system commands. All 60 static findings are false positives from the scanner misinterpreting text patterns as security issues (e.g., 'ultrathink' flagged as C2, normal prose as cryptographic algorithms, GitHub URLs as network calls).",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 37,
            "line_end": 39
          },
          {
            "file": "SKILL.md",
            "line_start": 39,
            "line_end": 51
          },
          {
            "file": "SKILL.md",
            "line_start": 51,
            "line_end": 54
          },
          {
            "file": "SKILL.md",
            "line_start": 54,
            "line_end": 101
          },
          {
            "file": "SKILL.md",
            "line_start": 101,
            "line_end": 112
          },
          {
            "file": "SKILL.md",
            "line_start": 112,
            "line_end": 194
          },
          {
            "file": "SKILL.md",
            "line_start": 194,
            "line_end": 199
          },
          {
            "file": "SKILL.md",
            "line_start": 199,
            "line_end": 208
          },
          {
            "file": "SKILL.md",
            "line_start": 208,
            "line_end": 210
          },
          {
            "file": "SKILL.md",
            "line_start": 210,
            "line_end": 213
          },
          {
            "file": "SKILL.md",
            "line_start": 213,
            "line_end": 215
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 405,
    "audit_model": "claude",
    "audited_at": "2026-01-17T03:15:40.263Z"
  },
  "content": {
    "user_title": "Polish web app UI/UX with iterative enhancement workflow",
    "value_statement": "Your web app looks decent but lacks world-class polish. Use this iterative workflow to incrementally enhance UI/UX across desktop and mobile, achieving Stripe-level visual quality through multiple focused passes.",
    "seo_keywords": [
      "UI UX polish",
      "web design enhancement",
      "Stripe-level UI",
      "iterative design workflow",
      "visual polish prompts",
      "Claude Code",
      "Codex",
      "mobile desktop optimization",
      "frontend design",
      "user interface improvement"
    ],
    "actual_capabilities": [
      "Provides exact prompts for UI/UX enhancement",
      "Guides iterative improvement process (10+ passes)",
      "Separate optimization strategies for desktop and mobile",
      "Best practices for visual polish techniques",
      "Integration tips with modern tech stacks (Next.js, React, Tailwind)",
      "Progress tracking methodology for cumulative improvements"
    ],
    "limitations": [
      "Does not modify code directly; provides prompts to guide AI agents",
      "Requires existing working app with basic styling already in place",
      "Does not fix bugs or broken functionality",
      "Cannot establish design systems from scratch"
    ],
    "use_cases": [
      {
        "target_user": "Frontend developers",
        "title": "Elevate existing web apps",
        "description": "Transform decent-looking web applications into polished, professional interfaces following industry best practices."
      },
      {
        "target_user": "Product designers",
        "title": "Refine visual polish iteratively",
        "description": "Apply systematic improvements through multiple passes to achieve high-quality visual presentation."
      },
      {
        "target_user": "AI-assisted development teams",
        "title": "Guide AI agents for UI work",
        "description": "Provide AI agents with effective prompts to make meaningful UI/UX enhancements automatically."
      }
    ],
    "prompt_templates": [
      {
        "title": "Main Polish Prompt",
        "scenario": "Iterative UI/UX enhancement",
        "prompt": "I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way. Use ultrathink."
      },
      {
        "title": "General Scrutiny",
        "scenario": "Application-wide review",
        "prompt": "Great, now I want you to super carefully scrutinize every aspect of the application workflow and implementation and look for things that just seem sub-optimal or even wrong/mistaken to you, things that could very obviously be improved from a user-friendliness and intuitiveness standpoint, places where our UI/UX could be improved and polished to be slicker, more visually appealing, and more premium feeling and just ultra high quality, like Stripe-level apps."
      },
      {
        "title": "Mobile Optimization",
        "scenario": "Mobile-specific improvements",
        "prompt": "Focus specifically on mobile UI/UX optimization. Consider touch target sizes, responsive breakpoints, mobile-specific navigation, gesture support, and mobile performance. What changes would make this app exceptional on mobile devices?"
      },
      {
        "title": "Desktop Optimization",
        "scenario": "Desktop-specific improvements",
        "prompt": "Focus specifically on desktop UI/UX optimization. Consider keyboard navigation, hover states, multi-column layouts, sidebar navigation, and power user shortcuts. What changes would make this app exceptional on desktop?"
      }
    ],
    "output_examples": [
      {
        "input": "Apply UI/UX polish to my dashboard application",
        "output": [
          "Improved shadow and depth effects for better visual hierarchy",
          "Consistent border radius and spacing across components",
          "Enhanced hover and focus states for interactive elements",
          "Optimized typography scale for readability",
          "Better loading and empty state designs",
          "Touch-friendly button sizes for mobile devices"
        ]
      },
      {
        "input": "Make my landing page look more premium and professional",
        "output": [
          "Refined color palette with better contrast ratios",
          "Added subtle micro-animations for engagement",
          "Improved hero section visual impact",
          "Streamlined navigation with clearer hierarchy",
          "Enhanced call-to-action button styling",
          "Consistent spacing system across sections"
        ]
      }
    ],
    "best_practices": [
      "Run multiple iterations (10+) for cumulative improvements rather than expecting dramatic changes in a single pass",
      "Separate desktop and mobile optimization to avoid compromises that work poorly on both platforms",
      "Review AI-generated changes carefully to ensure no regressions in functionality"
    ],
    "anti_patterns": [
      "Using this workflow on broken or buggy apps instead of fixing issues first",
      "Applying polish prompts when no basic styling or design system exists",
      "Skipping iterations when changes seem minor; small improvements compound significantly"
    ],
    "faq": [
      {
        "question": "Which AI models work best with this skill?",
        "answer": "Claude Code with Opus 4.5 and Codex with GPT 5.2 (High/Extra-High reasoning) work excellently. Gemini CLI also produces good results."
      },
      {
        "question": "How many iterations are recommended?",
        "answer": "Plan for 10 or more iterations. Each pass adds incremental improvements that compound dramatically over time."
      },
      {
        "question": "Can multiple agents work on polish simultaneously?",
        "answer": "Yes, multiple agents can work together. Use file reservations to avoid conflicts and focus on different areas of the application."
      },
      {
        "question": "What data does this skill access?",
        "answer": "This is a prompt-only skill that provides text guidance. It does not access files, networks, or execute any code."
      },
      {
        "question": "When should I not use this workflow?",
        "answer": "Do not use on broken apps, when starting from scratch, or when no basic styling exists. This is for refining working applications."
      },
      {
        "question": "How does this compare to complete design overhauls?",
        "answer": "This workflow enhances already-working apps incrementally. Complete overhauls require establishing design systems first, which this does not do."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 226
    }
  ]
}