xiaopi-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 a-din/xiaopi-superdesignGrade Fair — 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 17, 2026 · audit v1.0
Generated Oct 10, 2026
A startup needs a high-converting landing page to showcase their product. Using the skill's layout wireframing and modern theme patterns, they can quickly build a Vercel/Linear-style dark mode page with oklch colors and smooth micro-interactions to attract early adopters.
An e-commerce platform requires a dashboard to visualize sales, inventory, and customer data. The skill's component design tips and responsive guidelines help create a clean, accessible interface with Flowbite components and Lucide icons, ensuring usability across devices.
A creative agency wants a visually striking portfolio to display their work. Leveraging neo-brutalism or glassmorphism themes from the skill, they can design a unique, memorable site with bold colors, custom fonts, and engaging animations that reflect their brand identity.
A fitness coaching service needs a responsive web app where clients can view workout plans and track progress. The skill's mobile-first approach, accessibility guidelines, and animation patterns ensure a smooth, inclusive experience on all devices, from phones to desktops.
A fintech company requires a trustworthy, modern website to explain complex financial products. Using the skill's theme guidelines and semantic color variables, they can build a professional site with dark mode support, clear typography, and subtle animations to enhance credibility.
A company offers a software product with recurring monthly or annual fees, using the skill to continuously update and improve their UI. The skill's design system ensures consistency across features and rapid iteration, keeping users engaged and reducing churn.
A freelance designer uses the skill to deliver high-quality, custom websites to clients faster. By following the structured workflow (layout, theme, animation) and leveraging predefined patterns, they can increase project throughput and charge premium rates for polished results.
A developer packages the skill's design guidelines into a sellable UI kit or component library for other developers. The library includes pre-built themes, animations, and responsive components, providing a ready-to-use solution that saves customers time and ensures modern aesthetics.
💬 Integration Tip
Use the skill's quick reference table and pre-defined theme patterns to accelerate development, and integrate Tailwind CSS via CDN for rapid prototyping before moving to a build process.
Scored Oct 10, 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.