teaching-site-design-system

Define token-driven design systems for teaching site themes.

47|10|Updated May 14, 2026

Search Tags:#typography #ui-components #visual-design #dark-mode #design-tokens #brand-consistency

Ready to run

npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill teaching-site-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: teaching-site-design-system
Source: https://github.com/kevintsai1202/teaching-site-skills/tree/main/teaching-site-design-system
Command: npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill teaching-site-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a token-driven design system to ensure consistent visuals across a teaching site and content-driven SPA, aligning colors, typography, components, and interaction patterns.

Core Features & Use Cases

Token-based color and typography system that applies across SPA, eBook, and corporate editions.
Guidelines for components like day hero, glass card, task lists, and prompts; ensures visual consistency across formats.
Cross-format token reuse; OKLCH tokens; dark mode strategy to keep brand coherence.

Quick Start

Copy the token starter from templates/tokens.css into your site's style block and begin theming.

Frequently Asked Questions about teaching-site-design-system

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

FAQPage Schema

How do I create a token-driven design system for a teaching site?▼

To create a token-driven design system, copy the token starter from templates/tokens.css into your site's style block and begin theming. This defines CSS variables for colors, typography, and components to ensure consistent visuals across web formats.

How do I maintain brand consistency across web, ebook, and corporate editions?▼

Maintain brand consistency across formats by using cross-format token reuse. This design system shares OKLCH tokens and component guidelines across SPA, eBook, and corporate editions, ensuring a cohesive visual language throughout.

What is the best dark mode strategy for content-driven SPAs?▼

A principled dark mode strategy for content-driven SPAs uses OKLCH design tokens to adjust colors while maintaining brand coherence. This token-driven approach ensures visual consistency when switching between light and dark themes.

How do I define typography and UI components for a teaching site?▼

Define typography and UI components using token-based CSS variables. The system provides guidelines for components like day heroes, glass cards, task lists, and prompts, ensuring visual consistency across all teaching site formats.

Can I use OKLCH design tokens for cross-format visual design?▼

Yes, you can use OKLCH design tokens for cross-format visual design. The system applies OKLCH tokens to coordinate colors and typography across SPA, eBook, and corporate editions, maintaining brand coherence across all outputs.

Do I need CSS variables to enforce visual consistency across SPA themes?▼

Yes, you need token-based CSS variables to enforce visual consistency across SPA themes. The design system satisfies token-based CSS variables to align colors, typography, components, and interaction patterns across formats.