UI Components
Code-based UI component generation and styling
react-testing-library
by pluginagentmarketplace
Write production-grade React tests with Testing Library, MSW, and comprehensive coverage patterns
coding-standards
by Programmer-RD-AI-Archive
Enforce language-specific coding standards (Python/TS/JS/Go/Rust/C/C++) + PR/commit conventions.
forge-ux
by fwehrling
FORGE UX Agent — Generates UX design, wireframes, design system, and accessibility guidelines. Usage: /forge-ux
beauty-step2
by Within-7
"幻灯片内容转换与拆分。在beauty命令的步骤2执行时自动调用，将文档内容完整转换为结构化的幻灯片页面，确保内容零遗漏、逻辑清晰、页面适量。用于处理：文档结构分析、页面类型规划、内容拆分策略、完整性验证。"
architecture-diagrams
by dereknex
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
react-useeffect
by cachemoney
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.
fe-techspec
by seonghyeonkimm
FE TechSpec 문ì ìì± í í릿과 í¨í´. Linear íë¡ì í¸ì 기ì ëª ì¸ì를 ìì±í ë 참조. Use when: TechSpec ìì±, 기ì ëª ì¸ì ìì±, Given/When/Then í ì¤í¸ ì¼ì´ì¤ ì ì, Acceptance Criteria ìì±, Solution ì¤ê³ 문ì ìì± ì ì¬ì©.
fast-playwright
by tontoko
Fast, persistent, and token-optimized browser automation using Playwright. Supports navigation, clicking, typing, screenshots, batch execution, and more. Use when working with web pages, browser automation, or when the user mentions browsing, clicking, or web scraping.
wcag-audit-operable-keyboard
by Jkense
Route user interaction and control accessibility design patterns
planning
by juriwiens
Guidelines for planning code implementations - invoke when entering plan mode or before implementing a complex feature
architecture-patterns
by baotoq
Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use when architecting complex backend systems or refactoring existing applications for better maintainability.
brainstorming
by dmonteroh
"Clarify ambiguous work through structured brainstorming: ask focused questions, propose 2-3 approaches with tradeoffs, and produce a concise design brief (goals, non-goals, constraints, risks, validation). Use when requirements are unclear or before large/irreversible changes."
shadcn
by velcrafting
This skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns.
reviewer
by scottymcandrew
Code review specialist. Use when code needs review, before merging changes, or to assess code quality. Provides structured feedback with severity levels.
fullstacknextjs
by gilbertopsantosjr
Collection of skills for full-stack Next.js development with Clean Architecture and AWS serverless. Backend uses Entities, Use Cases, Repository pattern, and DI Container. Frontend uses thin server action adapters.
service-layer-extraction
by shimo4228
"Use when a Typer/Click CLI module exceeds 300 LOC with mixed concerns. Extract business logic into a testable service layer."
agora-dev-skill
by jayalbo
Comprehensive assistant for Agora.io developers building real-time engagement apps. Generates production-ready code for video/voice calls, live streaming, cloud recording, media push/pull, and AI agents. Provides troubleshooting, code review, and best practices for Web, iOS, Android, React Native, and Flutter platforms.
vani-ssr-hydration
by itsjavi
Implement SSR, hydration, and selective activation with Vani
drawio
by hb12devtn
Generate draw.io diagrams from user requests using Python code execution to produce clickable URLs that open in the draw.io web editor. Use this skill whenever the user asks to create any kind of diagram, flowchart, architecture diagram, org chart, sequence diagram, ERD, mind map, network topology, wireframe, UML diagram, BPMN, state machine, Gantt chart, or any other visual diagram. Also trigger when the user says "draw", "diagram", "chart", "visualize", "flowchart", "architecture", "draw.io", "mermaid diagram", or requests any visual representation of a process, system, or hierarchy. This skill generates privacy-friendly draw.io URLs where all data stays client-side via hash fragments.
gluestack-ui-v4:validation
by gluestack
Validation checklist and anti-patterns for gluestack-ui v4 - use for code review, checking implementation quality, and identifying common mistakes.
feature-arch
by thongdn-it
React feature-based architecture guidelines for scalable applications (formerly feature-architecture). This skill should be used when writing, reviewing, or refactoring React code to ensure proper feature organization. Triggers on tasks involving project structure, feature organization, module boundaries, cross-feature imports, data fetching patterns, or component composition.
vue-composition-api
by pluginagentmarketplace
Master Vue Composition API - Composables, Reactivity Utilities, Script Setup, Provide/Inject
react
by dmonteroh
"Build React frontends (SPA/library) with modern hooks, state management, accessibility, and performance. Framework-agnostic: not Next.js-specific and not React Native. Use when implementing React components, client-side routing, data fetching/state, and React testing."
c4-architecture
by fefogarcia
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".