skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

effective-ui-design

Applies WCAG 2.1 AA accessibility, OKLCH color, spacing, and typography rules to frontend UI code.

2|Updated Jul 25, 2026
Search Tags:#typography#accessibility#frontend#design system#css#wcag#ui design
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill effective-ui-design-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: effective-ui-design
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/effective-ui-design
Command: npx skills add https://github.com/ankaboot-source/boucle --skill effective-ui-design-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI agents and developers often produce interfaces with low-contrast text, inconsistent spacing, missing form validation, and no accessibility or SEO consideration. This Skill enforces professional UI design guidelines automatically on every frontend task, so interfaces meet WCAG 2.1 AA standards without repeated manual correction. ## Core Features & Use Cases - Accessibility enforcement: Contrast ratios (4.5:1 text, 3:1 UI), 48pt touch targets, semantic HTML, skip links, focus-visible rings, and reduced-motion support. - Design system foundations: OKLCH color palettes with relative color syntax, 8pt spacing grid, fluid typography with clamp(), container queries, and subgrid. - Component patterns: Button hierarchy (primary/secondary/tertiary), single-column forms with :user-valid validation, SVG icon rules, and dark mode via light-dark(). - SEO and performance: Meta tags, JSON-LD structured data, Core Web Vitals targets, responsive images, and favicon sets. - Use Case: When building a dashboard page, the agent automatically applies correct contrast, spacing scale, form patterns, and meta tags instead of generating generic gray-text markup. ## Quick Start Ask the agent to build or review any web page, form, or component and it will apply these UI design guidelines automatically.

Frequently Asked Questions about effective-ui-design

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

FAQPage Schema
How do I make AI-generated UI meet WCAG accessibility standards?▼

Install this Skill so the agent automatically applies WCAG 2.1 AA rules: 4.5:1 contrast for text, 3:1 for UI elements, 48pt touch targets, semantic HTML, and visible focus indicators on every frontend task.

What is the difference between effective-ui-design and the frontend-design skill?▼

frontend-design handles creative direction like aesthetics and font personality. effective-ui-design covers the technical layer: contrast ratios, spacing systems, form validation, accessibility, dark mode, and SEO. They complement each other.

Does this skill work with Claude Code, Cursor, and GitHub Copilot?▼

Yes, it follows the Agent Skills format and works with Claude Code, Cursor, GitHub Copilot, Windsurf, Gemini CLI, and any agent supporting that specification. It activates automatically on frontend tasks.

Which CSS features does the skill rely on?▼

It uses modern Baseline 2023-2025 CSS: OKLCH colors, light-dark(), relative color syntax, container queries, subgrid, clamp() fluid type, :user-valid/:user-invalid, @starting-style, the Popover API, and the View Transition API.

Is this a component library or CSS framework?▼

No. It provides guidelines and concrete values for spacing, contrast, typography, and patterns, but does not ship components or pick an aesthetic direction. It is the technical layer underneath any visual style.

Related Skills

Explore More Design & Creative Skills→
tktaftktaf

ui-ux-designing

Audit user flows and generate wireframes for UI/UX improvements.

Community
Advanced
MaelwalserMaelwalser

browser-qa

Automate visual and interaction testing for web user interfaces.

Community
Intermediate
wpgauravwpgaurav
14

design-systems

Generate topic-specific design directions for web typography, color, motion, and grid.

Community
Advanced
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate