skills.rest
ruan-cat
ruan-catCOMMUNITY
Explore all skills by this author →
GitHub

beautiful-component-design

Standardize uni-app wot-design-uni component styling with rpx sizing and UnoCSS conventions.

Updated Sep 11, 2025
Search Tags:#responsive#form#ui-design#iconography#uni-app#picker#wot-design-uni
One-click install
npx skills add https://github.com/ruan-cat/11comm-app --skill beautiful-component-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beautiful-component-design
Source: https://github.com/ruan-cat/11comm-app/tree/main/.claude/skills/beautiful-component-design
Command: npx skills add https://github.com/ruan-cat/11comm-app --skill beautiful-component-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a concrete, project-specific design and implementation checklist to make uni-app components visually consistent, aligned, and responsive across form pages, detail cards, lists, pickers, and modal interactions.

Core Features & Use Cases

  • Standardizes iconography and text alignment conventions (Carbon Icons + UnoCSS classes) to prevent layout shifts and icon deformation.
  • Prescribes responsive rpx sizing, image grid layouts, timeline node styles, and card header (FormSectionTitle) integration for detail pages.
  • Defines correct wd-picker and wd-cell nesting, selection UI patterns, and recommends wd-message-box.prompt for user input to avoid click-blocking and visual regressions.
  • Includes migration and checklist items for forms, lists, pickers, popups, and detail-card color-coding to ensure consistent UX during development and refactor.

Quick Start

Apply the beautiful-component-design guidelines to src/pages-sub/repair/staff-todo-detail.vue and produce the updated Vue template, scoped styles, and a short checklist of the changes made.

Frequently Asked Questions about beautiful-component-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize uni-app component styling for consistent responsive UI?▼

Standardizing uni-app responsive UI involves enforcing rpx sizing, applying UnoCSS conventions, and mapping Carbon Icons correctly to prevent layout shifts and visual regressions across mobile pages.

Why does my wd-picker cause click-blocking in uni-app forms?▼

Click-blocking in wd-picker usually occurs due to incorrect nesting with wd-cell. Apply correct wd-picker and wd-cell nesting rules, and use wd-message-box.prompt for user input to avoid interaction issues.

How do I align icons and text in wot-design-uni components without deformation?▼

Aligning icons and text in wot-design-uni requires standardizing iconography conventions using Carbon Icons and UnoCSS classes, ensuring consistent visual design and preventing icon deformation during UI polishing.

Does this approach support detail cards and timeline nodes in uni-app?▼

Yes, the approach supports detail cards and timeline nodes by prescribing responsive rpx sizing, image grid layouts, timeline node styles, and integrating FormSectionTitle for consistent detail page UX.

What's the best way to handle modal prompts and user input in uni-app?▼

The best way to handle modal prompts is by using wd-message-box.prompt for user input, ensuring reliable interaction behavior and avoiding visual regressions during form submission and code review tasks.

Related Skills

Explore More Design & Creative Skills→
ruan-catruan-cat

component-migration

Migrate ColorUI and uni-app components to wot-design-uni and UnoCSS.

Community
Advanced
wot-uiwot-ui
284

create-component

Generate Wot UI component skeletons with typings, Vue files, and styles.

Official
Intermediate
Pancake-QPancake-Q
1

unocss

Generate CSS utility classes on-demand from source code with UnoCSS.

Community
Advanced
ruan-catruan-cat

style-migration

Migrate ColorUI and SCSS styling to UnoCSS and wot-design-uni.

Community
Intermediate