ui-mockup-visualizer
UI Mockup Visualizer
Overview
Use this skill to turn UI/UX discussion into concrete HTML mockups quickly, so the user can verify whether the agent is visualizing the right thing before implementation starts.
Default to this skill whenever a user wants to see the layout the agent is describing, wants UI/UX ideas, wants visual comparison, or needs a fast wireframe for websites, mobile apps, or desktop apps. Skip it only when the user explicitly asks for text-only output.
Read these references as needed:
references/mockup-design-system.mdreferences/pattern-benchmarks.md
Strong trigger cues:
- the user wants to "see" what the agent means before implementation
- the user asks for several UI directions to compare
- the user asks for a mockup, wireframe, layout sketch, or HTML preview
- the user is discussing a specific surface such as sidebar, modal, dashboard block, form area, mobile screen, or desktop panel
Workflow
More from thienanblog/awesome-ai-agent-skills
laravel-11-12-app-guidelines
Guidelines and workflow for working on Laravel 11 or Laravel 12 applications across common stacks (API-only or full-stack), including optional Docker Compose/Sail, Inertia + React, Livewire, Vue, Blade, Tailwind v4, Fortify, Wayfinder, PHPUnit, Pint, and Laravel Boost MCP tools. Use when implementing features, fixing bugs, or making UI/backend changes while following project-specific instructions (AGENTS.md, docs/).
734docker-local-dev
Generate Docker Compose and Dockerfile configurations for local development through interactive Q&A. Supports PHP/Laravel, WordPress, Drupal, Joomla, Node.js, and Python stacks with Nginx, Supervisor/PM2, databases, Redis, and email testing. Always asks clarifying questions before generating configurations.
54design-system-generator
Generate a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across SPAs, traditional server-rendered sites, and hybrid systems. Includes tokens, component rules, accessibility gates, and production asset/manifest guidance.
34agents-md-generator
Generate or update CLAUDE.md/AGENTS.md files for AI coding agents through auto-scanning project files combined with interactive Q&A. Supports multiple tech stacks, development environments, and preserves customizations when updating.
32documentation-guidelines
Write or update backend feature documentation that follows a repo's DOCUMENTATION_GUIDELINES.md (or equivalent) across any project. Use when asked to create/update module docs, API contracts, or backend documentation that must include architecture, endpoints, payloads, Mermaid diagrams, and seeding instructions.
31ask-questions-if-underspecified
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
28