skills.rest
ludiscan
ludiscanOFFICIAL
Explore all skills by this author →
GitHub

ui-guidelines

Enforces UI guidelines for Ludiscan-Webapp components using Emotion and Atomic Design.

1|Updated Jan 26, 2025
Search Tags:#theming#accessibility#design-system#atomic-design#emotion-styled#ui-guidelines
One-click install
npx skills add https://github.com/ludiscan/ludiscan-webapp --skill ui-guidelines-ludiscan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-guidelines
Source: https://github.com/ludiscan/ludiscan-webapp/tree/main/.claude/skills/ui-guidlines
Command: npx skills add https://github.com/ludiscan/ludiscan-webapp --skill ui-guidelines-ludiscan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI component creation and editing can become inconsistent without a centralized set of rules. This guide ensures Emotion styled usage, theme token adherence, and Atomic Design alignment across ludiscan-webapp.

Core Features & Use Cases

  • Enforces Emotion styled components over inline styles to maintain styling consistency.
  • Centralizes theme access via useSharedTheme to ensure cohesive theming.
  • Promotes Atomic Design structure (atoms, molecules, organisms, templates) for scalable UI.
  • Provides quick references and examples to streamline component creation and edits.

Quick Start

Review and apply the UI guidelines before starting any new UI component development.

Frequently Asked Questions about ui-guidelines

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

FAQPage Schema
How do I maintain consistent UI styling when building new components?▼

Consistent UI styling is maintained by using Emotion styled components instead of inline styles, ensuring centralized theme token access, and following Atomic Design patterns for scalable component architecture.

What is the best way to structure components using Atomic Design?▼

Atomic Design structure organizes components into atoms, molecules, organisms, and templates, promoting scalable UI development and consistent architecture across the entire web application.

How do I access theme tokens for styling without hardcoding values?▼

Theme tokens are accessed centrally via the useSharedTheme hook, ensuring cohesive theming and preventing hardcoded values across Emotion styled components throughout the application.

Can I use inline styles for quick component edits in the webapp?▼

Inline styles are discouraged for component edits; the guidelines enforce Emotion styled components to maintain styling consistency and ensure proper theme token adherence across the codebase.

Why does my new UI component break the existing design system consistency?▼

Design system consistency breaks when components bypass centralized theme access or ignore Atomic Design structure; applying the UI guidelines before development ensures proper Emotion styled usage and theming.

Does AI-assisted component creation work with these UI guidelines?▼

AI-assisted component creation is supported through a central Quick Start prompt that guides styling, theming, accessibility, and architecture decisions when generating atoms, molecules, and organisms.

Related Skills

Explore More Design & Creative Skills→
ggombeeggombee
13

figma-to-code

Convert Figma design files to Emotion-styled React components with TypeScript.

Community
Advanced
AJV009AJV009
1

canvas-storybook

Generate and organize React Canvas Storybook stories using atomic design structure.

Community
Advanced
strongeronstrongeron
18

sb-wrappers

Scaffold typed React wrapper components into .storybook/wrappers for audit data visualization.

Community
Intermediate
gil00pitagil00pita

styled-components

Style React components with CSS-in-JS using styled-components.

Community
Advanced