web-design-guidelines

Analyze frontend code for accessibility, security, and design consistency issues.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/adamway/thoughts-cli --skill web-design-guidelines-adamway
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/adamway/thoughts-cli/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/adamway/thoughts-cli --skill web-design-guidelines-adamway

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams perform comprehensive reviews of frontend/UI code for compliance with accessibility, security, design consistency, performance best practices, and user experience quality, preventing missed issues that impact users and security.

Core Features & Use Cases

  • Detailed Code Review: Analyzes project files to identify accessibility issues, security vulnerabilities, and design inconsistencies.
  • Framework-Agnostic Analysis: Works across React, Vue, Svelte, Angular, and static sites to flag common pitfalls.
  • Use Case: For a new feature deployment, review the codebase to catch a11y violations, unsafe innerHTML usages, and inconsistent styling, ensuring a polished, accessible, and secure UI before launch.

Quick Start

Provide the path to your frontend project files or upload code snippets for the tool to analyze for best practices and compliance checks.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check my frontend code for WCAG 2.2 AA accessibility compliance?

To check frontend code for accessibility compliance, you can analyze your project files to identify WCAG 2.2 AA violations. This process flags critical issues in frameworks like React, Vue, Svelte, Angular, and static sites, providing detailed recommendations to ensure your UI is accessible before deployment.

What is the best way to review UI code for security vulnerabilities and design inconsistencies?

The best way to review UI code for security vulnerabilities and design inconsistencies is to perform a comprehensive analysis of your frontend project. This approach identifies unsafe patterns like innerHTML usages and inconsistent styling, ensuring a polished, secure, and consistent user experience before launch.

Can I analyze static sites for performance and security best practices?

Yes, you can analyze static sites for performance and security best practices. The framework-agnostic analysis works across React, Vue, Svelte, Angular, and static sites to flag common pitfalls, ensuring your project meets design system standards and security requirements during development.

How do I scan a React project for accessibility issues before deployment?

To scan a React project for accessibility issues before deployment, provide the path to your frontend project files or upload code snippets. The tool analyzes the codebase to catch a11y violations, security flaws, and performance issues, providing detailed recommendations for remediation.

Does frontend design compliance analysis work with Svelte and Vue frameworks?

Yes, frontend design compliance analysis works with Svelte and Vue frameworks. It performs framework-agnostic analysis across React, Vue, Svelte, Angular, and static sites to flag common pitfalls related to design consistency, accessibility, and security best practices.