Design
UI/UX direction, visual design, and design systems
component-gallery
by tdimino
"Encyclopedic access to UI component patterns and design system implementations from component.gallery (60 components, 95 design systems, 2,676+ real-world examples). This skill should be used when researching how specific UI components are implemented across production design systems, comparing component patterns before building, finding alternative component names, or grounding frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows."
minoan-frontend-design
by tdimino
This skill should be used when building web components, pages, artifacts, posters, or applications (websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Creates distinctive, production-grade frontend interfaces with high design quality that avoids generic AI aesthetics.
hai-tdd
by hylarucoder
Drives implementation through a strict red-green-refactor loop and produces a filled-in test-evidence report (target behavior, the failing RED test + why it failed for the right reason, the minimal GREEN implementation, the refactor decision, and verification commands). Use whenever the user implements a feature, fixes a bug, changes or protects behavior, refactors, or asks to add/write a test or unit test — even when they never say "TDD". Trigger on TDD, test-driven development, test first, red-green-refactor, tdd this, do it test first, add test coverage, unit test for this; and on 红绿重构, 先写测试, 用测试驱动开发, 写测试, 加测试, 补个测试, 单元测试, 给这个写个测试, 测一下, 帮我测; plus the regression-safety intent — refactor without breaking behavior, 确保不回归, 别改坏了, 保证行为不变.
streamlit-pivot
by streamlit
"Build Streamlit apps with st_pivot_table — a BI-focused pivot table component supporting multi-dimensional pivoting, subtotals, conditional formatting, Excel/CSV/TSV export, drill-down, drag-and-drop, date hierarchies with period-over-period comparisons, synthetic measures (including formula measures), Top N / Bottom N and value-predicate analytical filters (0.5.0+), show-values-as analytical display modes (running total, rank, % of parent, index), values axis placement (values_axis rows/columns, 0.5.0+), multi-field chained sorting (0.5.0+), custom member grouping — combine multiple dimension values into a named group for cleaner rollups (member_groups, 0.6.0+), server-side pre-aggregation for large datasets, and aggregation result memoization for significant latency reduction on display-only reruns (number_format, style, show_values_as — groupby is skipped on repeat renders in threshold_hybrid mode). Use when: user wants a pivot table in Streamlit, mentions streamlit_pivot / st_pivot_table, needs interactive data summarization, Top N filter, value filter, running total, rank, income statement layout, values on rows, financial report, wants to group dimension members (e.g. combine regions, bundle categories), or wants to deploy to Streamlit Community Cloud or Streamlit in Snowflake (SiS) on SPCS (installed from PyPI via PYPI_ACCESS_INTEGRATION). Triggers: pivot table, streamlit_pivot, st_pivot_table, pivot, crosstab, data summarization, top N, top n filter, value filter, running total, rank, values on rows, income statement, financial layout, member group, group members, combine regions, bundle categories, custom grouping, SiS, SiS on SPCS, Snowflake streamlit, PYPI_ACCESS_INTEGRATION, Streamlit Community Cloud, aggregation cache, memoization, display-only rerun, near-zero latency."
system-design
by Dwsy
Use when designing, architecting, or planning a new system from requirements or ideas - transforms concepts into navigable design catalog using EventStorming methodology, Mermaid diagrams, and progressive elaboration through 5 phases (Requirements, Big Picture, Processes, Data/Flows, Integration)
architect-refine-critique
by NTCoding
"Three-phase design review. Chain architect → refiner → critique subagents. Triggers on: 'design review', 'architecture review', '/arc', system design proposals, significant refactoring decisions, new service or module design."
Web Interface Guidelines
by quran
Frontend build on next.js
frontend-design
by quran
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill
quran.com-frontend-next
by quran
Frontend build on next.js
accessibility-compliance
by aj-geddes
Implement WCAG 2.1/2.2 accessibility standards, screen reader compatibility, keyboard navigation, and a11y testing. Use when building inclusive web applications, ensuring regulatory compliance, or improving user experience for people with disabilities.
ux-designer
by szilu
Apply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, user research, and frontend code review.
design
by mcouthon
"Use when building dashboards, SaaS UIs, admin interfaces, or any interface needing polished professional design. Covers design direction, craft principles, and 9-phase implementation. Triggers on: 'use design mode', 'design system', 'design system upgrade'. Full access mode."
design
by mcouthon
"Use when building dashboards, SaaS UIs, admin interfaces, or any interface needing polished professional design. Covers design direction, craft principles, and 9-phase implementation. Triggers on: 'use design mode', 'design system', 'design system upgrade'. Full access mode."
quran.com-frontend-next
by quran
Frontend build on next.js
web-design-guidelines
by quran
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check
Web Interface Guidelines
by quran
Frontend build on next.js
quran.com-frontend-next
by quran
Frontend build on next.js
frontend-design
by jdrhyne
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
accelint-persona-review
by gohypergiant
Evaluate Figma designs from operator persona perspectives through design critique and user experience evaluation. Use when reviewing UX for specific user roles (e.g., air-surveillance-tech, weapons-director), conducting design reviews, or evaluating operator interfaces. Analyzes cognitive load, communication patterns, pain points, and system visibility. Works with Figma MCP (desktop/URL) and Outline docs.
Web Interface Guidelines
by quran
Frontend build on next.js
style-guide
by DaleSeo
문서 내부 또는 프로젝트 전체에서 일관된 작성 스타일을 유지하도록 돕는 검사기. 어조(경어체/반말), 용어(사용자/유저), 숫자 형식, 목록 스타일, 따옴표, 날짜/시간 형식의 불일치를 감지합니다. 다중 작성자 문서 검토 시, 프로젝트 전체 용어 표준 유지 시, 공식 문서 준비 시, 브랜드 일관성을 위한 문서 작업 시 사용하세요.
creating-streamlit-themes
by streamlit
Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
material-you-slides
by yzlnew
Create presentation slides using Material You (Material Design 3) style. Generates 1280x720 HTML slides with M3 color tokens, Roboto typography, rounded cards, flow diagrams, metric cards, code blocks, and structured layouts. Use when the user asks to create slides, presentations, or decks and wants a clean, modern Material Design 3 aesthetic.
responsive-system
by fusengine
Use when implementing responsive layouts, mobile-first design, or adaptive components. Covers breakpoints, container queries, fluid typography.