skills.rest
simonnordberg
simonnordbergCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/simonnordberg/dotfiles --skill frontend-design-simonnordberg
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
ChiejiChieji

Frontend Developer

Design accessible frontend interfaces with React, Vue, Angular, and vanilla JS.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
KazmerMaximilianoKazmerMaximiliano

neus-wireframe

Generate lo-fi ASCII wireframes for UI layout validation.

Community
Basic