Does this skill follow accessibility standards?

Absolutely. The skill enforces WCAG AA minimum compliance and ensures all generated animations respect the user's 'prefers-reduced-motion' settings.

How is this different from a generic design skill?

It is specifically tuned for Maycrest’s identity as an Agentic-Enabled Managed Intelligence Provider, focusing on high-tech, data-informed aesthetics rather than generic templates.

Can it generate CSS for specific components?

Yes, it contains detailed definitions for the Maycrest component library, including glass-morphism cards, navigation drawers, and motion-enabled buttons.

Where does the skill get its implementation values?

It references the DESIGN.md file at the repository root as the single source of truth for precise CSS clamp values, blur levels, and motion easing curves.

How does this skill help with frontend development?

It provides Claude with specific brand colors, typography scales, and component structures unique to Maycrest, ensuring code generation matches existing brand standards and positioning.

Maycrest Web Design System

Name: Maycrest Web Design System
Author: coreymaypray

bycoreymaypray

0•

Design Tools

Standardizes UI/UX patterns and frontend design strategy for the Maycrest intelligence platform and brand website.

This skill serves as the authoritative UI/UX architect for Maycrest, providing Claude with specific design tokens, layout patterns, and brand aesthetics needed to build high-performance web interfaces. It bridges the gap between high-level brand strategy and technical implementation, ensuring all frontend components—from the TIE Platform dashboards to service-specific landing pages—maintain a consistent 'Intelligence-Enabled' aesthetic that blends premium SaaS design with technical credibility and Indianapolis-rooted professionalism.

Key Features

01Enforces dark-mode forward UI patterns using deep navy backgrounds and luminous accents.

020 GitHub stars

03Integrates motion design principles that prioritize performance, purpose, and accessibility.

04Provides specific design tokens for colors, typography, spacing, and brand-aligned surfaces.

05Standardizes page architecture for Creative Services, AI Solutions, and Cybersecurity arms.

06Specifies a component library including 'intel-cards', glass morphism headers, and node-network visuals.

Use Cases

01Building or refining landing pages for Maycrest's three distinct service divisions.

02Generating CSS and React components that strictly adhere to the project's DESIGN.md specifications.

03Developing high-fidelity UI components for the TIE Platform intelligence dashboard.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add coreymaypray/sloth-skill-tree maycrest-web-design

For use in Claude.ai and ChatGPT

Key Features

01Enforces dark-mode forward UI patterns using deep navy backgrounds and luminous accents.

020 GitHub stars

03Integrates motion design principles that prioritize performance, purpose, and accessibility.

04Provides specific design tokens for colors, typography, spacing, and brand-aligned surfaces.

05Standardizes page architecture for Creative Services, AI Solutions, and Cybersecurity arms.

06Specifies a component library including 'intel-cards', glass morphism headers, and node-network visuals.

Use Cases

01Building or refining landing pages for Maycrest's three distinct service divisions.

02Generating CSS and React components that strictly adhere to the project's DESIGN.md specifications.

03Developing high-fidelity UI components for the TIE Platform intelligence dashboard.