skills.rest
ReubenFrimpong
ReubenFrimpongCOMMUNITY
Explore all skills by this author →
Website𝕏@Reuben_TheCoderGitHub

ui

Define and enforce the PastCare UI design language with CSS tokens.

Updated Aug 27, 2026
Search Tags:#ui#front-end#design system#css#styling#component library
One-click install
npx skills add https://github.com/ReubenFrimpong/past-care-spring --skill ui-reubenfrimpong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/ReubenFrimpong/past-care-spring/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/ReubenFrimpong/past-care-spring --skill ui-reubenfrimpong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures a consistent and professional look and feel across all UI components in the PastCare application by providing a centralized source of truth for design tokens and patterns.

Core Features & Use Cases

  • Design System Enforcement: Provides exact CSS values for colors, typography, spacing, and more.
  • Component Styling: Offers pre-defined CSS classes and patterns for common UI elements like buttons, cards, and avatars.
  • Use Case: When developing a new member profile page, use this Skill to apply the correct primary button gradient, card shadow, and avatar styling to maintain brand consistency.

Quick Start

Implement a primary button with the specified styles.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I enforce a consistent CSS design system across front-end components?▼

To enforce a consistent CSS design system, centralize your design tokens for color palettes, typography scales, and shadow definitions, then apply them via predefined CSS classes for elements like buttons and cards.

What design tokens do I need for styling UI component patterns like avatars and badges?▼

Styling UI component patterns requires design tokens for color palettes, border-radius hierarchy, shadow definitions, and typography scales to ensure visual consistency across avatars, badges, and cards.

How do I implement a primary action button gradient using a front-end design system?▼

Implement a primary action button gradient by applying the specific CSS class or style pattern defined within your design system's critical rules for component-specific styling.

Does this UI styling approach require specific component libraries to work?▼

No, this UI styling approach does not require specific component libraries or dependencies. It defines and enforces visual design language directly through component CSS and design tokens.

When should I use predefined CSS classes instead of custom styling for design system components?▼

Use predefined CSS classes instead of custom styling whenever building core components like buttons, cards, and avatars to maintain brand consistency and adhere to critical rules for animation duration and spacing.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic
jeremyspoffordjeremyspofford

design-guide

Enforce consistent UI design with an 8px grid and Tailwind CSS configuration.

Community
Basic