skills.rest
sweeden-ttu
sweeden-ttuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/sweeden-ttu/profile --skill jekyll-paper-retemplate
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
singhianand23045singhianand23045

design-consultation

Generate a DESIGN.md design system plan with typography, color, layout, spacing, and motion.

Community
Advanced
michaelvolzmichaelvolz

rm-ui-styling

Enforce Foundation SCSS conventions and WCAG 2.1 AA accessibility in Blazor UI styling.

Community
Basic
btabaskabtabaska
1

rule-frontend-styles

Validate frontend SCSS changes for USWDS token usage and style conventions.

Community
Advanced
I-OnlabsI-Onlabs
3

ui-design-system

Generates Tailwind, (or other unspecified CSS framework? no, unspecified — generate minimalisticly:

Community
Intermediate