skills.rest
jmanuelrosa
jmanuelrosaCOMMUNITY
Explore all skills by this author →
GitHub

designing-frontend

Codify design rules for consistent, accessible web interfaces.

2|Updated Oct 28, 2022
Search Tags:#typography#accessibility#design-guidelines#frontend-design#color-themes#ui-standards
One-click install
npx skills add https://github.com/jmanuelrosa/dotfiles --skill designing-frontend-jmanuelrosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-frontend
Source: https://github.com/jmanuelrosa/dotfiles/tree/main/roles/ai/files/claude/skills/frontend-design
Command: npx skills add https://github.com/jmanuelrosa/dotfiles --skill designing-frontend-jmanuelrosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Aligns teams around consistent frontend design practices, documenting typography, color/theming, motion, layout, accessibility, and performance rules to speed up UI work and ensure quality.

Core Features & Use Cases

  • Establish design direction and rule-driven guidelines for building and reviewing web interfaces.
  • Provide accessibility, typography, color, motion, and layout standards to ensure inclusive, performant UI components.
  • Use Case: When starting a new UI component or reviewing code, apply the guide to maintain consistency and reduce rework.

Quick Start

Consult the Frontend Design Guide before starting a UI task to apply typography, color, and accessibility rules.

Frequently Asked Questions about designing-frontend

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

FAQPage Schema
How do I establish consistent frontend design guidelines for a web interface?▼

Establish consistent frontend design guidelines by codifying typography, color theming, motion, layout, and accessibility rules into a central design direction. This ensures teams build cohesive web interfaces and reduces UI rework.

What accessibility checks should I apply when building UI components?▼

Apply accessibility checks for web interfaces by enforcing documented standards across typography, color contrast, motion principles, and layout. This ensures UI components remain inclusive and performant during frontend development.

What is the best way to standardize color themes and typography across multiple UI components?▼

Standardize color themes and typography by documenting rule-driven design guidelines that cover UI standards comprehensively. This aligns frontend teams around consistent practices for building and reviewing web interfaces.

Can I use frontend design standards to review existing component code?▼

Frontend design standards can be applied to review existing component code by checking it against codified typography, color theming, motion, and accessibility rules. This maintains UI consistency and identifies areas requiring rework.

When do I need a frontend design guide for UI development tasks?▼

You need a frontend design guide when starting a new UI component or reviewing code to apply typography, color, and accessibility rules. It aligns teams around consistent practices and speeds up UI work.

Why does my web interface lack visual consistency across different UI components?▼

Your web interface lacks visual consistency because frontend teams lack codified design rules for typography, color theming, motion, and layout. Documenting these UI standards ensures cohesive design and reduces rework.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
Jst-Well-DanJst-Well-Dan
8

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS and modern frameworks.

Community
Advanced
jaem1n207jaem1n207
18

web-design-guidelines

Reviews UI code for compliance with web interface guidelines.

Community
Intermediate