skills.rest
45black-Limited
45black-LimitedOFFICIAL
Explore all skills by this author →
GitHub

apply-saville

Apply 45Black's Saville Edition v5.0 design system with variant selection and token generation.

1|Updated Feb 12, 2026
Search Tags:#typography#accessibility#wcag#tokens#design-system#saville#brand-spec
One-click install
npx skills add https://github.com/45black-Limited/uk-legal-plugins --skill apply-saville-45black-limited
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-saville
Source: https://github.com/45black-Limited/uk-legal-plugins/tree/main/skills/apply-saville
Command: npx skills add https://github.com/45black-Limited/uk-legal-plugins --skill apply-saville-45black-limited

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a unified approach to applying 45Black Saville Edition (v5.0) design system across internal and client-facing projects, ensuring brand consistency and faster delivery.

Core Features & Use Cases

  • Variant guidance: Core for internal tools and Clarity for external products.
  • Token generation, typography guidance, and accessibility validation aligned with the Saville brand spec.
  • End-to-end workflow from brand reference to component scaffolding and design implementation.

Quick Start

Apply the Saville design system to a new project by selecting the appropriate variant and generating tokens.

Frequently Asked Questions about apply-saville

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

FAQPage Schema
How do I apply design tokens and typography from a brand spec to a new project?▼

Applying design tokens and typography from a brand spec requires reading the reference, selecting a variant, and generating tokens. This Skill scaffolds components and validates WCAG compliance for the implementation.

What is the difference between Core and Clarity design system variants?▼

The Core variant targets internal tooling, while the Clarity variant serves external, client-facing products. Variant selection dictates token generation, typography loading, and accessibility validation rules.

How do I validate WCAG accessibility compliance when generating design tokens?▼

Validating WCAG compliance involves checking generated tokens and typography against accessibility requirements. This Skill validates WCAG and compliance rules during the design system application workflow.

Do I need a brand spec to start generating design system tokens and scaffolding components?▼

Yes, reading the brand spec is required before selecting a variant, loading typography, generating tokens, and scaffolding components. It provides the foundational compliance rules for the design system.

Can I use this design system Skill for both internal tools and client-facing products?▼

Yes, the system supports both contexts by providing variant guidance: Core for internal tools and Clarity for client-facing products. It ensures brand consistency and faster delivery across all project types.

What are the limitations of applying a unified design system across multiple products?▼

A constraint is strict adherence to the v5.0 Saville Edition brand spec for variant selection and token generation. Deviating from predefined tokens and typography guidelines risks breaking WCAG compliance and brand consistency.

Related Skills

Explore More Design & Creative Skills→
gitdukgitduk

ui-design-system

Generate design system tokens from brand colors and style variants.

Community
Advanced
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
lilbom32lilbom32

design-system-management

Coordinate design tokens, component libraries, and patterns across product teams.

Community
Advanced
45black45black
1

apply-saville

Generate design tokens and typography from the SAVILLE-v5 brand spec.

Community
Advanced