skills.rest
CODE-SAURABH
CODE-SAURABHCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-ready web interfaces with responsive and accessible states.

2|1|Updated Jul 25, 2026
Search Tags:#accessibility#responsive design#design systems#user experience#frontend design#web interfaces#ui redesign
One-click install
npx skills add https://github.com/CODE-SAURABH/OpenSkills --skill frontend-design-code-saurabh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/CODE-SAURABH/OpenSkills/tree/main/frontend-design
Command: npx skills add https://github.com/CODE-SAURABH/OpenSkills --skill frontend-design-code-saurabh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create polished, purposeful web interfaces that avoid generic layouts, clarify user workflows, and work reliably across devices and accessibility needs.

Core Features & Use Cases

  • Visual Direction: Establish a clear concept, hierarchy, palette, typography system, spacing rhythm, and signature design element tied to the product.
  • Complete Experience Design: Plan primary actions, real content, responsive layouts, interaction states, error handling, accessibility, and reduced-motion behavior.
  • Production Implementation: Build semantic, maintainable interfaces that reuse existing components and design tokens while avoiding conflicting styles and fragile one-off solutions.
  • Use Case: Redesign a dashboard or marketing page that feels generic by defining a stronger visual direction, implementing responsive states, and validating the primary user flow with keyboard and accessibility checks.

Quick Start

Use the frontend-design skill to redesign the attached product page with a distinctive visual direction, responsive behavior, accessible states, and a concise implementation handoff.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I redesign a web interface to fix unclear hierarchy and generic visual direction?▼

Redesign a web interface by establishing a clear visual concept, palette, typography system, and spacing rhythm tied to the product. This solves unclear hierarchy and generic visual direction by defining signature design elements and semantic structure for production-ready layouts.

What is the best way to plan responsive layouts and interaction states for a dashboard?▼

Plan responsive layouts and interaction states for a dashboard by defining visual tokens, real content mapping, and error handling. This ensures complete experience design by validating primary user flows and specifying behavior across different device sizes.

How do I implement accessibility and keyboard navigation for frontend design?▼

Implement accessibility and keyboard navigation by specifying semantic structure, keyboard access, contrast, and reduced motion behavior. This frontend design process validates interaction states and ensures web interfaces work reliably across diverse accessibility needs.

Can I reuse existing design tokens and components when building a product interface?▼

You can reuse existing design tokens and components when building a product interface. This production implementation approach builds semantic, maintainable interfaces while preserving suitable existing design-system conventions and avoiding conflicting styles.

When should I not use a complete interface design workflow for web pages?▼

You should not use a complete interface design workflow for simple web pages requiring only minor content updates. This workflow targets substantial redesigns, new pages, and dashboards needing comprehensive visual direction, responsive behavior, and accessibility validation.

Related Skills

Explore More Design & Creative Skills→
HechaoYannetHechaoYannet

create-architecture

Generate a master architecture document from GDDs, ADRs, and governance constraints.

Community
Advanced
andebet07-ossandebet07-oss

design-handoff

Generate developer handoff documentation from design specifications.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
StephanvsStephanvs
6

software-architect

Enforce high cohesion, low coupling, and composition-first design in software architecture.

Community
Advanced