skills.rest
X-McKay
X-McKayCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Provides UI/UX design and component guidelines for Kubani web interfaces using Next.js and Tailwind CSS.

3|Updated Dec 2, 2025
Search Tags:#design system#next.js#tailwind css#frontend development#ui design#web components
One-click install
npx skills add https://github.com/X-McKay/kubani --skill frontend-x-mckay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/X-McKay/kubani/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/X-McKay/kubani --skill frontend-x-mckay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear, actionable guidelines for designing and developing the Kubani web interfaces, ensuring a consistent, distinctive, and accessible user experience.

Core Features & Use Cases

  • Consistent Design Language: Establishes a unified aesthetic for all web components and pages.
  • Technology Stack Guidance: Specifies the approved frameworks and libraries (Next.js, Tailwind CSS, Radix UI).
  • Design Principles: Outlines core tenets such as distinctive aesthetics, bold choices, effective typography, purposeful motion, and accessibility compliance.
  • Component Guidelines: Details best practices for building reusable and maintainable frontend components.
  • Use Case: A new developer joining the Kubani project can use this Skill to quickly understand the established design system and start building UI elements that align with the project's vision.

Quick Start

Refer to the frontend skill for UI design guidelines when building new web components.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build consistent web components for the Kubani dashboard?▼

To build consistent web components for the Kubani dashboard, follow the established UI design guidelines specifying Next.js and Tailwind CSS for a unified aesthetic. These guidelines ensure distinctive, accessible, and maintainable interfaces.

What is the approved technology stack for Kubani frontend development?▼

The approved technology stack for Kubani frontend development includes Next.js, Tailwind CSS, and Radix UI. Using these specified frameworks ensures your web components align with the project's design principles and accessibility standards.

What are the core UI design principles for Kubani web interfaces?▼

The core UI design principles for Kubani web interfaces include distinctive aesthetics, bold design choices, effective typography, and purposeful motion. These tenets ensure compliance with accessibility standards across all dashboard components.

Can I use other component libraries instead of Radix UI for Kubani projects?▼

For Kubani projects, you should use Radix UI as the specified component library rather than alternatives. The guidelines explicitly mandate Radix UI alongside Next.js and Tailwind CSS to maintain consistency and distinctive aesthetics across the dashboard.

How do I ensure accessibility compliance when building new web interfaces?▼

To ensure accessibility compliance when building new web interfaces, apply the Kubani design guidelines that outline specific accessibility tenets. Following these principles with Next.js and Tailwind CSS guarantees your components meet the required standards.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
hk-vkhk-vk

coss-ui

Provide reusable React components with Tailwind styling and Base UI.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
sinositatosinositato

prd-ui-prototype

Generate interactive HTML/CSS/JS UI prototypes from PRD documents.

Community
Advanced