skills.rest
brief-hq
brief-hqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

brief-design

Enforce Brief design system tokens and components for UI development.

3|Updated Jan 22, 2026
Search Tags:#react#design system#tailwind css#frontend development#ui components#ux
One-click install
npx skills add https://github.com/brief-hq/brief-wiggum --skill brief-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brief-design
Source: https://github.com/brief-hq/brief-wiggum/tree/main/.claude/skills/brief-design
Command: npx skills add https://github.com/brief-hq/brief-wiggum --skill brief-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all UI development adheres to Brief's established design system, preventing the creation of inconsistent or off-brand components.

Core Features & Use Cases

  • Component Adherence: Guides developers to use pre-defined components, typography, and color tokens.
  • Pattern Enforcement: Discourages the creation of custom, unapproved UI patterns.
  • Use Case: When building a new feature that requires a button, this Skill ensures you use the existing Button component from @/components/ui/button with the correct semantic color tokens, rather than creating a new button from scratch.

Quick Start

Use the brief-design skill to ensure the new modal component follows the design system's guidelines.

Frequently Asked Questions about brief-design

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

FAQPage Schema
How do I enforce a React design system for UI components?▼

A React design system ensures UI consistency by guiding developers to use predefined typography, color tokens, and component primitives from `@/components/ui/*`, actively preventing the creation of custom UI patterns that break visual alignment.

How do I build a new modal using Tailwind CSS without creating off-brand UI patterns?▼

Build a new modal using Tailwind CSS by following design system guidelines that direct you to use approved component primitives and semantic color tokens, preventing the creation of off-brand or unapproved custom UI patterns in your React application.

Why does my frontend development have inconsistent React UI components?▼

Frontend development yields inconsistent React UI components when developers create custom patterns instead of using predefined design system primitives, typography, and semantic color tokens from `@/components/ui/*`.

Can I use custom UI components instead of predefined React component primitives?▼

When strict design system adherence is enforced, you cannot use custom UI components; the system actively discourages unapproved patterns and requires using predefined primitives from `@/components/ui/*` to maintain application consistency.

What are the limitations of enforcing strict design system adherence in frontend development?▼

The main limitation of enforcing strict design system adherence is that it prevents creating custom UI patterns, restricting frontend developers to predefined typography, color tokens, and component primitives to maintain application consistency.

Related Skills

Explore More Design & Creative Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

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

Official
Intermediate
hieutrtrhieutrtr
8

ui-design-system

Apply design tokens and UI primitives to React/TypeScript projects.

Community
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
saajunaidsaajunaid

ui-styling-patterns

Build accessible, responsive UIs with Tailwind CSS and shadcn/ui components.

Community
Intermediate