skills.rest
perimetre
perimetreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

perimetre-design-system

Implement and extend the @perimetre/ui design system across brands, tokens, and components.

Updated Aug 23, 2026
Search Tags:#accessibility#react#tailwind#tokens#design-system#cva#brand-variants
One-click install
npx skills add https://github.com/perimetre/ai-toolkit --skill perimetre-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perimetre-design-system
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-design-system/skills/design-system
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill perimetre-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides expert guidance for implementing and extending the @perimetre/ui design system across brands, tokens, and components to ensure consistent, accessible UI.

Core Features & Use Cases

  • Brand-aware design-token architecture supporting multiple brands with CSS token overrides.
  • CVA-based brand variants enabling component theming with minimal code, plus Tailwind CSS v4 integration.
  • Accessibility patterns and brand-registry workflows to maintain inclusive, compliant UI.

Quick Start

Follow the guide to integrate the design system into your Next.js or React project.

Frequently Asked Questions about perimetre-design-system

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

FAQPage Schema
How do I implement a brand-aware design system with CSS token overrides in React?▼

Set up a brand-aware design system by using CVA to create brand variants and overriding CSS tokens for each brand. This approach enables component theming with minimal code while maintaining visual consistency across different projects.

What is the best way to bridge design tokens with Tailwind CSS v4 components?▼

Bridge design tokens with Tailwind CSS v4 by integrating CVA-based brand variants into your component layer. This configuration applies token-driven styles directly within Tailwind utility classes to achieve consistent UI.

Does this design system guidance work with Next.js environments?▼

Yes, the design system guidance applies to both Next.js and standard React environments. It provides governance, accessibility patterns, and best-practice workflows for building compliant, brand-aware components within these frameworks.

How do I manage accessibility patterns and brand-registry workflows for UI components?▼

Maintain accessibility patterns and brand-registry workflows by applying governance rules during component development. This ensures your multi-brand UI remains inclusive and compliant across all token variations and CVA implementations.

When do I need CVA brand variants for design tokens?▼

You need CVA brand variants when extending a design system across multiple brands requiring distinct visual identities. CVA applies brand-specific CSS token overrides to components programmatically without duplicating structural code.

Related Skills

Explore More Design & Creative Skills→
JaivishChauhanJaivishChauhan
6

tailwind-mastery

Configure Tailwind CSS v4 design systems with CSS variables in Next.js projects.

Community
Advanced
soeiroosoeiroo

theming-system

Develop scalable theming architectures with layered tokens for multi-brand applications.

Community
Advanced
PriyanshKuniyalPriyanshKuniyal

tailwind-design-system

Implement design tokens, responsive patterns, and accessibility in Tailwind CSS v4 components.

Community
Advanced
herdiansahherdiansah
23

design-system-architect

Architect design token taxonomies and component libraries for multi-brand theming.

Community
Advanced