create-ui-component
Use this skill when creating a new React UI component. It provides a consistent Lumina-style template.
screenfull-fullscreen-api
Implement fullscreen functionality using screenfull library for cross-browser fullscreen support in ng-events project
shadcn-vue
Context and reference for building UI with shadcn-vue components. Load when adding, modifying, or debugging UI components.
react-component
React 컴포넌트와 관련 파일들(hook, style, test)을 생성합니다. 사용자가 "컴포넌트 만들어", "새로운 React 컴포넌트", "컴포넌트 생성"과 같은 요청을 할 때 사용합니다.
react-hook-form
Pattern dùng react-hook-form + Shadcn Form + next-intl trong repo này (client forms, admin/forms).
radix-ui-patterns
Radix UI primitive components for accessible UI. Use when building accessible interactive components.
ui-components
Create React components with CSS Modules and design tokens
vanilla-extract
Implements zero-runtime CSS using vanilla-extract with type-safe styles, themes, recipes, and sprinkles. Use when wanting type-safe CSS, static extraction at build time, or building design system utilities.
openharmony-ui-reference
用于使用 ArkTS 开发 OpenHarmony UI 时 - 查找布局、组件、状态管理、动画、导航,或处理缺少装饰器、状态不更新、渲染问题等错误
sikhaid-styling
Use when working on UI, styling, colors, or design in SikhAid project. Covers brand colors (navy/orange), Tailwind CSS patterns, custom animations, typography, responsive design, and the design system.
http-interceptors
Angular 21+ functional HTTP interceptors for auth, error handling, loading states, retry logic, caching, and security best practices
frontend-css
Write consistent, maintainable CSS using the project's methodology (Tailwind, BEM, CSS Modules) with proper design tokens and performance optimization. Use this skill when writing or modifying styles, CSS classes, Tailwind utilities, or styling-related code. When working on files like *.css, *.scss, *.module.css, tailwind.config.js, or components with inline/utility styles. When applying design system tokens (colors, spacing, typography), avoiding framework style overrides, or optimizing CSS for production with purging/tree-shaking.
component-refactoring
Refactor high-complexity React components. Use when complexity is high, when the user asks for code splitting, hook extraction, or complexity reduction.
vue-component
Creating Vue 3 components following project conventions and script order. Use when building new components, refactoring existing ones, or reviewing component code for convention compliance.
next-intl-i18n
next-intl internationalization for 6 locales (pt-PT, en, tr, es, fr, de) with locale-prefixed routing, useTranslations/getTranslations patterns, and message file structure. Use when adding translations, creating localized pages, implementing language switchers, or handling locale routing.
generate-card
Generate dashboard card component with shadcn Card structure, TypeScript props, and optional sub-components. Use when creating new dashboard widgets or stat cards.
state-patterns
A practical skill for managing state in React prototypes without heavyweight libraries.
nextjs-server-navigation
Server Component navigation: <Link> for links, redirect() for conditional redirects. NO 'use client' needed for static links or server redirects.
form-building
Building create/edit forms with FormField components, validation integration, and save patterns
tanstack-errors
This skill should be used when the user asks about "React Query error handling", "error boundaries with useQuery", "throwOnError", "global error callbacks", "onError callback", "query error state", "mutation error handling", or needs guidance on error handling strategies and patterns in TanStack Query.
