frontend-design-pro前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。 触发词：/audit /polish /critique /colorize /animate /bold...
Install via ClawdBot CLI:
clawdbot install antonia-sz/frontend-design-proGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/pbakaus/impeccableAudited Apr 16, 2026 · audit v1.0
Generated Mar 20, 2026
A startup building a SaaS platform needs to improve its user interface to stand out from competitors. This skill helps apply modern design principles like OKLCH colors and modular typography, ensuring the UI is both aesthetically pleasing and functional across devices.
An online retailer wants to refresh its product pages to boost conversions and user engagement. The skill audits for accessibility issues, optimizes spacing for better readability, and adds subtle animations to guide user interactions without overwhelming them.
A mobile app development team is creating prototypes and needs consistent design feedback. This skill critiques UX clarity, ensures responsive layouts, and polishes components like buttons and forms to meet industry standards for usability and appeal.
A large corporation is establishing a unified design system across multiple digital products. The skill helps normalize components, enforce color and typography rules, and harden designs with error handling to maintain brand consistency and scalability.
A freelance designer or developer is building a personal portfolio site to showcase work. The skill assists in applying bold visual elements, distilling content for clarity, and adding delightful details to create a memorable and professional online presence.
Offer basic design audits and critiques for free to attract users, then charge for advanced features like automated polishing, detailed reports, or integration with popular design platforms. Revenue comes from subscription tiers and enterprise licenses.
Web design and development agencies use this skill to streamline their workflow, providing faster and more consistent client deliverables. Revenue is generated through increased project efficiency, allowing agencies to handle more clients or offer premium design packages.
Partner with online learning platforms to include this skill in courses on frontend development or UI/UX design. Revenue is earned through licensing fees, affiliate sales, or a share of course enrollments, targeting students and professionals seeking practical skills.
💬 Integration Tip
Integrate this skill into existing design tools or code editors via plugins to automate audits and suggestions, reducing manual review time and ensuring consistency across projects.
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.