skills.rest
mo7amedElfadil
mo7amedElfadilCOMMUNITY
Explore all skills by this author →
GitHub

maintaining-brand-identity

Enforce ITSQ BidOps brand identity across UI components, copy, and technical implementations.

Updated Aug 27, 2026
Search Tags:#brand identity#component library#design tokens#tailwind css#voice and tone#UI consistency
One-click install
npx skills add https://github.com/mo7amedElfadil/bidOps --skill maintaining-brand-identity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maintaining-brand-identity
Source: https://github.com/mo7amedElfadil/bidOps/tree/main/.agent/skills/brand-identity
Command: npx skills add https://github.com/mo7amedElfadil/bidOps --skill maintaining-brand-identity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures all user interfaces, written content, and technical implementations consistently adhere to the ITSQ BidOps brand identity, preventing visual and stylistic drift.

Core Features & Use Cases

  • Visual Consistency: Enforces correct use of colours, typography, and spacing defined in design tokens.
  • Technical Adherence: Guides developers to use approved libraries (shadcn/ui) and styling methods (Tailwind CSS with CSS variables).
  • Content Alignment: Ensures user-facing text and documentation follow the defined voice, tone, and grammar rules.
  • Use Case: When developing a new dashboard widget, use this skill to ensure its colours match the design-tokens.json, its typography follows the Inter hierarchy, and its copy adheres to the "Expert Partner" voice.

Quick Start

Ensure the new React component uses Tailwind CSS classes that reference design tokens for colours and spacing.

Frequently Asked Questions about maintaining-brand-identity

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

FAQPage Schema
How do I enforce design tokens and brand identity in Tailwind CSS components?▼

To enforce brand identity in Tailwind CSS, ensure React components reference design tokens defined in `design-tokens.json` for colors and spacing. This visual consistency prevents stylistic drift across user interfaces and aligns technical implementations with approved libraries like shadcn/ui.

How do I maintain UI consistency when developing new dashboard widgets?▼

Maintain UI consistency by validating new dashboard widgets against `design-tokens.json` and `brand-philosophy.md`. Ensure colours match token definitions, typography follows the `Inter` hierarchy, and user-facing copy adheres to the defined "Expert Partner" voice and tone principles.

Does this brand identity validation require shadcn/ui and specific tech stack files?▼

Yes, brand identity validation requires reviewing `tech-stack.md` to ensure correct usage of shadcn/ui primitives and Tailwind CSS with CSS variables. Adherence to these approved libraries and styling methods is necessary for technical compliance.

What is the best way to align user-facing text with a defined brand voice?▼

The best way to align user-facing text is to validate copy against documented voice, tone, and grammar rules. Ensuring documentation and UI text follow the "Expert Partner" voice prevents stylistic drift and maintains content alignment with brand philosophy.

Why does my UI component fail brand identity compliance checks?▼

UI components fail brand identity compliance when they deviate from `design-tokens.json` specifications, use unapproved styling methods instead of Tailwind CSS variables, or contain copy that violates the defined voice and tone principles outlined in `brand-philosophy.md`.

Can I use custom CSS variables instead of predefined design tokens for spacing?▼

Using custom CSS variables instead of predefined design tokens risks breaking brand identity compliance. The skill enforces adherence to approved styling methods using Tailwind CSS with CSS variables that strictly reference the spacing defined in `design-tokens.json`.

Related Skills

Explore More Design & Creative Skills→
CarlosDoersCarlosDoers

brand-identity

Enforce brand standards across design, copy, and technology implementations.

Community
Intermediate
fakhriaditiarahmanfakhriaditiarahman
1

brand-identity

Enforce brand consistency across design tokens, React components, and copy.

Community
Basic
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate