custom-ui-specA highly customizable UI design specification system based on headless component libraries (shadcn/ui, Radix UI), integrating Apple HIG, Microsoft Fluent, and Google Material Design. Unlike using off-the-shelf frameworks (Ant Design, Element Plus), this skill is for scenarios requiring full control over component styles and DOM structure, emphasizing design freedom and brand customization. Use when: generating custom UI code, reviewing custom UI designs, or needing to follow platform-specific design guidelines. Supports HIG / Fluent / Material / All specification modes. Keywords: shadcn/ui, Radix UI, headless, custom components, HIG, Fluent, Material Design.
Install via ClawdBot CLI:
clawdbot install fize/custom-ui-specGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://clawhub.ai/user/fizeAudited Sep 10, 2026 · audit v1.0
Generated Sep 10, 2026
A SaaS startup needs a product interface that looks nothing like competitors built on Ant Design or Element Plus. The team uses shadcn/ui and Radix UI primitives with Material or Fluent tokens to build a signature visual language across dashboards, settings, and data tables.
A productivity or utility app targets macOS, iPadOS, and iOS users through a web or Catalyst-style interface. The skill enforces HIG patterns such as sheets, sidebars, segmented controls, and SF-inspired typography to make the experience feel native on Apple devices.
A legacy enterprise tool wants to modernize with Fluent design—acrylic surfaces, luminous accents, and Data Grid components—while preserving keyboard-heavy power-user workflows. The skill maps existing controls to Fluent equivalents and validates compliance.
A design platform team must define one headless component library that ships multiple spec variants (HIG, Fluent, Material) so different product squads can theme independently. They use the 'All' mode to flag cross-spec conflicts like differing dialog or notification patterns.
A consumer app in the creative or social space needs Material-inspired bold color, elevation, and motion but with fully custom component anatomy beyond what MUI or TDesign permits. The skill guides compliant yet brand-forward implementation over Radix primitives.
Offer the skill and its validation scripts for free to individual developers, while gating advanced features like cross-spec conflict detection, team rule packs, and CI integration behind a paid tier. This drives bottom-up adoption in design and engineering teams.
Use the skill as the technical backbone for engagements that help enterprises migrate from off-the-shelf frameworks to headless, brand-owned component libraries. Deliverable includes custom spec references, validation rules, and training for internal teams.
Bundle pre-built spec-compliant headless component kits (HIG, Fluent, Material variants) that customers can license and rebrand. The skill's validation flow guarantees quality and spec conformance, making kits trustworthy for enterprise procurement.
💬 Integration Tip
Run validate_ui.py with --spec matching your target platform before manual checklist review to catch structural issues early; enable --check-color only after layout and component anatomy are finalized, since color checks are skipped by default.
Scored Sep 10, 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.