frontend-design-2Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Install via ClawdBot CLI:
clawdbot install ahump20/frontend-design-2Grade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
http://www.apache.org/licenses/Audited Apr 16, 2026 · audit v1.0
Generated Mar 21, 2026
Design a visually striking landing page that emphasizes organic textures and earthy color palettes to reflect the brand's eco-friendly values. The page will feature asymmetric layouts with overlapping elements and subtle animations to showcase product collections and storytelling.
Create a production-grade dashboard with a luxury/refined aesthetic, using bold typography and geometric patterns to display financial data. Implement scroll-triggered animations and micro-interactions to enhance user engagement and provide a polished, high-performance interface.
Build a maximalist portfolio site with chaotic, art deco-inspired designs to showcase agency projects. Incorporate unexpected fonts, gradient meshes, and custom cursors to create an unforgettable user experience that breaks conventional grid layouts.
Develop a retro-futuristic product page with industrial/utilitarian elements, using sharp color accents and motion effects for product demonstrations. Focus on spatial composition with diagonal flows and layered transparencies to highlight product features.
Design a playful, toy-like interface with vibrant colors and animated micro-interactions for ticket purchases and schedule browsing. Use distinctive typography and noise textures to create an energetic, immersive atmosphere that aligns with the festival's theme.
Offer custom frontend design services to clients seeking unique, production-grade interfaces for websites or applications. Charge per project or hourly, focusing on high-quality, aesthetically bold deliverables that avoid generic templates.
Create and sell a SaaS tool that generates distinctive frontend components or themes based on user inputs, leveraging this skill's guidelines for creative aesthetics. Monetize through subscription plans or one-time purchases for premium features.
Partner with digital agencies to provide white-labeled frontend design solutions for their clients, ensuring each project adheres to unique aesthetic directions. Generate revenue through retainer contracts or per-project commissions.
💬 Integration Tip
Integrate this skill by first defining a clear aesthetic direction based on user requirements, then using its guidelines to implement production-grade code with creative typography, color schemes, and motion effects tailored to the specific context.
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.