skills.rest
krazyuniks
krazyuniksCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Apply centralized design tokens to frontend templates in Astro, Jinja2, and React.

Updated Aug 23, 2026
Search Tags:#typography#theming#frontend#design-system#design-tokens#UI-design
One-click install
npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill frontend-design-krazyuniks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/krazyuniks/guitar-tone-shootout-archive/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill frontend-design-krazyuniks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes frontend visuals for Guitar Tone Shootout by centralizing design decisions into a cohesive token-driven system, ensuring consistency across pages and components.

Core Features & Use Cases

  • Unified Design Tokens: Centralizes colors, typography, and component styles in astro/src/styles/global.css for consistent UI.
  • Template Integration: Guides usage across Jinja2 and Astro/React templates with shared tokens.
  • Component Patterns: Documents patterns for Card, Button, and Block Card components.
  • Documentation & Style Guidance: Provides a Design Style Guide and practical guidelines for theming and accessibility.

Quick Start

Align UI components with the design tokens defined in astro/src/styles/global.css and reference the Design Style Guide when implementing styling in templates.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I standardize frontend visuals using a centralized design token system?▼

Standardize frontend visuals by applying a centralized design token system defined in global.css, enforcing consistent colors, typography, and component styling across all pages and components.

What is a design token system and how does it unify UI component styling?▼

A design token system unifies UI component styling by centralizing visual decisions like colors and typography into shared CSS variables, ensuring consistent implementation across templates and pages.

Does this design token system work with both Astro and Jinja2 templates?▼

Yes, the design token system works with Astro and Jinja2 templates by guiding the usage of shared CSS tokens across React and Astro components for consistent visual output.

How do I align UI components with shared CSS tokens for theming and typography?▼

Align UI components with shared CSS tokens by referencing the Design Style Guide and applying the centralized variables from global.css to implement theming and typography consistently.

What's the best way to document component patterns for Cards and Buttons in a design system?▼

The best way to document component patterns is by creating a Design Style Guide that centralizes styling rules for Card, Button, and Block Card components using shared CSS tokens.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
mrmartineaumrmartineau
2

using-zui

Build user interfaces with ZUI components and design tokens.

Community
Intermediate
calvingitcalvingit
2

ckm:ui-styling

Build accessible React UI components with shadcn/ui, Radix, and Tailwind CSS.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate