Components d’interfície
Generació de components d’interfície i implementació d’estils amb codi
accessible-motion
dylantarre
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
brand-strategist
dylantarre
Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
attention-grabbers
dylantarre
Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.
Animation Principles - Refresher
dylantarre
Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations
animator-traditional
dylantarre
Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.
Animation Principles - Troubleshooting
dylantarre
Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
character-appeal
dylantarre
Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must have personality and presence.
web-haptics
lochie
Add haptic feedback to web apps using the web-haptics library. Use when building mobile-facing UIs that need tactile feedback on buttons, toggles, forms, pickers, and other interactive elements.
domain-name-brainstormer
softaworks
Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.
design-system-starter
softaworks
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
frontend-to-backend-requirements
softaworks
Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.
mui
softaworks
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
draw-io
softaworks
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
react-useeffect
softaworks
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
qa-test-planner
softaworks
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
code-quality-review
rsmdt
Systematic code review patterns, quality dimensions, anti-pattern detection, and constructive feedback techniques. Use when reviewing code changes, assessing codebase quality, identifying technical debt, or mentoring through reviews. Covers correctness, design, security, performance, and maintainability.
user-insight-synthesis
rsmdt
Interview techniques, persona creation, journey mapping, and usability testing patterns. Use when planning research, conducting user interviews, creating personas, mapping user journeys, or designing usability tests. Essential for user-research, requirements-analysis, and interaction-architecture agents.
tech-stack-detection
rsmdt
Auto-detect project tech stacks (React, Vue, Express, Django, etc.). Recognize package managers and configuration patterns. Use when starting work on any project, analyzing dependencies, or providing framework-specific guidance.
pattern-detection
rsmdt
Identify existing codebase patterns (naming conventions, architectural patterns, testing patterns) to maintain consistency. Use when generating code, reviewing changes, or understanding established practices. Ensures new code aligns with project conventions.
prompt-optimizer
staruhub
Analyze and optimize user prompts for clarity, specificity, and completeness using interactive questionnaires or direct analysis. Use this skill when user requests are vague, ambiguous, incomplete, or lack necessary details. Supports two modes - Interactive Mode (uses AskUserQuestion tool for guided clarification) and Direct Analysis Mode (provides optimization suggestions). Triggers on prompts containing vague language like "something", "thing", "stuff", "it", or when requests lack context, technical specifications, success criteria, or examples. When user requests interactive/questionnaire mode, use AskUserQuestion to guide them through structured questions. Helps transform unclear requests into well-structured, actionable prompts.
architecture-selection
rsmdt
System architecture patterns including monolith, microservices, event-driven, and serverless, with C4 modeling, scalability strategies, and technology selection criteria. Use when designing system architectures, evaluating patterns, or planning scalability.
react-native
alinaqi
React Native mobile patterns, platform-specific code
ui-testing
alinaqi
Visual testing - catch invisible buttons, broken layouts, contrast
ui-mobile
alinaqi
Mobile UI patterns - React Native, iOS/Android, touch targets