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.
Calls external URL not in known-safe list
https://cdn.tailwindcss.comAudited Apr 16, 2026 · audit v1.0
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 19, 2026
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
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.
Expert guidance on mobile-first UI/UX design, color systems, typography, accessibility (WCAG 2.2), Tailwind + Shadcn/ui integration, micro-interactions, and...
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.