skills.rest
hybrid-npm
hybrid-npmOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-design

Standardizes UI/UX patterns for Astro and React-based documentation sites and mini apps.

17|Updated Mar 14, 2023
Search Tags:#documentation#accessibility#react#design system#ui design#astro#ux patterns
One-click install
npx skills add https://github.com/hybrid-npm/hybrid --skill ui-ux-design-hybrid-npm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/hybrid-npm/hybrid/tree/main/.agents/skills/ui-ux-design
Command: npx skills add https://github.com/hybrid-npm/hybrid --skill ui-ux-design-hybrid-npm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX patterns and design system conventions for Hybrid's documentation site and mini apps, ensuring consistency, accessibility, and efficient collaboration across teams.

Core Features & Use Cases

  • Documentation-site structure guidance (site/content/docs, markdown conventions, and Astro/React integration).
  • Design-system rules for typography, color, components, and accessibility in both docs and mini-apps.
  • Practical implementation guidance for building consistent interfaces and documentation experiences.

Quick Start

Audit Hybrid's site and start applying the UI/UX guidelines to update pages, components, and mini-app interfaces.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I standardize UI design patterns for Astro and React documentation sites?▼

Standardize UI design patterns by applying consistent rules for layout, typography, color, and component usage across Astro and React documentation sites, ensuring reduced inconsistency and improved accessibility.

What is the best way to structure documentation for a React and Astro design system?▼

Structure documentation by defining markdown conventions, site content paths, and design system rules for typography and accessibility, ensuring clear integration between Astro and React components.

How do I improve accessibility in UI components for mini apps?▼

Improve accessibility by applying standardized UX guidelines to mini apps, enforcing consistent color contrast, component rules, and interaction patterns across user-facing interfaces.

Can I use these UI/UX guidelines for both documentation pages and component libraries?▼

Yes, the UI/UX guidelines apply to both documentation pages and component libraries, providing standardized rules for layout, typography, and accessibility across all user-facing interfaces.

How do I audit existing documentation pages for UI and UX consistency?▼

Audit existing documentation pages by reviewing current layouts and components against standardized UI and UX guidelines, then update typography, color, and interaction patterns to resolve inconsistencies.

Related Skills

Explore More Design & Creative Skills→
teamniteoteamniteo
5

section-docs

Add a structured documentation section to an existing Astro website.

Official
Advanced
rjroyrjroy
6

design

Document design decisions, interfaces, constraints, and edge cases for software architecture.

Community
Basic
one-ieone-ie
129

ai-elements

Build and deploy composable agentic UIs for React and Astro.

Official
Advanced
hotriluanhotriluan

ck:ui-styling

Implements accessible shadcn/ui components with Tailwind CSS in React frameworks.

Community
Intermediate