superdesignExpert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Install via ClawdBot CLI:
clawdbot install mpociot/superdesignGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Feb 24, 2026
This skill is ideal for designing and implementing high-conversion landing pages for startups or marketing campaigns. It provides structured workflows for layout, theme selection, and responsive design, ensuring modern aesthetics with accessibility compliance. The guidelines help create visually appealing pages that engage users and drive actions like sign-ups or purchases.
Use this skill to build intuitive dashboards for data visualization and management tools, such as analytics platforms or admin panels. It offers theme patterns like dark mode and glassmorphism, along with component design tips for cards and buttons, enhancing usability and visual clarity. The responsive design rules ensure dashboards work seamlessly across devices.
This skill supports the development of reusable UI component libraries for design systems in large organizations or product teams. It includes detailed guidelines on colors, fonts, animations, and accessibility, enabling consistent and scalable component creation. The implementation rules with Tailwind CSS and Flowbite streamline prototyping and integration.
Apply this skill to design product pages for e-commerce websites, focusing on layout, theme consistency, and user interactions. It helps create engaging interfaces with proper spacing, shadows, and animations for elements like buttons and forms, improving the shopping experience. Accessibility tips ensure inclusivity for all users.
Ideal for crafting personal or agency portfolio websites that showcase work with modern design trends. The skill provides theme options like neo-brutalism or glassmorphism, along with responsive and animation guidelines, making portfolios stand out. Quick reference tables aid in fast decision-making for fonts and colors.
Freelancers can use this skill to offer specialized frontend design services, charging per project or hourly rates for creating landing pages, dashboards, or custom UIs. The structured workflows and modern guidelines help deliver high-quality designs quickly, attracting clients in tech and marketing. Revenue comes from direct client payments and repeat business.
Startups or companies building SaaS products can integrate this skill into their development process to ensure consistent and appealing UI design across their applications. It reduces design debt and speeds up prototyping, leading to better user retention and competitive advantage. Revenue is generated through subscription models or one-time sales.
Design agencies can leverage this skill as a consultancy tool to provide expert frontend design advice and implementation for client projects. It helps standardize design processes, improve team efficiency, and offer value-added services like accessibility audits. Revenue streams include retainer contracts and project-based consulting fees.
💬 Integration Tip
Integrate this skill by following the design workflow step-by-step, starting with ASCII wireframes and using the provided CSS patterns and CDN links for quick implementation in projects.
Scored Apr 15, 2026
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.
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use...
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architect...
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.