skills.rest
amanpal3
amanpal3COMMUNITY
Explore all skills by this author →
GitHub

brand-identity

Enforces brand design tokens, tech stack rules, and voice guidelines when generating UI and copy.

1|Updated Sep 3, 2026
Search Tags:#react#brand guidelines#design tokens#tailwind css#voice and tone#shadcn#ui consistency
One-click install
npx skills add https://github.com/amanpal3/SKILLs --skill brand-identity-amanpal3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-identity
Source: https://github.com/amanpal3/SKILLs/tree/main/.agent/skills/brand-identity
Command: npx skills add https://github.com/amanpal3/SKILLs --skill brand-identity-amanpal3

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams often produce inconsistent UI components, styling, and copy because brand guidelines live in scattered documents. This Skill centralizes design tokens, technology constraints, and voice/tone rules so every generated component or text output follows the same brand standards. ## Core Features & Use Cases - Design Token Reference: Provides exact colors, fonts, spacing, border radii, and component styles via a structured design-tokens.json file. - Tech Stack Enforcement: Mandates React with TypeScript, Tailwind CSS, shadcn/ui, and Lucide React, while forbidding jQuery, Bootstrap, and standalone CSS files. - Voice & Tone Guidelines: Defines grammar rules, terminology replacements, and persona keywords for all user-facing copy. - Use Case: When asked to build a landing page, the Skill ensures the generated React components use the brand's color palette, Tailwind utility classes, shadcn/ui primitives, and on-brand marketing copy. ## Quick Start Generate a React landing page component that follows the brand identity guidelines for styling and copy.

Frequently Asked Questions about brand-identity

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

FAQPage Schema
How do I keep generated UI components consistent with brand guidelines?▼

Reference a centralized design-tokens.json file containing exact colors, fonts, spacing, and component styles. The Skill directs the AI to read these tokens before generating any UI code, ensuring consistent visual output.

What tech stack does this brand skill enforce for components?▼

It mandates React with TypeScript, Tailwind CSS for styling, shadcn/ui as the component library, and Lucide React for icons. jQuery, Bootstrap classes, and separate CSS files are explicitly forbidden.

Can I use this skill for writing marketing copy and error messages?▼

Yes, the voice-tone.md reference defines persona keywords, grammar rules, and terminology replacements for all user-facing text. It covers headings, punctuation, active voice, and word substitutions like using "use" instead of "utilize".

Does the brand skill support dark mode styling?▼

Yes, the tech-stack guidelines require dark mode support using Tailwind's dark: variant modifier. Components should use token-based classes like bg-primary rather than hardcoded hex values.

What are the limitations of a reference-only brand skill?▼

This Skill contains no executable scripts, so it cannot validate or lint generated code automatically. It relies on the AI reading the reference files and applying the rules during generation.

Related Skills

Explore More Design & Creative Skills→
orthogonal-shorthogonal-sh
12

brand-dev

Fetch brand data from domains for design-system extraction and enrichment.

Official
Advanced
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
GenproMMGenproMM

gsd-ui-phase

Generate UI design contracts as UI-SPEC.md for frontend phases.

Official
Intermediate
miethemiethe

design-system-patterns

Establish scalable design system foundations with semantic tokens and React theming.

Community
Advanced