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
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.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.