style-guide

Create project style guides on a Pencil canvas for branding and typography.

2|Updated May 13, 2026
One-click install
npx skills add https://github.com/mujtaba3B/gstack-extensions --skill style-guide-mujtaba3b
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: style-guide
Source: https://github.com/mujtaba3B/gstack-extensions/tree/main/design/skills/style-guide
Command: npx skills add https://github.com/mujtaba3B/gstack-extensions --skill style-guide-mujtaba3b

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams define a consistent visual direction for a project when fonts, colors, and brand feel need to be chosen deliberately instead of guessed.

Core Features & Use Cases

  • Guided discovery: Interviews the user one question at a time to uncover brand adjacency, palette anchors, font taste, and audience tone.
  • Light research and grounded choices: Pulls from reference sites and existing repo assets before proposing colors, typography, or other taste decisions.
  • Canvas-based decision making: Creates real font option panels and a standard five-card style guide frame on the Pencil canvas so the user can choose from rendered options.
  • Use cases: Establish a new project style guide, formalize a visual language before mockup work, choose typography and palette directions, or align a design system to an existing brand.

Quick Start

Ask the assistant to create a style guide for your project on the Pencil canvas.

Frequently Asked Questions about style-guide

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

FAQPage Schema
How do I create a project style guide for branding and typography?

To create a project style guide, this tool conducts one-question-at-a-time interviews to uncover brand adjacency, palette anchors, font taste, and audience tone. It then generates a five-card style guide frame on a Pencil canvas with real font option panels.

What is the best way to choose a color palette and fonts for a mockup?

The best way to choose colors and fonts for a mockup is using a guided discovery process that pulls from reference sites and existing repo assets. It proposes grounded typography and palette options rendered on a canvas for direct comparison.

Can I formalize a visual language on a Pencil canvas before starting design work?

Yes, you can formalize a visual language on a Pencil canvas before mockup work. The tool establishes a new project style guide by applying typography, palette selection, and visual-language decisions into a standard five-card frame.

Does this style guide tool work with existing repo assets and reference sites?

Yes, this style guide tool works with existing repo assets and reference sites. It performs light brand research by pulling from these sources before proposing colors, typography, and other taste decisions for your project.

How do I align a design system to an existing brand direction?

To align a design system to an existing brand, the tool interviews you one question at a time to define taste decisions deliberately. It uncovers audience tone and brand adjacency to establish a consistent visual direction on the canvas.

What are the limitations of using a canvas-based style guide for visual design?

A limitation of this canvas-based style guide approach is that it focuses specifically on establishing visual direction, palette selection, and typography through guided interviews and rendered font panels. It outputs a five-card style guide frame rather than generating full interactive mockups.