ui-framework-specA UI design specification system based on off-the-shelf UI frameworks (Element Plus, Ant Design, Arco Design, TDesign, Semi Design). Suitable for projects using framework-built-in components, as opposed to headless component libraries (shadcn/ui, Radix UI). Use when: generating UI code with a specified framework, reviewing existing code for framework compliance, recommending between frameworks, or migrating code from one framework to another. Keywords: Element Plus, Ant Design, Arco Design, TDesign, Semi Design, framework components, Vue components, React components, framework migration, design tokens, theme variables.
Install via ClawdBot CLI:
clawdbot install fize/ui-framework-specGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://tdesign.tencent.comAudited Sep 9, 2026 · audit v1.0
Generated Sep 9, 2026
A development team needs to quickly produce a feature-rich admin dashboard for a project management tool. Using Ant Design or Element Plus ensures speed and consistency, with ready-made components like tables, forms, and modals.
A SaaS startup wants to offer a customizable UI to its tenants while maintaining core consistency. Using a framework like Semi Design with theming tokens allows clients to tweak colors without breaking the underlying component structure.
A large enterprise is migrating a legacy Vue-based internal system to React to unify its stack. Using the skill's migration mode, teams can map Element Plus components to Ant Design, ensuring a smooth transition and minimizing downtime.
An e-commerce company needs a unified back-office interface for both web and mobile web. TDesign's cross-framework support (Vue and React) allows them to reuse components across projects, speeding up development.
Offering UI development consulting, code review, and migration services to enterprises adopting these frameworks. Revenue comes from hourly billing or fixed-fee project contracts.
Using the skill to rapidly prototype and launch line-of-business SaaS products (e.g., CRM, ERP) that are UI-compliant. Generates recurring revenue via subscription fees.
Creating training courses, documentation, and templates around these frameworks, leveraging the skill's knowledge. Revenue from course sales, premium subscriptions, and certification programs.
💬 Integration Tip
This skill is a reference guide; integrate it into your development workflow by having your code generator or review agent load the relevant framework file before generating or reviewing UI code.
Scored Sep 9, 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.