skills.rest
jdconley
jdconleyCOMMUNITY
Explore all skills by this author →
Website𝕏@wackieGitHub

ui-guidelines

Define mobile-first UI design standards for the WOD Brains application.

1|Updated Jan 27, 2026
Search Tags:#ui#frontend#design system#guidelines#ux#wodbrains
One-click install
npx skills add https://github.com/jdconley/wodbrains --skill ui-guidelines-jdconley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-guidelines
Source: https://github.com/jdconley/wodbrains/tree/main/.cursor/skills/ui-guidelines
Command: npx skills add https://github.com/jdconley/wodbrains --skill ui-guidelines-jdconley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to ensure all UI development for the WOD Brains application adheres to a consistent, mobile-first, and app-like design philosophy, preventing UI fragmentation and improving user experience.

Core Features & Use Cases

  • Design System: Defines color palettes, spacing scales, typography, and border-radius values.
  • Component Guidelines: Details usage for navigation, headers, buttons, and overlays.
  • Layout Patterns: Outlines full-screen shells, content insets, and DRY content containers.
  • Animations & Transitions: Specifies standard animation timings and keyframes.
  • Security & SEO: Includes guidelines for XSS prevention and meta tag updates.
  • Use Case: When developing a new feature, consult these guidelines to ensure new components match the existing look and feel, use the correct color variables, and follow established navigation patterns.

Quick Start

Follow the UI design guidelines for WOD Brains app when making UI changes.

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 design patterns for mobile-first applications?▼

Maintain consistent UI design patterns by using predefined color systems, spacing scales, typography, and border-radius values. This prevents UI fragmentation and ensures a cohesive, app-like aesthetic across mobile-first interfaces.

What CSS variables and spacing scales should I use for frontend design systems?▼

Frontend design systems should use specific CSS variables, standardized spacing scales, and defined font weights. Adhering to these values ensures consistent visual implementation across all components and layout patterns.

How do I standardize navigation and component guidelines for app-like UX?▼

Standardize navigation and component guidelines by defining usage rules for headers, buttons, overlays, and full-screen shells. Following established navigation patterns ensures a consistent app-like UX across the application.

What are the best practices for animations, security, and SEO in UI guidelines?▼

UI guidelines specify standard animation timings and keyframes for transitions, XSS prevention methods for security, and meta tag updates for SEO. These practices ensure functional consistency alongside visual design.

Do I need existing CSS variables to apply these UI guidelines?▼

Yes, applying these UI guidelines requires using the defined CSS variables and spacing scales within your environment. You must map your frontend components to these established values for consistent implementation.

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
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
Mohamed-ElkahefMohamed-Elkahef

frontend-enhancer

Enhance Next.js frontends with pre-built UI components and design system resources.

Community
Intermediate