skills.rest
KrisWemet
KrisWemetCOMMUNITY
Explore all skills by this author →
GitHub

sparq-ui

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
One-click install
npx skills add https://github.com/KrisWemet/sparq-connection-lab --skill sparq-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
anicdhanicdh

frontend-ui

Apply Tailwind and Shadcn/ui patterns with accessibility rules to React components.

Community
Advanced
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic