{"id":"13d01259-0e61-435b-b500-b5d31add4bde","entityType":"agent","slug":"clawhub-skills-1999azzar-ui-designer-skill","name":"ui-designer","canonicalUrl":"https://www.xpersona.co/agent/clawhub-skills-1999azzar-ui-designer-skill","canonicalPath":"/agent/clawhub-skills-1999azzar-ui-designer-skill","generatedAt":"2026-10-10T02:41:50.020Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"description":"Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG). --- name: ui-designer description: Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG). --- UI Designer Skill Expert design guidance for creating aesthetically pleasing, user-centric interfaces. This skill focuses on the visual and structural design intent before and during impl","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. Last updated 4/15/2026.","installCommand":"clawhub skill install skills:1999azzar:ui-designer-skill","sourceUrl":"https://github.com/openclaw/skills/tree/main/skills/1999azzar/ui-designer-skill","homepage":null,"primaryLinks":[{"label":"View on ClawHub","url":"https://github.com/openclaw/skills/tree/main/skills/1999azzar/ui-designer-skill","kind":"source"}],"safetyScore":84,"overallRank":62,"popularityScore":50,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component t"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[{"label":"automatically","status":"self-declared"}],"verifiedCount":0,"selfDeclaredCount":2,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"},{"key":"automatically","type":"capability","support":"supported","confidenceSource":"profile","notes":"Declared in agent profile metadata"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile capability:automatically|supported|profile"}},"adoption":{"evidence":{"source":"no-adoption-signals","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"No source adoption metrics were available."},"stars":null,"forks":null,"downloads":null,"packageName":null,"latestVersion":null,"tractionLabel":null},"release":{"evidence":{"source":"agent-index","verified":false,"confidence":"medium","updatedAt":"2026-02-25T06:16:42.986Z","emptyReason":null},"lastUpdatedAt":"2026-04-15T00:45:39.800Z","lastCrawledAt":"2026-02-25T06:16:42.986Z","lastIndexedAt":null,"nextCrawlAt":"2026-02-26T06:16:42.986Z","lastVerifiedAt":null,"highlights":[]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install skills:1999azzar:ui-designer-skill","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T02:41:50.020Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-skills-1999azzar-ui-designer-skill/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"readme":"---\nname: ui-designer\ndescription: Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).\n---\n\n# UI Designer Skill\n\nExpert design guidance for creating aesthetically pleasing, user-centric interfaces. This skill focuses on the visual and structural design intent before and during implementation.\n\n## Core Capabilities\n\n### 1. Color Palette Generation\nGenerate cohesive and harmonic color palettes tailored to the project's vibe.\n- Deliverables: HEX codes, Tailwind config extensions, and CSS variables.\n- Palettes: Default to high-end pastels, dark luxury, or tonal Material You sets.\n\n### 2. Component Theming\nEstablish robust theme systems (Light/Dark) through consistent design tokens.\n- Define --bg, --text, --accent, and --border variables.\n- Ensure unified states (hover, focus, active) across all UI elements.\n\n### 3. Accessibility Audits\nEvaluate and refine interfaces for maximum inclusivity and compliance.\n- Focus: WCAG AA/AAA contrast ratios, semantic HTML, and intuitive navigation.\n- Guidance: ARIA attributes, focus ring management, and screen-reader friendliness.\n\n## Core Design Languages\n\n### 1. Material You (M3)\n- **Key traits:** Large rounded corners, tonal color palettes, expressive typography.\n- **Reference:** [material-you.md](references/material-you.md)\n\n### 2. Minimalism\n- **Key traits:** Generous padding, typography-driven hierarchy, neutral palettes.\n- **Reference:** [minimalism.md](references/minimalism.md)\n\n### 3. Glassmorphism\n- **Key traits:** Backdrop blur, thin borders, vibrant background gradients.\n- **Reference:** [glassmorphism.md](references/glassmorphism.md)\n\n### 4. Neo-Brutalism\n- **Key traits:** Thick black borders, hard shadows, vibrant clashing colors, bold typography.\n- **Reference:** [neo-brutalism.md](references/neo-brutalism.md)\n\n### 5. Claymorphism\n- **Key traits:** Soft 3D shapes, double inner shadows, large border radius, playful pastels.\n- **Reference:** [claymorphism.md](references/claymorphism.md)\n\n### 6. M3 Pastel Glass (Hybrid)\n- **Key traits:** Pastel Blue/Deep Blue, 28px corners, morphing hover effects.\n- **Reference:** [m3-pastel-glass.md](references/m3-pastel-glass.md)\n\n### 7. Neo-M3 Hybrid (Wired/Verge Style)\n- **Key traits:** Wired/Verge inspired high-contrast, 3px solid black borders, hard shadows (6px+), 24px rounded corners, tonal pastel accents.\n- **Reference:** [neo-m3-hybrid.md](references/neo-m3-hybrid.md)\n\n## Automation: Cursor Integration\n\nThis skill can automatically update your project's `.cursorrules` to keep the AI aligned with your design goals.\n\n### `apply_ui_rules.py`\nRun this script to append design rules to your current directory's .cursorrules.\n\n```bash\npython ~/.gemini/skills/ui-designer/scripts/apply_ui_rules.py --style [material|minimal|glass|neo-brutalism|claymorphism|m3-pastel|neo-m3] --palette [pastel|dark|vibrant]\n```\n\n## Workflows\n\n### 1. Design Conception\nWhen starting a new feature, ask for:\n- Primary design language? (Material You, Minimalism, Glassmorphism, Neo-Brutalism, Claymorphism, M3 Pastel Glass, Neo-M3 Hybrid)\n- Color vibe? (Pastel, Dark, High-Contrast)\n\n### 2. Component Architecture\nPlan the HTML/React structure with Tailwind classes. Focus on Grid/Flex layouts and responsiveness.\n\n## Best Practices\n- **Consistency:** Stick to one design language per project.\n- **Accessibility:** Ensure enough contrast for text.\n- **Azzar's Rule:** \"Just enough engineering to get it done well.\" (Wong edan mah ajaib).\n","readmeExcerpt":"--- name: ui-designer description: Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG). --- UI Designer Skill Expert design guidance for creating aesthetically pleasing, user-centric interfaces. This skill focuses on the visual and structural design intent before and during impl","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"python ~/.gemini/skills/ui-designer/scripts/apply_ui_rules.py --style [material|minimal|glass|neo-brutalism|claymorphism|m3-pastel|neo-m3] --palette [pastel|dark|vibrant]"}],"parameters":{},"dependencies":[],"permissions":[],"extractedFiles":[],"languages":["typescript"],"docsSourceLabel":"CLAWHUB","editorialOverview":"Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG). --- name: ui-designer description: Design beautiful interfaces using Material You, Minimalism, Glassmorphism, Neo-Brutalism, and Claymorphism. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG). --- UI Designer Skill Expert design guidance for creating aesthetically pleasing, user-centric interfaces. This skill focuses on the visual and structural design intent before and during impl","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":376,"uniquenessScore":66,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T02:41:50.020Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}