skills.rest
CyangZhou
CyangZhouCOMMUNITY
Explore all skills by this author →
GitHub

frontend_design_expert

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
One-click install
npx skills add https://github.com/CyangZhou/-2--Project-Yunshu- --skill frontend-design-expert
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
joabeoliveirajoabeoliveira

Tailwind CSS & Responsive Design

Style web interfaces with Tailwind CSS responsive classes and dark mode.

Community
Intermediate
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic
fefogarciafefogarcia
1

design-consistency-auditor

Audits frontend applications for design system consistency and accessibility.

Community
Advanced