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
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
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.