skills.rest
stencila
stencilaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

theme-creation

Create, update, and plan Stencila themes for documents, sites, plots, and PDF outputs.

900|58|Updated May 31, 2012
Search Tags:#typography#branding#css#design tokens#theme#stencila
One-click install
npx skills add https://github.com/stencila/stencila --skill theme-creation-stencila
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-creation
Source: https://github.com/stencila/stencila/tree/main/.stencila/skills/theme-creation
Command: npx skills add https://github.com/stencila/stencila --skill theme-creation-stencila

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create, update, and plan Stencila themes, ensuring your documents and sites have a consistent, professional, and visually appealing design across various outputs.

Core Features & Use Cases

  • Theme Customization: Design themes for documents, websites, plots, and print/PDF outputs.
  • Token Management: Utilize and recommend semantic, node, plot, print, and site-specific design tokens.
  • Use Case: You need to create a new theme for your research reports that uses a specific serif font for body text, a sans-serif font for headings, and a teal accent color, ensuring it looks good in both web view and PDF export.

Quick Start

Help me create a document theme with serif body text, sans-serif headings, and a teal accent color.

Frequently Asked Questions about theme-creation

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

FAQPage Schema
How do I create a custom theme for documents that looks consistent across web and PDF outputs?▼

Create a document theme by defining a theme.css file with semantic and module design tokens. This ensures consistent typography, branding, and visual styling across web pages and print/PDF exports.

What are design tokens and how do they work when building a CSS theme?▼

Design tokens are semantic, node, plot, and print-specific variables that define colors, fonts, and spacing. Use `stencila themes tokens` to discover built-in token families and apply them in your theme.css for consistent visual styling.

Can I customize site navigation and branding within a Stencila theme?▼

Yes, theme creation involves customizing site-specific tokens to manage navigation layouts and branding elements. You can update these properties within your theme.css to align published sites with your design system.

How do I align web, Python, and R plots with a Stencila design system?▼

Tune plot-specific design tokens within your theme to align web, Python, and R plots with your Stencila design system. This ensures visual consistency across data visualizations generated in different programming environments.

How do I validate a theme configuration to ensure it works correctly?▼

Validate your theme configuration by running the `stencila themes validate` command. This checks your theme.css file and design token structure to ensure they function correctly across documents, sites, and print outputs.

Related Skills

Explore More Design & Creative Skills→
wpankwpank
11

theme-factory

Generate custom color and typography themes using CSS variables.

Community
Basic
hyperbolic-chyperbolic-c
5

pptx-posters

Convert HTML/CSS poster templates into PPTX or PDF posters for academic conferences.

Community
Basic
robinbarvaagrobinbarvaag

plotly

Generate interactive scientific and statistical data visualizations with Python Plotly.

Community
Intermediate
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced