skills.rest
ohnotnow
ohnotnowCOMMUNITY
Explore all skills by this author →
GitHub

uofg-design-system

Centralize University of Glasgow design tokens for HTML, CSS, React, and Tailwind UI development.

1|Updated Feb 22, 2026
Search Tags:#typography#tailwind#design-system#color-tokens#ui-tokens#glasgow
One-click install
npx skills add https://github.com/ohnotnow/agentic-stuff --skill uofg-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uofg-design-system
Source: https://github.com/ohnotnow/agentic-stuff/tree/main/skills/uofg-design-system
Command: npx skills add https://github.com/ohnotnow/agentic-stuff --skill uofg-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The University of Glasgow Design System tokens, typography, spacing, grid and component guidance are dispersed across multiple docs and codebases. This skill centralizes those resources to enable rapid, brand-compliant UI development.

Core Features & Use Cases

  • Central token references including colours, typography, spacing, and grid to ensure consistent UofG branding.
  • Ready-to-use references for CSS (css-tokens.css) and Tailwind (tailwind-config.js), plus a Flux integration guide to support both public and admin interfaces.
  • Use Case: Teams building HTML/React components or Tailwind-driven UIs can rely on this skill to produce Glasgow-branded interfaces quickly and consistently.

Quick Start

Import the UofG tokens by including references/css-tokens.css or applying references/tailwind-config.js in your project to start building Glasgow-branded UI.

Frequently Asked Questions about uofg-design-system

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

FAQPage Schema
How do I apply University of Glasgow branding tokens to my Tailwind configuration?▼

Apply University of Glasgow branding tokens to Tailwind by integrating the provided tailwind-config.js reference file into your project, enabling consistent use of official UofG colors, typography, spacing, and grid scales across your UI components.

What is the best way to ensure brand-compliant UI for University of Glasgow web projects?▼

Ensuring brand-compliant UI for University of Glasgow web projects involves centralizing design system references, using provided CSS token files and Tailwind configurations to consistently apply official colors, typography, and spacing across HTML and React components.

Can I use these Glasgow design tokens with standard HTML and CSS?▼

Yes, you can use these Glasgow design tokens with standard HTML and CSS by including the css-tokens.css reference file, which provides direct access to official university colors, typography styles, and spacing variables for static web development.

Does the UofG design system skill include component guidance for React interfaces?▼

The UofG design system skill includes component guidance for React interfaces, supplying linked references and design tokens that help developers build compliant university-branded components quickly within React-driven web projects.

What design tokens are available for University of Glasgow branding?▼

Available design tokens for University of Glasgow branding include official colors, typography specifications, spacing scales, and grid configurations, all centralized to support rapid and consistent UI development across various web frameworks.

Do I need any external dependencies to use the UofG design tokens?▼

No external dependencies are required to use the UofG design tokens, as the skill operates standalone, providing frontmatter-driven metadata and linked reference files for CSS and Tailwind to integrate Glasgow branding directly into your workflow.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
bmadiganbmadigan
1

shadcn-ui

Create public-facing React interfaces with ShadCN UI and Inertia.js.

Community
Intermediate
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
BellaBeBellaBe
37

frontend-theme-setup

Automate Untitled UI setup with Tailwind design tokens and resource downloads for Next.js.

Community
Intermediate