skills.rest
redaantar
redaantarCOMMUNITY
Explore all skills by this author →
Website𝕏@_redaantarGitHub

ui-conventions

Standardize React UI patterns and styling for the Ckourse desktop app.

15|4|Updated Mar 5, 2026
Search Tags:#react#components#tailwind#design-system#shadcn#ui-conventions#squircle
One-click install
npx skills add https://github.com/redaantar/ckourse --skill ui-conventions-redaantar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-conventions
Source: https://github.com/redaantar/ckourse/tree/main/.claude/skills/ui-conventions
Command: npx skills add https://github.com/redaantar/ckourse --skill ui-conventions-redaantar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ckourse's UI conventions solve fragmented and inconsistent component implementations across the desktop app by providing a single source of truth for styling, component patterns, and runtime requirements so new UI work is predictable, maintainable, and accessible.

Core Features & Use Cases

  • Centralized tech and runtime guidance for React + TypeScript in a Tauri desktop app, including the required import alias and build expectations.
  • Clear styling rules: use theme tokens from src/index.css, avoid hardcoded colors, and apply Tailwind utility classes merged via cn().
  • Component patterns and composition: named exports, typed props with a className prop, shadcn/ui primitives usage, and squircle shape conventions with layered borders.
  • Practical scenarios: adding a new feature card, building a searchable sidebar button, or creating consistent loading and icon patterns across lessons and course pages.

Quick Start

Create a named React+TypeScript component in src/components that exports a named function, types props with an interface including className, merges classes with cn(), and uses theme tokens from src/index.css.

Frequently Asked Questions about ui-conventions

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

FAQPage Schema
How do I standardize React component styling and patterns in a Tauri desktop app?▼

Standardize React component styling in a Tauri desktop app by enforcing a single source of truth for UI conventions, including Tailwind theme tokens, the cn() class merging utility, and shadcn/ui primitives to ensure consistent visuals and behavior.

What's the best way to use Tailwind theme tokens and avoid hardcoded colors in React components?▼

The best way to avoid hardcoded colors in React components is to apply Tailwind theme tokens defined in src/index.css and merge utility classes dynamically using the cn() function for predictable and maintainable styling.

How do I create consistent squircle shapes with layered borders using shadcn/ui?▼

Create consistent squircle shapes with layered borders in shadcn/ui by applying the specified squircle clip-path pattern, ensuring uniform rounded corner geometry across feature components and UI primitives.

Does this UI convention require specific import aliases for React and TypeScript?▼

Yes, these UI conventions require the @/ import alias for React and TypeScript modules, ensuring build expectations and runtime requirements are met consistently across the desktop application codebase.

How do I structure a new feature card component with TypeScript and shadcn/ui?▼

Structure a new feature card component by creating a named React+TypeScript export in src/components, typing props with an interface including className, and merging classes with cn() using theme tokens.

Why does my React component styling break when using hardcoded values instead of theme tokens?▼

React component styling breaks when using hardcoded values because it bypasses the centralized theme tokens from src/index.css, leading to fragmented implementations and inconsistent visual behavior across the application.

Related Skills

Explore More Software Engineering Skills→
hi-yuki-922hi-yuki-922
1

frontend-dev-guide

Guide frontend development for Tauri and React 19 desktop applications.

Community
Advanced
djscruggsdjscruggs

shadcn

Apply shadcn/ui patterns with Radix primitives and Tailwind CSS in React or Next.js projects.

Community
Intermediate
ChenYCLChenYCL

web-artifacts-builder

Generate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.

Community
Intermediate
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced