skills.rest
trycompai
trycompaiOFFICIAL
Explore all skills by this author →
Website𝕏@trycompaiGitHub

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

1.8k|375|Updated Jan 15, 2025
Search Tags:#theming#ui#accessibility#frontend#components#design-system#dark-mode
One-click install
npx skills add https://github.com/trycompai/comp --skill ui-trycompai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/trycompai/comp/tree/main/.agents/skills/ui
Command: npx skills add https://github.com/trycompai/comp --skill ui-trycompai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides building and editing frontend UI components by enforcing design system usage, consistent styling, color tokens, theming, and accessibility considerations across projects.

Core Features & Use Cases

  • Design System-Driven: Promote consistent components and patterns across apps using the design system.
  • Theming & Accessibility: Apply color tokens, dark mode, and accessible icon usage to ensure inclusive UI.
  • Code Guidance: Provide best practices for layout, composition, and styling in React/TS projects.

Quick Start

Design a cohesive UI module following the design system rules, color tokens, dark mode, and accessible icons.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I enforce design system usage when building frontend UI components?▼

To enforce design system usage in frontend UI components, apply consistent design-system tokens, color palettes, and accessible icon patterns across all web application layouts and component compositions.

What's the best way to implement dark mode and theming in a React application?▼

The best way to implement dark mode and theming in a React application is by strictly adhering to design-system color tokens and palettes, ensuring consistent theme application across all UI components.

How do I make frontend UI components accessible while using design system tokens?▼

Making frontend UI components accessible requires applying design-system tokens alongside accessible icon usage and inclusive component patterns, ensuring the UI meets accessibility standards across all themes.

Can I use this approach for layout composition and styling in TypeScript projects?▼

Yes, this approach provides code guidance and best practices specifically for layout composition and styling in React and TypeScript projects using design-system-driven component patterns.

What are design system tokens and when do I need them for UI development?▼

Design system tokens are standardized variables for colors and styles that you need when developing UI components to ensure visual consistency, proper theming, and dark mode support across applications.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
pawan0631pawan0631

figma-implement-design

Convert Figma design specifications into production-ready UI code.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced