{"id":"484a2a78-4521-43c4-8dc4-a62940cbfa35","slug":"sebastian-software-effective-ui-design-skill","name":"effective-ui-design","description":"Professional UI design guidelines for accessible, well-structured interfaces. Use when: writing CSS, HTML, or frontend component code; designing websites, apps, dashboards, or any web interface; reviewing or improving existing UI designs; making decisions about colour, typography, layout, spacing, buttons, or forms; ensuring WCAG 2.1 AA accessibility; creating design systems or component libraries. Covers OKLCH colour palettes, 8pt spacing grid, fluid typography with clamp(), container queries, subgrid, form validation patterns, button hierarchy, dark mode, reduced motion, SEO meta tags, and Core Web Vitals.","canonicalUrl":"https://www.xpersona.co/skill/sebastian-software-effective-ui-design-skill","sourceUrl":"https://github.com/sebastian-software/effective-ui-design-skill","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"sebastian-software","label":"Sebastian Software","url":"https://github.com/sebastian-software/effective-ui-design-skill"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T02:14:06.172Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Sebastian Software"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","label":"Crawlable docs","value":"6 indexed pages on the official domain","category":"integration","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true,"metadata":{}},{"factKey":"vendor","label":"Vendor","value":"Sebastian Software","category":"vendor","href":"https://github.com/sebastian-software/effective-ui-design-skill","sourceUrl":"https://github.com/sebastian-software/effective-ui-design-skill","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T02:14:06.173Z","isPublic":true,"metadata":{}},{"factKey":"protocols","label":"Protocol compatibility","value":"OpenClaw","category":"compatibility","href":"https://www.xpersona.co/api/v1/agents/sebastian-software-effective-ui-design-skill/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/sebastian-software-effective-ui-design-skill/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T02:14:06.173Z","isPublic":true,"metadata":{}},{"factKey":"handshake_status","label":"Handshake status","value":"UNKNOWN","category":"security","href":"https://www.xpersona.co/api/v1/agents/sebastian-software-effective-ui-design-skill/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/sebastian-software-effective-ui-design-skill/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true,"metadata":{}}],"highlights":["Trust evidence available"],"agentCard":{"name":"effective-ui-design","description":"Professional UI design guidelines for accessible, well-structured interfaces. Use when: writing CSS, HTML, or frontend component code; designing websites, apps, dashboards, or any web interface; reviewing or improving existing UI designs; making decisions about colour, typography, layout, spacing, buttons, or forms; ensuring WCAG 2.1 AA accessibility; creating design systems or component libraries. Covers OKLCH colour palettes, 8pt spacing grid, fluid typography with clamp(), container queries, subgrid, form validation patterns, button hierarchy, dark mode, reduced motion, SEO meta tags, and Core Web Vitals.","source":"GITHUB_OPENCLEW","sourceId":"github:1150794644","repository":"https://github.com/sebastian-software/effective-ui-design-skill","documentation":"https://www.xpersona.co/skill/sebastian-software-effective-ui-design-skill/agent/sebastian-software-effective-ui-design-skill","protocols":["OPENCLEW"],"languages":["typescript"],"install":{"command":"git clone https://github.com/sebastian-software/effective-ui-design-skill.git","ecosystem":"git"},"examples":[{"kind":"example","language":"text","snippet":"Brand:         oklch(60% 0.15 hue)     - Interactive elements\nText strong:   oklch(25% 0.02 hue)     - Headings, primary text (4.5:1+)\nText weak:     oklch(45% 0.02 hue)     - Secondary text (4.5:1+)\nStroke strong: oklch(58% 0.02 hue)     - Form borders, icons (3:1+)\nStroke weak:   oklch(92% 0.005 hue)    - Decorative borders\nFill:          oklch(97% 0.003 hue)    - Secondary backgrounds\nBackground:    oklch(100% 0 0)         - White or near-white"},{"kind":"example","language":"text","snippet":"Heading 1: 40px / 48px line-height / bold\nHeading 2: 32px / 40px line-height / bold\nHeading 3: 24px / 32px line-height / bold\nHeading 4: 20px / 28px line-height / bold\nBody:      16px / 24px line-height / regular\nSmall:     14px / 20px line-height / regular"}]}}