phy-frontend-designCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifact...
Install via ClawdBot CLI:
clawdbot install phy041/phy-frontend-designGrade 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 17, 2026 · audit v1.0
Generated Mar 22, 2026
Design a visually striking landing page that conveys artisanal quality and warmth, using organic textures, rich earthy color palettes, and elegant typography to highlight product storytelling and drive online sales.
Create a sleek, data-rich dashboard with a luxury/refined aesthetic, featuring custom charts, smooth animations, and a cohesive dark theme to enhance user trust and engagement for financial analytics.
Build a maximalist, editorial-style portfolio with asymmetrical layouts, bold typography, and scroll-triggered animations to showcase agency projects in an unforgettable, art-forward manner.
Develop a soft/pastel-themed product page with organic visual details, layered transparencies, and micro-interactions to emphasize sustainability and create a calming, immersive shopping experience.
Design a retro-futuristic interface with geometric patterns, vibrant accent colors, and dynamic hover effects to convey innovation and excitement, streamlining user registration and information access.
Offer custom frontend design packages to clients seeking unique, production-grade interfaces, charging project-based or hourly rates for distinctive aesthetics that avoid generic templates.
Create and sell premium, aesthetically bold frontend templates (e.g., for React or HTML/CSS) on platforms like ThemeForest, targeting developers and businesses looking for non-generic designs.
Partner with digital agencies to provide ongoing frontend design expertise, focusing on refreshing client websites or applications with creative, cohesive aesthetics to improve user engagement and brand perception.
💬 Integration Tip
Integrate this skill by first defining a clear aesthetic direction with the user, then iteratively implementing code with attention to typography, color, and motion details, ensuring compatibility with frameworks like React or Vue.
Scored Jun 17, 2026
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
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.
Generate landing page content from PRD — hero section, features, A/B headline variants, CTA, and SEO meta tags. Use when user says "create landing page", "wr...
Scaffold a new presale service foundation (docs/config/plans/readiness) before coding. Use when starting a new presale automation service, rebuilding project...
Tailwind reference tool. Use when working with tailwind in frontend contexts.