skills.rest
stevenandteresa-maker
stevenandteresa-makerCOMMUNITY
Explore all skills by this author →
GitHub

everystack-ux-ui

Create React components and layouts using EveryStack's design system.

Updated Aug 23, 2026
Search Tags:#ui#accessibility#frontend#react#responsive design#design system#ux
One-click install
npx skills add https://github.com/stevenandteresa-maker/EveryStack --skill everystack-ux-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: everystack-ux-ui
Source: https://github.com/stevenandteresa-maker/EveryStack/tree/main/docs/skills/ux-ui
Command: npx skills add https://github.com/stevenandteresa-maker/EveryStack --skill everystack-ux-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all user-facing interfaces within EveryStack are visually consistent, accessible, and adhere to the core principles of progressive disclosure, leading to a seamless and intuitive user experience.

Core Features & Use Cases

  • Component Development: Build React components, page layouts, and views (Grid, Card, Record) following established design patterns.
  • Design System Adherence: Implement typography, color architecture, spacing, and responsive breakpoints as defined in the design system.
  • Interactive Elements: Create forms, modals, and navigation that are user-friendly and accessible.
  • Use Case: When building a new data entry form, use this skill to ensure it follows the correct spacing, uses the defined input components, and implements progressive disclosure for advanced options.

Quick Start

Create a new React component for a data grid that uses the defined spacing scale and shadcn/ui components.

Frequently Asked Questions about everystack-ux-ui

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

FAQPage Schema
How do I build React components that follow a consistent design system?▼

To build React components with a consistent design system, enforce predefined typography, color architecture, spacing scales, and responsive breakpoints. Use shadcn/ui components to ensure visual consistency and adherence to established layout patterns.

What is progressive disclosure in frontend UI design?▼

Progressive disclosure in frontend UI design is an approach that reveals advanced options only when needed, leading to a seamless and intuitive user experience. It guides the implementation of forms and interactive elements to avoid overwhelming users.

How do I create mobile-safe layouts for data grids and record views?▼

Create mobile-safe layouts for data grids and record views by applying defined responsive breakpoints and spacing scales. Use view rendering patterns specifically designed for Grid, Card, and Record views to ensure interfaces adapt correctly across devices.

Does this design system skill work with shadcn/ui components?▼

Yes, this design system skill works directly with shadcn/ui components. It enforces their usage alongside defined typography, color architecture, and spacing scales to ensure all React component creation is accessible and visually consistent.

Can I use this skill to implement accessible forms and navigation?▼

Yes, you can use this skill to implement accessible forms and navigation. It provides frontend engineering patterns to create user-friendly interactive elements, ensuring data entry forms follow correct spacing and accessibility principles.

What is the best way to manage color architecture and spacing in a React workspace UI?▼

The best way to manage color architecture and spacing in a React workspace UI is to enforce a defined design system. This skill provides specific patterns for applying spacing scales and color structures to ensure consistent frontend engineering.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
anicdhanicdh

frontend-ui

Apply Tailwind and Shadcn/ui patterns with accessibility rules to React components.

Community
Advanced
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced