skills.rest
humanerd-drew
humanerd-drewOFFICIAL
Explore all skills by this author →
GitHub

baseline-ui

Establish UI quality baselines for frontend projects covering design, accessibility, and SEO.

2|7|Updated Jun 19, 2026
Search Tags:#ui#accessibility#frontend#seo#coherence
One-click install
npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill baseline-ui-humanerd-drew
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baseline-ui
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/ui/baseline-ui
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill baseline-ui-humanerd-drew

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures a consistent, accessible, and SEO-optimized UI for frontend development, reducing the risk of design inconsistencies and improving user experience.

Core Features & Use Cases

  • Coherence in Design: Enforces one choice per design axis for a unified and professional look.
  • Accessibility Compliance: Implements ARIA standards and best practices for accessibility.
  • SEO Optimization: Provides guidelines for SEO-friendly HTML, metadata, and link structures.
  • Use Case: When building a new web application, use this Skill to establish a baseline UI that adheres to best practices for usability, accessibility, and SEO.

Quick Start

Load the 'baseline-ui' skill to apply UI best practices to your frontend codebase.

Frequently Asked Questions about baseline-ui

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

FAQPage Schema
How do I establish a UI quality baseline for frontend development?▼

To establish a UI quality baseline, enforce one choice per design axis for coherence, implement ARIA standards for accessibility, and apply SEO-friendly HTML semantics to ensure a consistent and professional user experience.

What is the best way to ensure design coherence and accessibility in a web application?▼

The best way to ensure design coherence and accessibility is to enforce single choices across design axes like color and typography, while implementing ARIA standards and semantic HTML best practices for interactive patterns.

How do I optimize frontend HTML for SEO and A11y compliance?▼

Optimize frontend HTML for SEO and A11y by applying semantic HTML structures, managing metadata and link structures for search engines, and implementing ARIA standards to support assistive technologies.

Can I use this approach to fix design inconsistencies in an existing web application?▼

Yes, you can apply this approach to an existing web application to resolve design inconsistencies by enforcing unified choices for layout, motion, and typography, while retroactively adding ARIA and SEO best practices.

What specific frontend design guidelines are covered by a UI quality baseline?▼

A UI quality baseline covers guidelines for HTML semantics, color, typography, layout, motion, and interactive patterns, ensuring that every visual and functional aspect adheres to accessibility and SEO best practices.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
blackgirlbytesblackgirlbytes

audit-a11y

Audit React/Next.js components for WCAG 2.1 AA accessibility violations.

Community
Intermediate
arkcle83arkcle83

design-guide

Standardizes UI design across HTML, CSS, React, and other modern frameworks.

Community
Intermediate
Rune-kitRune-kit
82

sast

Run static analysis tools and normalize findings into unified severity levels.

Official
Advanced