skills.rest
LucasSantana-Dev
LucasSantana-DevCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review React components for compliance with Web Interface Guidelines.

17|8|Updated Apr 11, 2022
Search Tags:#design#ui#code review#accessibility#frontend#web guidelines
One-click install
npx skills add https://github.com/LucasSantana-Dev/Lucky --skill web-design-guidelines-lucassantana-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/LucasSantana-Dev/Lucky/tree/main/.agent-skills/web-design-guidelines
Command: npx skills add https://github.com/LucasSantana-Dev/Lucky --skill web-design-guidelines-lucassantana-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that web interface code adheres to established design and accessibility best practices, preventing common UI/UX issues before they reach production.

Core Features & Use Cases

  • Automated Code Review: Scans specified files for compliance with web interface guidelines.
  • Accessibility Checks: Identifies potential accessibility barriers in the UI code.
  • Use Case: A developer can use this skill to quickly audit a new set of React components for adherence to the project's design system and accessibility standards.

Quick Start

Use the web-design-guidelines skill to review the file 'packages/frontend/src/components/ui/Button.tsx'.

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 React components for accessibility and design compliance?▼

You can audit React components for accessibility and design compliance by scanning specified file patterns against fetched web interface guidelines. This automated review identifies UI/UX issues and accessibility barriers in your frontend codebase before production.

What is automated UI code review for web interface guidelines?▼

Automated UI code review for web interface guidelines is the process of scanning frontend files to ensure they adhere to established design and accessibility best practices. It fetches external guidelines and applies them to local React components to prevent common UI/UX issues.

Can I use this to check a specific frontend file like Button.tsx?▼

Yes, you can check a specific frontend file like Button.tsx by specifying the file path pattern. The tool targets React components and pages within specified file patterns to review them against web interface guidelines.

Does the accessibility audit work with any frontend codebase?▼

The accessibility audit specifically applies to frontend codebases targeting React components and pages. It requires fetching external web interface guidelines and applying them to local files within your specified file patterns.

What's the best way to prevent common UI/UX issues from reaching production?▼

The best way to prevent common UI/UX issues from reaching production is to run automated code reviews that scan for compliance with web interface guidelines. This identifies accessibility barriers and design deviations in your React components early.

Why does the code review require fetching external guidelines?▼

The code review requires fetching external guidelines because it applies established web interface design and accessibility best practices to your local files. This ensures the audit checks your React components against current, comprehensive standards.

Related Skills

Explore More Software Engineering Skills→
tulioftuliof

web-design-guidelines

Audit web interface code against standardized design and accessibility guidelines.

Community
Intermediate
CyangZhouCyangZhou
2

Frontend_Design_System

Generate React component libraries from design tokens and UI requirements using Tailwind styling.

Community
Intermediate
retz8retz8

frontend-design

Generate frontend interfaces with HTML/CSS, React, Vue, and design systems.

Community
Basic
leafcoderleafcoder
2

web-design-guidelines

Audit web interface code for WCAG, ARIA, and UX compliance.

Community
Intermediate