jekyll-paper-retemplate

Re-template Jekyll sites to the Paper design system using DESIGN.md tokens.

Updated Jan 10, 2026

Search Tags:#typography #theming #accessibility #design system #jekyll #scss tokens #ui interaction states

Ready to run

npx skills add https://github.com/sweeden-ttu/profile --skill jekyll-paper-retemplate

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jekyll-paper-retemplate
Source: https://github.com/sweeden-ttu/profile/tree/main/.cursor/skills/jekyll-paper-retemplate
Command: npx skills add https://github.com/sweeden-ttu/profile --skill jekyll-paper-retemplate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you retheme an existing Jekyll site to match the Paper design system without drifting into inconsistent tokens or inaccessible UI states.

Core Features & Use Cases

Token-driven Paper styling: Replaces ad-hoc colors and typography with values derived from the repository DESIGN.md source of truth.
Typography and layout alignment: Updates SCSS partials and layout styles to reflect Paper’s hierarchy and surfaces (including Roboto, Montserrat, and PT Mono).
Component interaction correctness: Applies Paper expectations for default/hover/focus-visible/active/disabled (plus loading/error where relevant) and verifies WCAG 2.2 AA behavior.
Safe Jekyll implementation workflow: Guides a predictable build-and-spot-check loop (SCSS errors, Liquid breakage, key templates) to reduce regressions during migration or redesign.

Quick Start

Use the jekyll-paper-retemplate skill to re-template your Jekyll layouts and styles to the Paper design system by mapping tokens from DESIGN.md into the SCSS files and updating fonts in _layouts/default.html.

Frequently Asked Questions about jekyll-paper-retemplate

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

FAQPage Schema

How do I retheme a Jekyll site to a design system without breaking existing layouts?▼

Apply a token-driven restyling approach by replacing ad-hoc colors and typography with values derived from DESIGN.md, updating SCSS partials and layout styles to reflect the Paper hierarchy, and verifying builds with bundle exec jekyll build.

What is the best way to enforce WCAG 2.2 AA interaction states in Jekyll SCSS?▼

Define explicit interaction states including default, hover, focus-visible, active, and disabled in your SCSS partials, plus loading or error states where relevant, and verify the behavior against WCAG 2.2 AA requirements.

How do I update Jekyll typography and layouts to use Roboto, Montserrat, and PT Mono?▼

Refresh Google Fonts links in _layouts/default.html and update SCSS partials to reference Roboto, Montserrat, and PT Mono, aligning the typography tokens with the design system source of truth.

Does the Paper design system restyling workflow support standard Jekyll builds?▼

Yes, the workflow requires running bundle exec jekyll build to verify SCSS compilation and spot-check key templates, ensuring the token alignment and layout updates do not break Liquid logic or existing styles.

Why are my Jekyll SCSS variables drifting from the design system tokens during a restyle?▼

Drift occurs when styling updates bypass the design system source of truth. Enforce token consistency by mapping all SCSS variables, typography, and layout values directly from DESIGN.md to prevent ad-hoc styling overrides.