frontend-design-3Create 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.
Install via ClawdBot CLI:
clawdbot install michaelmonetized/frontend-design-3Grade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
Design a high-end e-commerce interface with a luxury/refined tone, using art deco geometric patterns and dramatic shadows to showcase premium products. Implement a dark theme with gold accents and a distinctive display font to create an unforgettable shopping experience that emphasizes exclusivity and sophistication.
Build a maximalist chaos portfolio site for a design agency, featuring asymmetric layouts, gradient meshes, and extensive CSS animations for page load reveals. Use bold color schemes and overlapping elements to highlight creative projects, ensuring the interface is visually striking and reflects the agency's innovative edge.
Develop a soft/pastel themed dashboard for a wellness app, focusing on organic/natural aesthetics with noise textures and generous negative space. Implement subtle micro-interactions and a refined body font to enhance user engagement, providing a calming and cohesive interface for tracking health metrics.
Create a playful/toy-like interface for an educational website, using bright colors, custom cursors, and diagonal flow layouts to make learning interactive. Incorporate motion effects with CSS-only solutions for high-impact moments, ensuring the design is memorable and avoids generic AI aesthetics to appeal to young users.
Design an editorial/magazine style website with a brutalist/raw tone, using unexpected typography pairings and controlled density. Apply geometric patterns and layered transparencies to create depth, focusing on production-grade code that delivers a distinctive reading experience with sharp accents and no clichéd layouts.
Offer bespoke frontend design services to clients seeking unique, production-grade interfaces. Charge project-based fees or retainers for ongoing design updates, leveraging the skill's emphasis on creative, polished code to differentiate from competitors using generic templates.
Sell subscription-based access to a library of distinctive frontend templates and components generated with this skill. Target startups and developers looking for non-generic designs, with tiers based on usage and customization options, ensuring each template varies in aesthetics to avoid repetition.
Provide consulting services to help teams implement bold aesthetic directions and avoid AI slop in their projects. Host paid workshops on frontend design thinking and advanced CSS techniques, generating income through hourly rates or packaged training sessions.
💬 Integration Tip
Integrate this skill early in the design phase to establish a clear aesthetic direction; use CSS variables and motion libraries like Framer Motion for React to maintain consistency and implement high-impact animations efficiently.
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.