skills.rest
headline-design
headline-designCOMMUNITY
Explore all skills by this author →
Website𝕏@ussaaron_GitHub

claude

Provides UI/UX design standards for accessible, consistent web interfaces.

10|Updated May 16, 2026
Search Tags:#best practices#accessibility#ui design#design guidelines#component standards
One-click install
npx skills add https://github.com/headline-design/design-craft --skill claude-headline-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude
Source: https://github.com/headline-design/design-craft/tree/main/claude
Command: npx skills add https://github.com/headline-design/design-craft --skill claude-headline-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and standards for creating visually polished, accessible, and consistent user interfaces, ensuring AI-generated designs meet professional quality benchmarks.

Core Features & Use Cases

  • Design Standardization: Establishes best practices for typography, colors, spacing, and layout to produce cohesive interfaces.
  • Component & Accessibility Guidance: Offers detailed instructions on building accessible components, handling states, and layout patterns.
  • Use Case: A UI/UX designer or developer uses this Skill to ensure all components and pages adhere to a unified visual language, improving consistency and user experience in enterprise dashboards or internal tools.

Quick Start

Load the design guidelines as a system prompt before starting interface development tasks, to ensure adherence to standards and best practices.

Frequently Asked Questions about claude

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

FAQPage Schema
How do I ensure my UI design meets professional accessibility best practices?▼

To ensure UI design meets accessibility best practices, apply established component standards for typography, color schemes, and spacing. This guarantees interfaces are visually polished, consistent, and accessible for all users.

What is the best way to standardize UI components for an enterprise dashboard?▼

The best way to standardize UI components for an enterprise dashboard is to enforce unified design guidelines. This establishes cohesive typography, layout patterns, and component states to improve consistency and user experience.

Can I use design guidelines to build production-ready interfaces from scratch?▼

Yes, you can use design guidelines to build production-ready interfaces from scratch. They provide detailed instructions for creating professional, accessible user interfaces that meet design standards and quality benchmarks.

How do I handle component states and layout patterns for accessible web applications?▼

Handle component states and layout patterns for accessible web applications by following design standardization instructions. This ensures proper states, layout patterns, and accessibility compliance for high-quality, consistent products.

Does applying design standardization improve consistency in internal tools?▼

Applying design standardization significantly improves consistency in internal tools. It ensures all components and pages adhere to a unified visual language, meeting professional quality benchmarks for enterprise dashboards.

Related Skills

Explore More Design & Creative Skills→
systempromptiosystempromptio
2

ux-ui-guide

Route design tasks to UX/UI sub-skills and enforce frontend-coding-standards alignment.

Official
Intermediate
taku-otaku-o

frontend-design

Design and implement production-grade frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced
daniel-heydari-devdaniel-heydari-dev

interface-design

Enforce UI design standards for spacing, color, typography, and responsive patterns.

Community
Intermediate
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic