wednesday-design

The wednesday-design skill functions as a strict UI and UX compliance engine for modern frontend development within Wednesday Solutions projects. It is specifically optimized for React and Next.js environments using Tailwind CSS, acting as a gatekeeper for design consistency. The primary mandate of this skill is to eliminate the creation of custom UI components by enforcing the usage of a pre-vetted index of over 492 components sourced from eight approved industry-standard libraries, including shadcn/ui, Aceternity UI, Magic UI, Motion Primitives, Animate UI, Eldora UI, Cult UI, and ABUI. By centralizing design decisions, it ensures that all UI elements are battle-tested, accessible, and performant.

• Enforces strict adherence to a hierarchical library priority list, requiring developers to leverage existing components before attempting any custom styling.

• Provides immediate guidance on visual design tokens, spacing systems, and typography hierarchies (Instrument Serif and DM Sans) to ensure brand alignment.

• Offers rapid lookup capabilities for UI solutions, mapping functional requirements—such as 3D card effects, data tables, modals, or typewriter animations—to the exact approved library component.

• Integrates accessibility reviews by default, flagging potential non-compliant UI elements before they reach the codebase.

• Includes a clear decision-making flow: check for component existence, compose existing components, or extend styles using predefined design tokens.

• Prevents architectural drift by strictly separating visual design output from business logic, TypeScript definitions, and API route structures.

• Use this skill whenever you are building UI components, applying Tailwind classes, or addressing accessibility concerns within the frontend.

• Always consult the approved component library index before writing new code to prevent redundant or non-standard component creation.

• When a desired UI component is missing, follow the escalation protocol: attempt to compose existing components first, then extend styles, and only seek approval for custom implementations if no other options are viable.

• Adhere to the established 4px base grid spacing system and brand-specific color palettes (Green #4ADE80 to Teal #0D9488) to maintain the premium, minimal aesthetic.

• Developers should treat this skill as a mandatory peer-reviewer for visual output, prioritizing consistency and maintenance speed over custom feature implementation.