frontend-design

Provide structured frontend design guidance for layouts, theming, and accessibility.

239|30|Updated Jan 22, 2026
One-click install
npx skills add https://github.com/jdrhyne/agent-skills --skill frontend-design-jdrhyne
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jdrhyne/agent-skills/tree/main/prompts/frontend-design
Command: npx skills add https://github.com/jdrhyne/agent-skills --skill frontend-design-jdrhyne

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured frontend design guidance to help teams create cohesive, accessible, and visually appealing user interfaces without guessing or reinventing patterns.

Core Features & Use Cases

  • Layout & Theming: Define layout patterns, color systems, typography, and spacing for consistent UI across pages.
  • Accessibility & Responsiveness: Ensure components are accessible and responsive across devices, with clear focus states and keyboard navigation.
  • Implementation Guidance: Translate design decisions into actionable instructions for designers and developers working on landing pages, dashboards, and UI components.

Quick Start

Use this skill to draft frontend design guidelines for a new landing page that emphasizes accessibility, responsive layout, and a clean visual hierarchy.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create accessible and responsive frontend UI guidelines?

Create accessible and responsive frontend UI guidelines by defining structured rules for layout patterns, color systems, typography, spacing, focus states, and keyboard navigation. This approach ensures cohesive, visually appealing interfaces without reinventing design patterns.

What is the best way to structure frontend design guidance for a landing page?

Structure frontend design guidance for a landing page by defining a clear workflow that covers layout, theming, accessibility, and implementation. This provides reusable design patterns and practical rules for executing clean visual hierarchy.

Can I use structured design guidance to build dashboards and UI components?

Yes, you can use structured design guidance to build dashboards and UI components. It translates design decisions into actionable instructions, ensuring consistent layout, accessible components, and responsive behavior across pages.

Do I need specific design dependencies to implement modern UI patterns?

No specific design dependencies are required to implement modern UI patterns. The guidance provides reusable rules for layout, theming, and accessibility that can be executed directly by an AI assistant.

Why does my frontend design lack visual hierarchy and accessibility?

Your frontend design lacks visual hierarchy and accessibility without structured guidelines for spacing, typography, color systems, and clear focus states. Defining these patterns ensures cohesive, accessible, and visually appealing user interfaces.