UI Components
Code-based UI component generation and styling
trivia-os
by coughlinben94
Trivia OS — real-time trivia-night platform for Baynes Apple Valley (React + Vite + Supabase Realtime; 21 ambient themes with per-show font/color overrides, 15 slide types including automated Winner Reveal, full scoreboard system). Use this skill whenever working on Trivia OS or anything under ~/Projects/baynes-trivia/trivia-os — the host build/live control surface, the /display TV renderer, /join phones, slides, rounds, scoring, powerups, the ambient ParticleBackground themes, theme overrides, or display transitions/animations. Read this plus its references before any display/theme/animation work, even on casual asks.
ezra-qa
by christopheraaronhogg
Provides expert QA analysis, testing strategy review, and quality process assessment. Use this skill when the user needs test coverage evaluation, testing strategy guidance, or quality assurance audit. Triggers include requests for QA review, test coverage analysis, or when asked to evaluate testing practices. Produces detailed consultant-style reports with findings and prioritized recommendations — does NOT write implementation code.
react-hook-form
by Dsantiagomj
Performant form management with React Hook Form. Covers form state, validation with Zod, field arrays, form submission, and error handling. Trigger: When building forms, when implementing form validation, when handling form submissions, when using Zod schema validation.
react-development
by jacobporci
React development best practices for functional components, hooks, state management, and performance optimization. Use when asked for "React help", "component creation", "refactoring components", "state management advice", or "fixing re-render issues". Optimized for senior developers building scalable applications.
jm-balanced-coding-patterns
by jmisilo
jm-balanced-coding-patterns is a set of design patterns and best practices curated by JM to enhance software development efficiency and maintainability, while ensuring code quality and scalability.
tanstack-query
by Alicoder001
TanStack Query (React Query) patterns for data fetching, caching, mutations, and optimistic updates. Use when implementing server state management, API caching, or data synchronization in React applications.
market-spas-b2b
by SeanLysten
Contexte projet pour le portail B2B Market Spas (revendeurs spas/jacuzzis FR/BE/LU). À utiliser dès qu'une tâche touche au repo market-spas-b2b — toute modification de catalogue, panier, commandes, leads, partenaires, SAV, pièces détachées, admin dashboard, carte partenaires, intégrations Meta/Mollie/Resend/supplier, ou backend tRPC/Drizzle.
brainstorming
by CodingHeader
"You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation."
frontend-design
by alexandephilia
Creates premium, visually stunning web interfaces with modern design patterns. Use when building UI components, landing pages, dashboards, or any user-facing interface. Emphasizes rich aesthetics, micro-animations, glassmorphism, and responsive layouts.
mysql-best-practices
by jcastillotx
MySQL database development standards. Triggers when working with MySQL databases, queries, schema design, or optimization.
tailwind
by ruchernchong
Audit and fix Tailwind CSS anti-patterns. Enforces spacing direction (bottom-only), size-* usage, gap preference, 8px grid, and other best practices.
exampass
by MIKUZ12
将课程资料（PPT/Word/PDF/截图）按章节生成深度知识清单、教授式详细讲解和交互式章节测试，帮助学生高效期末复习。
ux-detail-review
by Simply-Strong-Lab
Detail-focused UI/UX review workflow based on Buzz Usborne's "God is in the details". Use when reviewing screenshots, prototypes, websites, or apps for interaction polish, usability friction, feedback clarity, loading behavior, microcopy tone, and platform convention fit. Trigger for requests like "UX 리뷰", "UI í¼ëë°±", "ëìì¸ ê²í ", "ì¬ì©ì± ë¶ì", "ì¸í°ëì ê°ì ", "ëí ì¼ ì ê²", "UX review", "UI review", "design critique", "usability audit", or "interaction polish".
angular-migration
by TriNgo0108
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.
react-guidelines
by StefanMermans
Crucial info when dealing with a React project, these guidelines must always be followed in react contexts.
review:ux
by IKatsuba
UX Review - analyzes feature for efficiency-first UX patterns, keyboard navigation, and pro-tool experience
angular-code-review
by Olino3
Deep Angular code review of changed files using git diff analysis. Focuses on production quality, security vulnerabilities, performance bottlenecks, architectural issues, and subtle bugs in code changes.
mobile-design
by noelrohi
Create distinctive, production-grade mobile UI screens as HTML files. Use when the user asks to 'design a mobile app,' 'create mobile screens,' 'mobile UI,' 'app prototype,' 'iOS screen,' 'mobile mockup,' or 'mobile design.' Generates memorable, polished HTML that avoids generic AI aesthetics.
Aura of the 21st Century — Claude Skills
by weltogeisto
Change Stirner's â¬â value or hidden location
design-hig-principles
by jacoblewisau
Audit iOS/macOS UI against Apple Human Interface Guidelines. Provides context-aware, multi-perspective feedback on colors, typography, layout, accessibility, and platform conventions.
find-skills
by Alicoder001
Skill discovery and selection utility. Use when you need to find relevant skills from the Alicoder001/agent-skills repository based on project needs and technology stack.
react
by vainjs
TypeScript/React code standards. Use when writing or reviewing React components, hooks, or TypeScript code.
scaffold
by biruk741
Initialize and scaffold the complete monorepo project structure based on the technology stack and architecture decisions. Sets up the frontend, backend, shared packages, configuration, dev scripts, and a working hello-world across the full stack. Use when the team is ready to start coding and the stack and architecture are decided. Also use when someone says "set up the project", "scaffold this", "initialize the repo", or "let's start building". This skill creates a production-quality project foundation, not just boilerplate.
grovebook
by Kineviz
Create and work with grovebook files - markdown files with interactive cells that can return JavaScript values, HTML, markdown, ObservableHQ Inputs components, or Grove extended library components.