How does it verify design compliance?

The skill follows a workflow that includes extracting guidance from references, executing steps incrementally, and providing verification evidence for every UI change made.

Does this skill support automated UI testing?

Yes, it integrates deterministic checks and verification evidence into its output format to ensure outcomes match the design intent.

When should I use this skill instead of general coding commands?

Use this skill when your task involves specific UI patterns or design system rules that require strict adherence and validation beyond basic coding logic.

What is the Product Team UI Design System skill?

It is a specialized Claude Code capability that allows Claude to apply specific UI design guidelines from your documentation directly to code using the OpenClaw execution bridge.

Where does the skill find design system references?

It typically reads upstream reference snapshots defined in your project's reference paths, ensuring it uses your team's specific source of truth.

Product Team UI Design System

Name: Product Team UI Design System
Author: oabdelmaksoud

byoabdelmaksoud

0•

Design Tools

Implements standardized UI design system guidance within OpenClaw workflows to ensure consistent and verified frontend development.

The Product Team UI Design System skill serves as a specialized bridge for developers using OpenClaw, allowing Claude to integrate specific design system documentation directly into the coding process. By reading upstream references and translating guidance into incremental, tool-backed steps, this skill ensures that UI components are built according to team standards with explicit verification evidence. It is particularly useful for teams looking to automate the adherence to visual patterns, design tokens, and structural requirements without losing the precision required for production-grade interfaces.

Key Features

01Upstream reference extraction for design system guidance

02Deterministic quality checks for UI consistency

03Evidence-backed outcome reporting

04OpenClaw-native incremental execution and verification

05Preservation of specialized design intent and patterns

060 GitHub stars

Use Cases

01Auditing existing UI implementations against specific upstream documentation

02Building new UI components that must strictly adhere to an internal design library

03Refactoring legacy frontend code to meet updated design system standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/agention ecc-claude-product-team-ui-design-system

For use in Claude.ai and ChatGPT

Key Features

01Upstream reference extraction for design system guidance

02Deterministic quality checks for UI consistency

03Evidence-backed outcome reporting

04OpenClaw-native incremental execution and verification

05Preservation of specialized design intent and patterns

060 GitHub stars

Use Cases

01Auditing existing UI implementations against specific upstream documentation

02Building new UI components that must strictly adhere to an internal design library

03Refactoring legacy frontend code to meet updated design system standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/agention ecc-claude-product-team-ui-design-system

For use in Claude.ai and ChatGPT