skills.rest
doubleG7
doubleG7COMMUNITY
Explore all skills by this author →
GitHub

ui-guide

Reference Nirvana UI patterns for components, colors, and responsive design.

Updated Jun 10, 2026
Search Tags:#react#design patterns#frontend development#ui design#nirvana
One-click install
npx skills add https://github.com/doubleG7/nirvana --skill ui-guide-doubleg7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-guide
Source: https://github.com/doubleG7/nirvana/tree/main/.claude/skills/ui-guide
Command: npx skills add https://github.com/doubleG7/nirvana --skill ui-guide-doubleg7

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a quick reference for Nirvana UI patterns, streamlining the process of building components and pages for the Nirvana frontend.

Core Features & Use Cases

  • UI Pattern Reference: Offers a concise guide to Nirvana UI components and their organization.
  • File Conventions: Details the naming and file structure conventions for Nirvana components.
  • Color and Typography: Provides color and typography guidelines for a consistent look.
  • Responsive Design: Covers mobile-first responsive design principles and patterns.
  • Page Patterns: Offers examples of common page structures and their components.
  • Status Colors and Border Radius: Lists standardized colors and border radii for UI elements.
  • Sliding Forms: Explains the use of sliding forms for inline editing and wizards.
  • Login Page: Describes the standardized login page structure and components.
  • Do/Don't Guidelines: Provides best practices for UI development.

Quick Start

To learn about Nirvana UI patterns, review the 'ui-guide' skill's reference document for quick and easy access to UI component guidelines.

Frequently Asked Questions about ui-guide

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

FAQPage Schema
What are the standard Nirvana UI patterns for frontend component organization?▼

Nirvana UI patterns organize frontend components through specific file naming conventions and structural guidelines. This reference details component organization to ensure consistency and efficiency when building Nirvana applications.

How do I structure a login page using Nirvana UI design guidelines?▼

To structure a Nirvana login page, use the standardized login page structure and components detailed in the UI guide. It provides specific layout patterns to ensure authentication interfaces remain consistent across applications.

What color and typography guidelines should I follow for Nirvana frontend development?▼

Nirvana frontend development requires adhering to specific color and typography guidelines for a consistent look. The reference provides standardized status colors, border radii, and typographic rules for UI elements.

When should I use sliding forms in Nirvana UI components?▼

Sliding forms in Nirvana UI are used for inline editing and multi-step wizards. The UI guide explains how to implement these patterns to streamline data entry workflows within your frontend components.

Does this UI guide cover mobile-first responsive design principles for Nirvana applications?▼

Yes, the Nirvana UI guide covers mobile-first responsive design principles and patterns. It provides actionable directives to ensure your frontend components adapt correctly across different screen sizes.

What are the best practices and don'ts for Nirvana frontend development?▼

Nirvana frontend development best practices include following specific do and don't guidelines for UI creation. The reference highlights standardized page structures and common component patterns to prevent design inconsistencies.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
drhazemibclcdrhazemibclc

design-implementation-reviewer

Identify pixel deviations between live UI implementations and Figma designs.

Community
Advanced
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate
whyashthakkerwhyashthakker

frontend-design

Create production-ready frontend interfaces with design systems in React, Vue, or Angular.

Community
Advanced