skills.rest
Liinkiing
LiinkiingCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI code against the latest Web Interface Guidelines.

6|Updated Jan 24, 2025
Search Tags:#accessibility#semantic-html#design-consistency#ui-review#web-guidelines#a11y-audit
One-click install
npx skills add https://github.com/Liinkiing/larastack --skill web-design-guidelines-liinkiing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Liinkiing/larastack/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Liinkiing/larastack --skill web-design-guidelines-liinkiing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers ensure that UI code complies with established Web Interface Guidelines, improving accessibility, usability, and visual consistency across projects.

Core Features & Use Cases

  • Guideline-driven review: Fetches the latest Web Interface Guidelines and compares code files against the rules.
  • Targeted analysis: Accepts file paths or patterns to focus reviews on specific components, pages, or styles.
  • Actionable results: Outputs findings in a concise, link-friendly format to guide fixes and QA.
  • Use Case: When refining a web app, run this Skill to quickly identify accessibility gaps, semantic HTML issues, and navigation concerns in the UI layer.

Quick Start

Audit the UI code in src/ and components/ for guideline compliance against the latest Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit frontend code for accessibility and semantic HTML compliance?▼

To audit UI code for accessibility and semantic HTML, this Skill fetches the latest Web Interface Guidelines and evaluates specified frontend files against the full rule set, checking contrast and interaction patterns.

How do I check specific web components against design consistency guidelines?▼

To check specific web components for design consistency, pass targeted file paths or patterns to the Skill. It focuses the UI review on those specific components or pages and outputs actionable findings.

What is the best way to review web app pages for accessibility gaps?▼

The best way to review web app pages for accessibility gaps is running a guideline-driven audit. This Skill compares UI code files against established rules to quickly identify semantic HTML issues and navigation concerns.

Does this UI review tool work with any frontend codebase?▼

Yes, this UI review tool works across frontend codebases. It applies to components and pages, evaluating interaction patterns and visual consistency against fetched Web Interface Guidelines.

How are a11y audit findings formatted for fixing code issues?▼

A11y audit findings are output in a concise, link-friendly format. This actionable result format guides developers through necessary fixes and QA processes for UI compliance.

Related Skills

Explore More Design & Creative Skills→
bmad-code-orgbmad-code-org
8

bmad-os-audit-file-refs

Audit markdown and YAML files for BMAD file-reference pathing violations.

Official
Advanced
EdWrldEdWrld

web-design-guidelines

Audit HTML, CSS, and JS UI code against Web Interface Guidelines.

Community
Intermediate
thangvawnthangvawn

plankton-code-quality

Automate code quality enforcement with formatters, linters, and Claude subprocesses.

Community
Advanced
syusamasyusama
4

web-design-guidelines

Check UI code compliance with Web Interface Guidelines via static analysis.

Community
Intermediate