skills.rest
linguistic76
linguistic76COMMUNITY
Explore all skills by this author →
GitHub

skuel-ui

Build SKUEL platform user interfaces with BasePage, SidebarPage, and FormGenerator.

2|Updated Jan 23, 2026
Search Tags:#ui#web development#frontend#components#navigation#forms#skuel
One-click install
npx skills add https://github.com/linguistic76/skuel --skill skuel-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skuel-ui
Source: https://github.com/linguistic76/skuel/tree/main/app/.claude/skills/skuel-ui
Command: npx skills add https://github.com/linguistic76/skuel --skill skuel-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to building user interfaces within the SKUEL framework, ensuring consistency, maintainability, and adherence to best practices.

Core Features & Use Cases

  • Page Architecture: Understand the BasePage foundation, page types (STANDARD, HUB, CUSTOM), and design token usage.
  • Component Composition: Learn the three-layer model (Primitives, Patterns, Layouts) and how to structure new components.
  • Navigation: Implement consistent navigation using NavItem, icon links, and mobile-friendly patterns.
  • Sidebar Pages: Create collapsible and persistent sidebars using SidebarPage for complex sections.
  • Form Patterns: Utilize FormGenerator for Pydantic-driven forms and understand three-tier validation.
  • Inline CSS & Interactivity: Leverage MonsterUI tokens and HTMX/Alpine.js for dynamic UIs.
  • Use Case: When developing a new feature that requires a form submission, a sidebar navigation, and a consistent page layout, consult this Skill for the correct patterns and components to use.

Quick Start

Use the skuel-ui skill to build a new page with a form and sidebar navigation.

Frequently Asked Questions about skuel-ui

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

FAQPage Schema
How do I structure frontend components for a web application using a three-layer model?▼

Structure user interfaces using a three-layer component model consisting of Primitives, Patterns, and Layouts. This composition hierarchy ensures maintainability and consistency when building new web application pages.

What is the best way to generate Pydantic-based forms for web development?▼

Generate Pydantic-based forms using a FormGenerator component that supports a three-tier validation pattern. This approach drives form creation directly from Pydantic models to ensure robust data consistency.

How do I implement persistent and collapsible sidebar navigation for complex sections?▼

Implement persistent and collapsible sidebar navigation using a SidebarPage component. This pattern provides consistent navigation structures for complex application sections across desktop and mobile views.

Does MonsterUI work with HTMX and Alpine.js for dynamic UI interactivity?▼

MonsterUI works with HTMX and Alpine.js to provide dynamic UI interactivity. The framework leverages MonsterUI design tokens alongside these libraries to handle inline CSS and dynamic frontend interactions.

How do I build a consistent page layout using design tokens and a BasePage foundation?▼

Build consistent page layouts by using a BasePage foundation and applying standardized design tokens. Page types include STANDARD, HUB, and CUSTOM configurations to maintain structural consistency.

Related Skills

Explore More Software Engineering Skills→
edyrujaedyruja

pydantic-models-py

Generate Base, Create, Update, Response, and InDB Pydantic v2 models.

Community
Advanced
litestar-orglitestar-org
13

litestar-htmx

Integrate HTMX with Litestar using the first-party HTMXPlugin and response objects.

Official
Intermediate
eykdeykd

htmx-pattern-library

Provide HTMX and Alpine.js patterns for interactive web features.

Community
Advanced
HardyLiu6HardyLiu6

gsap-frameworks

Animate components in Vue, Svelte, and other non-React frameworks.

Community
Intermediate