sparq-ui

Name: sparq-ui
Availability: InStock
Author: kriswemet

Define Sparq UI design tokens and component guidelines for React codebases.

Updated Feb 24, 2025

Search Tags:#typography #accessibility #react #css #design-system #color-tokens #ui-patterns

Ready to run

npx skills add https://github.com/KrisWemet/sparq-connection-lab --skill sparq-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sparq-ui
Source: https://github.com/KrisWemet/sparq-connection-lab/tree/main/.claude/skills/sparq-ui
Command: npx skills add https://github.com/KrisWemet/sparq-connection-lab --skill sparq-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Sparq UI design system provides a centralized source of truth for the visual language, ensuring consistent patterns, typography, colors, and interactions across all components and pages.

Core Features & Use Cases

Design tokens for colors, typography, spacing, and motion that can be reused across the codebase.
Component patterns and UI guidelines for layouts, accessibility, responsive behavior, and animation principles.
Reference materials to align designers and developers when touching JSX, CSS, Tailwind, or shadcn components.

Quick Start

Apply Sparq UI guidelines before touching JSX/CSS in the Sparq codebase.

Frequently Asked Questions about sparq-ui

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

FAQPage Schema

How do I maintain consistent typography and color tokens across React components?▼

A centralized design-system reference ensures consistent typography, color tokens, and interaction models across React components by providing a single source of truth for visual language implementation.

What design tokens are needed for building accessible UI patterns in CSS and Tailwind?▼

Building accessible UI patterns requires design tokens for colors, typography, spacing, and motion to standardize responsive behavior and visual consistency across CSS and Tailwind layouts.

Can I use these design system standards when modifying shadcn components?▼

Yes, you can apply these design system standards when modifying shadcn components. The reference provides alignment guidelines for developers touching JSX, CSS, Tailwind, or shadcn components.

When should I apply design system guidelines to my codebase layout?▼

Apply design system guidelines before touching JSX, CSS, or Tailwind in the codebase. This ensures component patterns, loading states, and animations follow the established team alignment conventions.

What is the best way to structure loading states and animations in a React UI?▼

The best way to structure loading states and animations in a React UI is to follow centralized component patterns and motion tokens that ensure consistent interaction models across pages and layouts.

Why do my UI components look inconsistent even when using shared CSS classes?▼

UI components may look inconsistent without centralized design tokens for spacing, typography, and color. A design system reference aligns visual changes and interaction models across the codebase.