skills.rest
coco-de
coco-deOFFICIAL
Explore all skills by this author →
GitHub

coui-theme

Manage unified theming for Flutter and Web with semantic design tokens.

Updated Aug 27, 2026
Search Tags:#theming#ui/ux#design tokens#flutter#css variables#web
One-click install
npx skills add https://github.com/coco-de/skills --skill coui-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coui-theme
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-theme
Command: npx skills add https://github.com/coco-de/skills --skill coui-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a consistent and unified theming system for both Flutter and Web applications, ensuring a cohesive user experience across platforms.

Core Features & Use Cases

  • Cross-Platform Theming: Manages ThemeData in Flutter and CSS variables/ThemeController components on the Web.
  • Semantic Design Tokens: Utilizes shared semantic color tokens and radius scales.
  • Use Case: Apply a consistent brand identity and visual style across your Flutter mobile app and its accompanying web dashboard, adapting seamlessly between light and dark modes.

Quick Start

Activate the CoUI theme skill to configure the dark theme for your Flutter application.

Frequently Asked Questions about coui-theme

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

FAQPage Schema
How do I share a unified theming configuration between Flutter and Web apps?▼

Unified theming for Flutter and Web is managed by configuring shared semantic design tokens that translate into Flutter ThemeData and Web CSS variables. This ensures a consistent brand identity and visual style across both platforms.

How do semantic design tokens handle dynamic light and dark theme switching?▼

Semantic design tokens handle dynamic theme switching by mapping shared color and radius scales to platform-specific properties. This allows Flutter and Web applications to seamlessly adapt between light, dark, and system modes.

Can I apply component-level theme overrides for consistent UI elements across platforms?▼

Yes, you can apply component-level theme overrides to ensure consistent UI elements across platforms. The system maps shared semantic tokens to specific Flutter and Web component configurations for localized styling adjustments.

What is the best way to scale UI adaptively using design tokens in Flutter and Web?▼

The best way to scale UI adaptively is by utilizing the system's semantic design tokens with adaptive scaling. This approach dynamically adjusts UI properties for Flutter and Web, ensuring responsive layouts across different devices.

Does this theming approach require maintaining separate ThemeData and CSS variables?▼

No, you maintain a single source of truth using shared semantic design tokens. The system automatically generates the corresponding Flutter ThemeData and Web CSS variables, eliminating the need to manage them separately.

Related Skills

Explore More Software Engineering Skills→
sgcarstrendssgcarstrends
21

tailwind-config

Configure Tailwind CSS design tokens and theme extensions across monorepo packages.

Official
Intermediate
ilanf23ilanf23
1

design-token

Organize and document design tokens with naming conventions and usage examples.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
flutterflutter
2.8k

flutter-theming-apps

Customize Flutter app appearance using Material 3 theming and adaptive design.

Official
Intermediate