frontend-design

Plan frontend UI components with accessibility and framework constraints.

1|Updated Apr 22, 2014

Search Tags:#design #ui #accessibility #frontend #ux #design-system

Ready to run

npx skills add https://github.com/simonnordberg/dotfiles --skill frontend-design-simonnordberg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/simonnordberg/dotfiles/tree/main/services/claude-code/skills/frontend-design
Command: npx skills add https://github.com/simonnordberg/dotfiles --skill frontend-design-simonnordberg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan and reason about frontend UI design to ensure usable, accessible, and visually cohesive interfaces, reducing confusion and rework during implementation.

Core Features & Use Cases

Design reasoning and component planning for production-grade frontend interfaces.
UX guidance including interaction patterns, states, and accessibility considerations.
Production alignment with design systems and framework constraints for React, Vue, or vanilla JS.

Quick Start

Provide a concise frontend design plan for a new component, including layout, interactions, and accessibility notes.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I plan a frontend UI component layout with accessibility considerations?▼

Plan frontend UI component layouts by automating design reasoning for interaction patterns, states, and WCAG accessibility constraints to ensure visually cohesive interfaces and reduce rework.

What's the best way to build production-grade React UI components within a design system?▼

Build production-grade React UI components by aligning layout, interactions, and frontend design decisions with existing design system constraints and framework compatibility requirements.

Does this frontend design approach work with Vue and vanilla JS frameworks?▼

Yes, frontend design planning supports framework compatibility with React, Vue, and vanilla JS, applying design system constraints and accessibility requirements across all three environments.

How do I evaluate UX interaction patterns and states for a new interface?▼

Evaluate UX interaction patterns and states by applying automated frontend design reasoning to ensure usable, accessible interfaces that meet production-grade design system requirements.

Why does my frontend UI design lack visual cohesion across different components?▼

Frontend UI design lacks visual cohesion when components bypass design system constraints; applying structured design reasoning for layouts and interaction states ensures cohesive interfaces.

When do I need to apply WCAG accessibility requirements to frontend design planning?▼

Apply WCAG accessibility requirements during frontend design planning whenever building user interfaces, ensuring usable interaction patterns and states for production-grade components across React, Vue, or vanilla JS.