skills.rest
Takashi-Matsumura
Takashi-MatsumuraCOMMUNITY
Explore all skills by this author →
GitHub

UI/UXデザインガイドライン

Standardize UI design with semantic color tokens, dark mode, and shadcn/ui components.

Updated Dec 20, 2025
Search Tags:#design#UI#UX#tailwind#shadcn-ui#dark-mode#semantic-tokens
One-click install
npx skills add https://github.com/Takashi-Matsumura/box-frame --skill ui-ux-takashi-matsumura
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI/UXデザインガイドライン
Source: https://github.com/Takashi-Matsumura/box-frame/tree/main/.claude/skills/ui-ux
Command: npx skills add https://github.com/Takashi-Matsumura/box-frame --skill ui-ux-takashi-matsumura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes UI design guidelines to ensure consistent theming, typography, and component usage across the application.

Core Features & Use Cases

  • Semantic color tokens and dark mode rules to prevent hard-coded colors and improve accessibility.
  • Guidance for shadcn/ui component adoption, typography scale, spacing, and layout patterns.
  • Use Case: Frontend teams apply these guidelines to build cohesive interfaces faster, reducing design debt and improving maintainability.

Quick Start

Align your codebase with semantic color tokens (e.g., bg-card, text-foreground). Import and reuse components from the design system (buttons, cards, etc.), and apply the established spacing and typography rules on new pages. Audit existing pages for dark mode coverage and color-token consistency to ensure accessibility and visual harmony.

Frequently Asked Questions about UI/UXデザインガイドライン

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

FAQPage Schema
How do I standardize UI design guidelines for consistent theming and typography?▼

To standardize UI design guidelines, apply semantic color tokens like bg-card and text-foreground to enforce consistent theming, typography, and component usage across your application.

How do I implement dark mode support without hard-coded colors in Tailwind?▼

Implement dark mode support by replacing hard-coded colors with semantic color tokens and auditing existing pages for color-token consistency to ensure accessibility and visual harmony.

What is the best way to adopt shadcn/ui components for frontend consistency?▼

Adopt shadcn/ui components by importing and reusing design system elements like buttons and cards, then applying established spacing and typography rules to build cohesive interfaces faster.

Can I use semantic tokens to improve accessibility in my frontend layout?▼

Yes, you can use semantic tokens to improve accessibility by enforcing non-hardcoded colors, which standardizes visual contrast and supports dark mode coverage across layouts.

Why does my application have design debt and how do I reduce it?▼

Applications accumulate design debt from inconsistent component usage and hard-coded colors. Reduce it by aligning your codebase with semantic color tokens and reusing design system components.

When do I need to audit existing pages for dark mode coverage?▼

You need to audit existing pages for dark mode coverage when standardizing UI guidelines to ensure color-token consistency, accessibility, and visual harmony across the entire application.

Related Skills

Explore More Design & Creative Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
YanBerdinYanBerdin
1

frontend-design

Generate frontend interfaces with token-based styling, accessibility, and dark-mode support.

Community
Advanced
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced
KhoiwallKhoiwall

frontend-design

Create production-grade React interface blueprints using Tailwind v4 and shadcn/ui.

Community
Advanced