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.
component-dev
React ์ปดํฌ๋ํธ ๊ฐ๋ฐ ์คํฌ. ์ปดํฌ๋ํธ ํ ํ๋ฆฟ, ํจํด, ์์ฑ ๊ท์น์ ์ ๊ณตํ๋ค.
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.
