frontend_design_expert

Name: frontend_design_expert
Availability: InStock
Author: cyangzhou

Generate Flutter/React components with color, spacing, motion, and accessibility rules.

2|Updated Jan 16, 2026

Search Tags:#accessibility #ui-ux #design-system #color-palette #frontend-design #componentization

Ready to run

npx skills add https://github.com/CyangZhou/-2--Project-Yunshu- --skill frontend-design-expert

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend_design_expert
Source: https://github.com/CyangZhou/-2--Project-Yunshu-/tree/main/.trae/skills/frontend_design_expert
Command: npx skills add https://github.com/CyangZhou/-2--Project-Yunshu- --skill frontend-design-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

构建现代化的 UI/UX 设计，编写 Flutter/React 组件，配色方案与无障碍设计的执行方法，帮助设计师和开发者快速落地一致性高的界面。

Core Features & Use Cases

Visual-first rules: 先描述视觉效果（配色、间距、动效），再实现组件。
Component-driven workflow: 拆分成可复用的 Flutter/React 组件，符合设计系统。
Accessibility & responsive: 支持深色模式、对比度、屏幕阅读器友好，以及响应式布局的场景。

Quick Start

提供一个针对现有界面的可快速执行的起始任务，例如描述一个登录页的外观和行为，确保无障碍友好。

Frequently Asked Questions about frontend_design_expert

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

FAQPage Schema

How do I build accessible Flutter and React components with a consistent color palette?▼

Structure accessible Flutter and React components by applying visual-first rules for color palettes, spacing, and motion before writing code. This ensures high contrast, screen reader compatibility, and consistent design system aesthetics across web and mobile platforms.

What is the best way to structure a UI design system for dark mode and responsive layouts?▼

Structure a UI design system for dark mode and responsive layouts using a component-driven workflow that splits interfaces into reusable modules. Define visual aesthetics, contrast ratios, and accessibility rules upfront to ensure responsive rendering across web and mobile projects.

How do I implement visual feedback and motion in React UI components?▼

Implement visual feedback and motion in React UI components by describing visual effects, spacing, and animation behaviors before coding. This component-driven workflow ensures reusable modules align with overall design system standards and accessibility requirements.

Does this UI design approach support both web and mobile accessibility requirements?▼

Yes, this UI design approach supports both web and mobile accessibility requirements. It explicitly integrates dark mode, contrast ratios, and screen reader friendly considerations into the modular componentization process for both Flutter and React projects.