frontend-design

Provides design and content guidelines for sparq's website and desktop GUI frontends.

8|1|Updated Jun 7, 2026
One-click install
npx skills add https://github.com/sparq-org/sparq --skill frontend-design-sparq-org
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sparq-org/sparq/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/sparq-org/sparq --skill frontend-design-sparq-org

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill unit addresses the challenge of maintaining two distinct yet cohesive frontends for sparq: a marketing website and a desktop GUI. It provides guidelines for structuring content, designing user interfaces, and ensuring accessibility and performance.

Core Features & Use Cases

  • Frontend Architecture: Defines the structure for the website and GUI, ensuring clarity and ease of use.
  • Content Strategy: Offers principles for reducing text overload and focusing on essential information.
  • Design Patterns: Implements patterns like progressive disclosure and keyboard-first navigation.
  • Visual Design: Shares a consistent design language across both frontends.
  • Accessibility and Performance: Ensures that both frontends are accessible and performant.

Quick Start

Review the SKILL.md file to understand the design principles and patterns for sparq's frontends.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
What is frontend design for a project with both a website and desktop GUI?

Frontend design for a dual website and desktop GUI project involves defining a shared visual design language and UI patterns to maintain consistency across platforms. It focuses on content reduction, information architecture, and accessibility to enhance user experience.

How do I reduce text overload in a user interface?

To reduce text overload in a user interface, apply content reduction principles that focus on essential information. Implement progressive disclosure UI patterns to present details contextually, preventing users from being overwhelmed by excessive text at once.

What UI patterns improve clarity and efficiency for desktop GUI users?

UI patterns that improve clarity and efficiency for desktop GUI users include progressive disclosure for managing content visibility and keyboard-first navigation for rapid interaction. These patterns streamline user workflows and minimize unnecessary cognitive load.

Can I use the same visual design language across a marketing website and a desktop application?

Yes, you can use the same visual design language across a marketing website and a desktop application. Establishing shared design guidelines ensures visual consistency, cohesive branding, and a unified user experience across both distinct frontend platforms.

When do I need to define information architecture for multiple frontends?

You need to define information architecture for multiple frontends when maintaining two distinct yet cohesive platforms, such as a website and a desktop GUI. It ensures structured content, clear navigation, and a unified user experience across both interfaces.

Does keyboard-first navigation work with progressive disclosure UI patterns?

Keyboard-first navigation works effectively with progressive disclosure UI patterns. Combining them allows users to rapidly navigate and expand contextual information without relying on a mouse, significantly improving frontend efficiency and accessibility for keyboard users.